Collection
Collection
一、常用选择器的使用
标签选择器
ul{ }
层级选择器
ul li{ }
ID选择器
#idName{ }
类选择器
.className{ }
属性选择器
li[id="xxx"]{ }
群组选择器（逗号分隔）
#idName,.className{}
兄弟选择器（ ~ * ）
#idName ~ * { }
相连选择器（ + * ）
#idName + * { }
伪类：子元素选择器
ul:first-child{ } 第一个子元素
ul:last-child{ } 最后一个子元素
ul:nth-child(6) { } 所有子元素中第6个
ul:nth-last-child(3){ } 所有子元素中倒数第3个
伪类：类型选择器
ul:first-of-type{ }
ul:last-of-type{ }
ul:nth-of-type(3){ }
选中每个div中的第二个子元素
div :nth-child(2) { }
选择只有一个子元素且子元素为p
p:only-of-type{ }
伪类: 表单控件
form :enabled { }
单选按钮中的相邻选择器
form :checked + * { }
控件中输入无效值
form :invalid { }
控件获取到焦点时
form :focus { }
鼠标悬停时
button:hover { }
知识点总结：以上是常用选择器，应该要多加练习，才能灵活设置样式。
二、双飞翼布局
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header{
width: 100%;
background-color: beige;
}
.header .content{
width: 1000px;
height: 60px;
background-color: aquamarine;
margin: 0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
padding: 0 30px;
float: left;
min-width: 80px;
min-height: 60px;
color: blue;
text-decoration: none;
line-height: 60px;
}
.header .content .nav .item a:hover{
background-color:gray;
color: white;
}
/* 中间主体 */
.container{
width: 1000px;
min-height: 600px;
background-color: darkgray;
margin: 10px auto;
}
.wrap{
background-color: lightcoral;
width: inherit;
min-height: inherit;
float: left;
}
.main{
padding: 50px 250px; /* 撑开显示主体内容 */
}
.left{
background-color: lightblue;
width: 200px;
min-height: 600px;
float: left;
margin-left: -100%;
}
.right{
background-color: lightgreen;
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
}
/* 底部 */
.footer{
width: 100%;
background-color: beige;
}
.footer .content{
width: 1000px;
height: 60px;
background-color: steelblue;
margin: 0 auto;
}
.footer .content p{
line-height: 60px;
text-align: center;
}
.footer .content a{
text-decoration: none;
color: #000;
}
.footer .content a:hover{
text-decoration: underline;
color:white;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">公司首页</a></li>
<li class="item"><a href="">公司首页</a></li>
<li class="item"><a href="">公司首页</a></li>
<li class="item"><a href="">公司首页</a></li>
<li class="item"><a href="">公司首页</a></li>
</ul>
</div>
</div>
<!-- 中间部分 -->
<div class="container">
<div class="wrap">
<div class="main">
主体部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容主题部分内容
</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
<a href="">友情链接</a>
</p>
</div>
</div>
</body>
</html>知识点总结：
双飞翼布局对于本人更易理解，css代码相对简洁。
中间主体区块main应该创建在left和right前面，保证优先渲染。
中间主体区块main外面应该用一个wrap区块div包裹。
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
三、绝对定位实现窗口遮罩功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现窗口遮罩功能</title>
<style>
.shade{
background-color: black;
opacity: 0.7;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box1{
background-color: aqua;
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="box1">主体内容</div>
</body>
</html>
知识点总结：
①遮罩层div设置绝对定位position: absolute;
②显示窗口div也设置绝对定位position: absolute;
窗口居中应设置：left: 50%; top: 50%; margin-left: -190px; margin-top: -230px;
四、固定定位制作广告位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位制作广告位</title>
<style>
body{
background-color: bisque;
}
.box1{
background-color:lightpink;
width: 300px;
height: 250px;
position:fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1"><p>广告位内容</p></div>
</body>
</html>
知识点总结：给广告位div设置样式固定定位 position:fixed;
