01探路者页面广告图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.tlz_banner{
width: 100%;
height: 500px;
background: red;
position: relative;
overflow: hidden;
}
/*广告图方法一*/
/* .tlz_banner img{
width: 100%;
height: 500px;
} */
/*广告图方法二*/
.tlz_banner >img{
width: 1920px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -960px;
}
.nav{
width: 1200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -600px;
bottom: 0;
}
.nav img{
float: left;
width:400px;
height: 200px;
}
</style>
</head>
<body>
<div class="tlz_banner">
<img src="img/ht.jpg" alt="">
<div class="nav">
<img src="img/imgs1.jpg" alt="">
<img src="img/imgs2.jpg" alt="">
<img src="img/imgs3.jpg" alt="">
</div>
</div>
</body>
</html>
02百分比单位学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 300px;
height: 200px;
background: red;
margin: 100px auto;
}
.box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--
% 百分比单位 相对单位 会跟随别人的改变而改变
% 是相对父元素的大小的变化而发生变化
-->
<div class="box">
<img src="img/img1.jpg" alt="">
</div>
</body>
</html>
03盒子大小撑满浏览器窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
html,body{
width: 100%;
height: 100%;
}
/* body{
height: 100%;
} */
.box{
width: 100%;
height: 100%;
background: orange;
}
</style>
</head>
<body>
<div class="box">我是盒子</div>
</body>
</html>
04高度自适应的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.boss{
height: auto;
}
.box1{
width: 200px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="boss">
<div class="box1">我是盒子</div>
<div class="box1">我是盒子</div>
<div class="box1">我是盒子</div>
<div class="box1">我是盒子</div>
</div>
</body>
</html>
05高度自适应学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.clear::after{
content:"";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}
.big_div{
width: 100%;
/* height: auto; */
background: red;
}
.content{
width: 1030px;
/* height: 600px; */
background: pink;
margin: 0 auto;
}
.content ul{
/* height: 600px; */
/* overflow: hidden; */
min-height: 500px;
}
.content li{
list-style: none;
width: 250px;
height: 200px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
/*
1行 4个li
2行 8个li
3行 12个li
n行 4n个li
*/
.content li:nth-child(4n){/*每一行的最后一个li*/
margin-right: 0;
}
.content li img{
width: 100%;
height: 100%;
}
.divs{
width: 100%;
height: 800px;
background: yellow;
}
.p1{
clear: both;
}
</style>
</head>
<body>
<!--
高度塌陷:给所有的子元素都添加浮动了,父元素及祖宗都没有设置高度,就会高度为0。
解决方案:
1.给父元素添加height 遇到父元素需要高度自适应就不好用了
2.给父元素添加overflow:hidden/auto/scroll; 遇到定位就不好用了 bfc
3.给浮动元素的下方添加一个空的块元素,且给这个块元素添加clear:both;(清除浮动) 会造成代码的冗余
4.万能清除法 取一个公共类class名 给到浮动元素的父元素添加
.clear::after{
content:"";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}
5.给父元素添加浮动; 会带来新的浮动问题,不推荐使用
6.给父元素添加display:table; 会造成未知bug 不推荐使用
-->
<div class="big_div">
<div class="content">
<!-- ul>li*12>img[src="img/img1.jpg"] -->
<ul class="clear">
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img1.jpg" alt=""></li>
<!-- <p class="p1"></p> -->
</ul>
</div>
</div>
<div class="divs">我是下方我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子我是下方的盒子的盒子</div>
</body>
</html>
06伪对象选择器学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*伪对象选择器*/
/*在元素后面添加内容*/
.box1::after{
content: "早有蜻蜓立上头。";
color: red;
}
/*在元素前面添加内容*/
.box2::before{
content: url(img/small1_24.jpg);
margin-right: 10px;
}
.box3::first-letter{
color: green;
font-size: 20px;
}
.box4::first-line{
color: red;
}
/* .box5::selection{
color: red;
background: green;
} */
/*给整个页面添加*/
::selection{
color: yellow;
background: green;
}
</style>
</head>
<body>
<div class="box1">小荷才露尖尖角,</div>
<div class="box2">我是文本内容,请给前面添加图片</div>
<div class="box3">我是文本内容,请给前面添加图片</div>
<div class="box4">我是文本内容,请给前面添加图片我是文本内容,请给前面添加图片我是文本内容,请给前面添加图片我是文本内容,请给前面添加图片</div>
<div class="box5">双抗精华的开始打瞌睡的</div>
</body>
</html>
07visibility属性学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: green;
visibility: hidden;/*占位隐藏*/
}
</style>
</head>
<body>
<div class="box">我是盒子</div>
</body>
</html>
08最小高和最大高学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
最小高 min-height 一般来说是自己加的,一般根据设计图来加
最大高 max-height 一般是js动态加的,然后给分页效果
-->
</body>
</html>
09min-height的兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 200px;
background: orange !important;
min-height: 200px;
/* _height:200px; */
/*!important 关键字过滤器,是高版本浏览器使用的*/
height: auto !important;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box" style="background: green;">,我容,内容,</div>
</body>
</html>
10三级导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.big_nav{
width: 100%;
height: 50px;
background: red;
}
.nav{
width: 1000px;
height: 50px;
background: pink;
margin: 0 auto;
}
.nav ul{
width: 1000px;
height: 50px;
}
.nav li{
width: 200px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
font-size: 18px;
position: relative;
}
.nav li a{
color: #fff;
display: block;
width: 200px;
height: 50px;
}
.nav li >a:hover{
background: green;
}
.nav2{
width: 200px;
height: 200px;
background: deepskyblue;
position: absolute;
left: 0;
top: 50px;
z-index: 1000;
display: none;
}
.nav2 a:hover{
background: deeppink;
}
.nav li:hover .nav2{
display: block;
}
.nav2 > div{
position: relative;
}
.nav3{
width: 200px;
height: 200px;
background: yellowgreen;
position: absolute;
left: 200px;
top: 0;
display: none;
}
.nav2 > div:hover .nav3{
display: block;
}
.content{
width: 100%;
height: 1500px;
background: orange;
}
</style>
</head>
<body>
<div class="big_nav">
<div class="nav">
<ul>
<li>
<a href="#">所有商品分类</a>
<!--二级导航-->
<div class="nav2">
<div>
<a href="#">拖鞋</a>
<div class="nav3">我是三级导航</div>
</div>
<div>
<a href="#">凉鞋</a>
</div>
<div>
<a href="#">布鞋</a>
</div>
<div>
<a href="#">豆豆鞋</a>
</div>
</div>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">男子专区</a>
</li>
<li>
<a href="#">女子专区</a>
</li>
<li>
<a href="#">儿童专区</a>
</li>
</ul>
</div>
</div>
<div class="content">我是下方的我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容我是下方的啊内容啊内容</div>
</body>
</html>