Python全栈之学习CSS(2) 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 背景属性

css 背景属性 - 锐客网.c1{/* 具体写法 */width:600px; height:600px; border:solid 1px red; background-color: yellow; /* 控制背景图 */background-image:url("./images/xiao.jpg"); /* 控制是否平铺 repeat-xrepeat-yno-repeatrepeat(默认)*/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%; }

文章图片

【Python全栈之学习CSS(2)】
1.2 背景图片引入

背景图片的引入 - 锐客网/* 鼠标滑过,点亮图片 */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"); }

文章图片

文章图片

2. 相对_绝对_固定
2.1 相对定位

定位:相对定位 relative - 锐客网.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; }

2.2 绝对定位

定位:绝对定位 absolute - 锐客网.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; }定位:绝对定位 absolute - 锐客网.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; }

2.3 固定定位

定位:固定定位 fixed - 锐客网/* *号代表通配选择符,代表所有标签,默认标签中含有默认的间距,要在一开始的时候全部去掉; */*{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; }
文章图片
我没动1111222333444

3. float浮动
3.1 display转换元素

display 转换元素 - 锐客网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; }第一个div第二个div我是span1我是span2我是链接1我是链接212345

3.2 float浮动

float 浮动 - 锐客网.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; }点击我跳转1点击我跳转2

4. html里面的bug
4.1 float内容塌陷问题

float 浮动 - 锐客网.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; }点击我跳转1点击我跳转2

4.2 margin-top失效问题

margin-top失效问题 - 锐客网*{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; }sdfsf12

4.3 overflow