综合案例
<style>
/* 1、找到第一个子元素,并且为li标签 */
li:first-child {
/* background-color: blue; */
}
/* 2、找到最后一个子元素,并且为li标签 */
li:last-child {
/* background-color: orange; */
}
/* 3、找到第3个子元素,并且为li标签 */
li:nth-child(3) {
/* background-color: pink; */
}
/* 4、找到倒数第3个子元素,并且为li标签 */
li:nth-child(8) {
/* background-color: green; */
}
li:nth-last-child(3) {
background-color: red;
}
</style>
<style>
/* 1、找到偶数个li------------------------ */
li:nth-child(2n) {
/* background-color: orange; */
}
li:nth-child(even) {
/* background-color: blue; */
}
/* 2、找到奇数个li------------------------ */
li:nth-child(2n+1) {
/* background-color: orange; */
}
li:nth-child(2n-1) {
/* background-color: blue; */
}
li:nth-child(odd) {
/* background-color: pink; */
}
/* 3、找到前5个------------------------ */
li:nth-child(-n+6) {
/* background-color: orange; */
}
/* 4、找到从第5个往后------------------------ */
li:nth-child(n+5) {
background-color: red;
}
</style>`
<style>
/* 错误的写法 */
li a:first-child {
/* color: red; */
}
/* 正确的写法 */
li:first-child a {
color: red;
}
</style>
<style>
/* 需求:需要找到第3个li标签 */
/* 1、使用 :nth-child */
li:nth-child(7) {
/* background-color: red; */
}
/* 2、使用 :nth-of-type */
li:nth-of-type(3) {
background-color: orange;
}
</style>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<div>狸猫</div>
<div>狸猫</div>
<div>狸猫</div>
<div>狸猫</div>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
二、伪元素
<style>
.father {
width: 300px;
height: 300px;
background-color: skyblue;
}
.father::before {
/* 必加的属性 */
content: '我是一个伪元素';
/* 转换显示方式 */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
我是father内部的内容
</div>
</body>
效果图
三、标准流
四、浮动
.left {
/* 左浮动 */
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.right {
/* 右浮动 */
float: right;
width: 300px;
height: 300px;
background-color: skyblue;
}
=================
<div class="left">左护法</div>
<div class="right">右护法</div>
视频:166 需复习
<style>
/* 去除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.header {
height: 40px;
background-color: #333;
}
.nav {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.banner {
width: 1226px;
height: 460px;
background-color: yellow;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: right;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
</style>
</head>
<body>
<!-- 布局流程:从上往下,从外往内 -->
<!-- 网页的头部 -->
<div class="header"></div>
<!-- 网页的导航 -->
<div class="nav"></div>
<!-- 网页的轮播图 -->
<div class="banner">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
/* 去除掉标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: yellow; */
}
.item {
float: left;
width: 234px;
height: 300px;
background-color: #87ceeb;
margin-right: 14px;
margin-bottom: 14px;
}
/* 找到的是 第 4 和第 8个 4倍数 4n */
.item:nth-child(4n) {
/* background-color: red; */
margin-right: 0;
}
/* 找到从第5个开始往后的所有个子元素 */
.item:nth-child(n+5) {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- 布局流程:从上往下,从外往内 -->
<div class="box">
<div class="left"></div>
<div class="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
<style>
/* 1、去除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
/* 2、找到ul,去除小圆点 */
ul{
list-style: none;
}
/* 3、找到li标签,设置浮动 */
ul li {
float: left;
}
/* 4、找到a标签,设置宽高 */
ul li a {
/* a标签默认是行内元素,不能直接设置宽高 */
/* 1、转换成行内块元素 */
/* display: inline-block; */
/* 2、转换成块级元素 */
/* display: block; */
/* 3、设置浮动 */
float: left;
width: 80px;
height: 50px;
background-color: #ffc0cb;
text-decoration: none;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 16px;
}
ul li a:hover {
background-color: #008000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</body>
五、清除浮动
<style>
.father {
/* 1、把father盒子转换成BFC盒子,解决:清除浮动 */
/* float: left; */
/* display: inline-block; */
overflow: hidden;
width: 400px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<style>
.father {
/* 2、将father转换成BFC盒子,解决:margin的塌陷现象 */
/* float: left; */
/* display: inline-block; */
overflow: hidden;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>