Python全栈之学习CSS(2)
目录
- 1. css背景图
- 1.1 背景属性
- 1.2 背景图片引入
- 2. 相对_绝对_固定
- 2.1 相对定位
- 2.2 绝对定位
- 2.3 固定定位
- 3. float浮动
- 3.1 display转换元素
- 3.2 float浮动
- 4. html里面的bug
- 4.1 float内容塌陷问题
- 4.2 margin-top失效问题
- 4.3 overflow
- 总结
1. css背景图
1.1 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 背景属性</title>
<style>
.c1
{
/* 具体写法 */
width:600px;
height:600px;
border:solid 1px red;
background-color: yellow;
/* 控制背景图 */
background-image:url("./images/xiao.jpg");
/* 控制是否平铺 repeat-x repeat-y no-repeat repeat(默认)*/
background-repeat:no-repeat;
/* 控制背景图像的位置 ; 参数1 控制左右 参数 控制上下 */
/* background-position: 50% 50%; */
/* 固定背景图使用 fixed 了解 */
background-attachment: fixed;
}
.c2
{
/* 简写 */
width:600px;
height:600px;
margin:10px 20px;
border:solid 1px red;
/* 图片 是否平铺 [图片位置] */
background: url("./images/xiao.jpg") no-repeat 50% 50%;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
1.2 背景图片引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片的引入</title>
<style>
/* 鼠标滑过,点亮图片 */
div.c1
{width:60px;height:60px;border:solid 1px gray;background: url("./images/tag.jpg") no-repeat;}
div.c1:hover
{
background: url("./images/tag.jpg") no-repeat;
background-position: -312px -3.5px;
}
.gg
{
width:400px;
height:400px;
border:solid 1px red;
}
/* 一张图片的导入 */
div.c2
{
background: url("./images/xiao.jpg") no-repeat;
/* 参数1:宽 参数2:高 50px 50px / 100% 100% */
/* 控制背景图像的尺寸大小 background-size: 100% 100% ; */
background-size: 100% auto;
}
/* 多张图片导入 */
div.c3
{
background:
url("./images/game/map_19.gif") no-repeat 30px 80px,
url("./images/game/map_20.gif") no-repeat 50px 50px,
url("./images/game/map_18.gif") no-repeat 100px 50px,
url("./images/game/map_14.gif") no-repeat 180px 100px,
url("./images/game/map_03.gif");
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
</body>
</html>
2. 相对_绝对_固定
2.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:相对定位 relative</title>
<style>
.gg
{
width:200px;
height:200px;
border:solid 1px red;
}
.c1
{background:violet;}
.c2
{
background:tan;
position:relative;
top:10px;
left:100px;
z-index:2;
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
相对定位: 参考点是他自己本身,相对于原始的位置进行定位;
如果添加了定位:无论是添加(相对,绝对,固定)属性,添加之后会增加额外的其他属性:
z-index 控制层叠关系: 值越大越在上层,值越小越在下层
left
top
right
bottom
z-index
-->
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</body>
</html>
2.2 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:绝对定位 absolute</title>
<style>
.gg
{width:200px;height:200px;border:solid 1px red;}
.big
{
width:1000px;
height:1000px;
border:solid 1px red;
margin:100px 220px;
}
.c1
{
background:violet;
/* 无效 */
position: relative;
}
.c2
{
background:tan;
position: absolute;
top:0px;
left:0px;
/* bottom:0px;
right:0px; */
/* z-index:-1; */
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
绝对定位:参考点默认参考的是body
效果:脱离文档流,后面的内容自动补位
使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
(1)把想要的父级元素变成relative
(2)把要定位的元素变成 absolute
-->
<div class="big">
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:绝对定位 absolute</title>
<style>
.gg
{width:200px;height:200px;border:solid 1px red;}
.big
{
width:1000px;
height:1000px;
border:solid 1px red;
margin:100px 220px;
}
.c1
{
background:violet;
/* 无效 */
position: relative;
}
.c2
{
background:tan;
position: absolute;
top:0px;
left:0px;
/* bottom:0px;
right:0px; */
/* z-index:-1; */
}
.c3
{background:blue;}
.c4
{background:green;}
</style>
</head>
<body>
<!--
绝对定位:参考点默认参考的是body
效果:脱离文档流,后面的内容自动补位
使用:绝对定位会参照父级的相对定位进行移动,如果父级中没有relative,相对于body进行定位;
(1)把想要的父级元素变成relative
(2)把要定位的元素变成 absolute
-->
<div class="big">
<div class="c1 gg"></div>
<div class="c2 gg"></div>
<div class="c3 gg"></div>
<div class="c4 gg"></div>
</div>
</body>
</html>
2.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位:固定定位 fixed</title>
<style>
/* *号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉; */
*
{margin:0px;padding:0px;}
body
{height:2000px;}
.c1
{
width:500px;
height: 600px;
border:solid 1px red;
background-color: green;
position: fixed;
left:50%;
margin-left:-250px;
top:50%;
margin-top:-300px;
}
/*
<' transition-property '>： 检索或设置对象中的参与过渡的属性
<' transition-duration '>： 检索或设置对象过渡的持续时间
<' transition-timing-function '>： 检索或设置对象中过渡的动画类型
<' transition-delay '>： 检索或设置对象延迟过渡的时间
*/
img
{
position:fixed;
bottom:20px;
left:-100px;
transition: all 1s ease 0.1s;
}
img:hover
{
left:0px;
background-color: red;
}
</style>
</head>
<body>
<img src="images/xiao.jpg"/>
<div class="c1">我没动</div>
<p>1111222333444</p>
</body>
</html>
3. float浮动
3.1 display转换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display 转换元素</title>
<style>
div
/* display:inline; 转换成行内元素 */
{display:inline;border:solid 1px red;width:1000px;height:20px;}
span
/* display:block; 转换成块状元素 */
{display:block;width:100px;height:50px;border:solid 1px red;}
a
/* display:inline-block; 转换成行内块状元素 */
{display:inline-block;width:500px;height:30px;border:solid 1px red;}
p
/* display:none 隐藏元素 */
{display:none;}
</style>
</head>
<body>
<!-- 元素的分类:
块状元素 : block
行内元素 : inline
行内块状元素 : inline-block
-->
<div>第一个div</div>
<div>第二个div</div>
<span>我是span1</span>
<span>我是span2</span>
<a href="#">我是链接1</a>
<a href="#">我是链接2</a>
<p>12345</p>
</body>
</html>
3.2 float浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮动</title>
<style>
.content
{width:700px;clear:both;}
.content .c1
{background: red;width:100px;height:100px;float:left;}
.content .c2
{background: tan;width:100px;height:100px;float:left;}
.content .c3
{background:blue;width:100px;height:100px;float:left;}
.content .c4
{background:green;width:100px;height:100px;float:left;}
.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}
#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
</style>
</head>
<body>
<!--
# ###块状元素浮动:
float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐;
float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐;
目的: 让块状元素在一排显示
clear:both; 清除两边的浮动
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行内元素浮动:
如果对行内元素进行浮动:
默认会把行内元素升级成行内块状元素,可以设置宽和高
消除浮动产生的影响:clear:both;
-->
<div class="content2">
<a href="#" id="a1">点击我跳转1</a>
<a href="#" id="a2">点击我跳转2</a>
</div>
</body>
</html>
4. html里面的bug
4.1 float内容塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 浮动</title>
<style>
.content
{width:700px;clear:both;}
.content .c1
{background: red;width:100px;height:100px;float:left;}
.content .c2
{background: tan;width:100px;height:100px;float:left;}
.content .c3
{background:blue;width:100px;height:100px;float:left;}
.content .c4
{background:green;width:100px;height:100px;float:left;}
.content2
{width:700px;height:500px;border:solid 1px red;clear:both;}
#a1
{float:left;width:100px;height:100px;border:solid 1px red;}
#a2
{display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both;}
</style>
</head>
<body>
<!--
# ###块状元素浮动:
float:left 向左浮动 ,元素脱离原始文档流,后面的内容自动补齐;
float:right 向右浮动 ,元素脱离原始文档流,后面的内容自动补齐;
目的: 让块状元素在一排显示
clear:both; 清除两边的浮动
-->
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<!--
# ###行内元素浮动:
如果对行内元素进行浮动:
默认会把行内元素升级成行内块状元素,可以设置宽和高
消除浮动产生的影响:clear:both;
-->
<div class="content2">
<a href="#" id="a1">点击我跳转1</a>
<a href="#" id="a2">点击我跳转2</a>
</div>
</body>
</html>
4.2 margin-top失效问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin-top失效问题</title>
<style>
*
{margin:0px;padding:0px;}
.box1
{width:100px;height:100px;margin-top:10px;border:solid 1px red;}
.father
{width:300px;height:300px;background: yellow;overflow: hidden;}
.son
{width:150px;height:150px;margin-top:50px;}
</style>
</head>
<body>
<!-- overflow: hidden; overflow auto 如果内容超出边框，会以下拉框的形式显示，不会溢出 -->
<div class="box1">
sdfsf
</div>
<div class="father">
<div class="son">12</div>
</div>
</body>
</html>
4.3 overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test {
overflow: hidden;
width: 200px;
height: 100px;
background: #eee;
}
</style>
</head>
<body>
<!-- overflow:hidden 对超出部分内容进行隐藏 -->
<div class="test">
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
<p>苏打速度</p>
</div>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
Python全栈之线程详解
目录 1. 线程的概念 1.1 Manager_进程通信 1.2 线程的概念 2. 线程的基本使用 3. 自定义线程_守护线程 3.1 自定义线程 3.2 守护线程 4. 线程安全问题 4.1 线程安全问题 4.2 Semaphore_信号量 5. 死锁_互斥锁_递归锁 6. 线程事件 总结 1. 线程的概念 1.1 Manager_进程通信 # ### Manager ( list 列表 , dict 字典 ) 进程之间共享数据 from multiprocessing import Proc
-
Python全栈之学习JS(1)
目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引
-
Python全栈之学习CSS(1)
目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &
-
Python全栈之协程详解
目录 1. 线程队列 2. 进程池_线程池 3. 回调函数 4. 协程 总结: 1. 线程队列 # ### 线程队列 from queue import Queue """ put 存放 超出队列长度阻塞 get 获取 超出队列长度阻塞 put_nowait 存放,超出队列长度报错 get_nowait 获取,超出队列长度报错 """ # (1) Queue """先进先出,后进先出"""
-
Python全栈之队列详解
目录 1. lock互斥锁 2. 事件_红绿灯效果 2.1 信号量_semaphore 2.2 事件_红绿灯效果 3. queue进程队列 4. 生产者消费者模型 5. joinablequeue队列使用 6. 总结 1. lock互斥锁 知识点: lock.acquire()# 上锁 lock.release()# 解锁 #同一时间允许一个进程上一把锁 就是Lock 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行修改,即串行的修改,没错,速度是慢了,但牺牲速度却保证了数据
-
Python全栈之作用域和闭包
目录 1. return返回值 2. 全局变量_局部变量 3. 函数名的使用 4. 函数的嵌套 4.1 函数的嵌套 4.2 nonlocal的使用 5. 闭包函数的定义 6. 闭包的特点_意义 小提示: 7. 小练习 总结 1. return返回值 # ### return 自定义函数的返回值 """ 概念:return 把函数内部的数据返回到函数的外面,返回到函数的调用处 1.return + 六大标准数据类型 , 除此之外还可以返回函数 或者 是类对象 2.return
-
Python全栈之学习CSS(2)
目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h
-
Python全栈之学习HTML
目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.
-
Python全栈之学习JS(3)
目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
-
Python全栈之学习JQuery
目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">
-
Python全栈之学习JS(2)
目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l
-
Python全栈之学习MySQL(3)
目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,
-
Python全栈之学习MySQL(2)
目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &
-
Python全栈之学习MySQL(1)
目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分