1、常用选择器的使用
常用选择器包括有标签选择器、层级选择器、id选择器、类选择器、属性选择器、群组选择器、相邻选择器、兄弟选择器、伪类选择器。伪类选择器又分子元素选择器和类型选择器。
下面逐一演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/* 标签选择器 */
ul {
border: 1px dashed red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
padding: 10px;
}
/* 层级选择器 */
ul li {
list-style-type:none;
width: 40px;
height: 40px;
background-color:wheat;
border-radius: 50%;
text-align: center;
line-height: 40px;
float:left;
margin-left: 10px;
box-shadow: 2px 2px 1px #888;
}
/* id选择器 */
#bg-blue {
/* 注意: id也可以给多个元素添加样式,但不要这样做 */
background-color: lightblue;
}
/* 类选择器 */
.bg-green {
background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
border: 2px solid red;
}
/* 群组选择器 */
#bg-blue, .bg-green {
border: 2px solid blue;
}
/* 相邻选择器 */
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#bg-blue + * {
background-color: yellow;
}
/* 兄弟选择器 */
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
background-color: -yellow; /* 值前加-,令其失效 */
}
/* 伪类: 子元素选择器 */
ul :first-child {
background-color: coral; /* 第一个子元素 */
}
ul :last-child {
/* 因优先级问题,需要把前面的兄弟选择器注释掉 */
background-color: coral; /* 最后一个子元素 */
}
ul :nth-child(6) {
background-color: coral; /* 第6个子元素 */
}
ul :nth-last-child(3) {
background-color: coral; /* 倒数第3个子元素 */
}
/* 伪类: 类型选择器 */
ul li:first-of-type {
background-color: darkorchid; /* 第一个li类型的元素 */
}
ul li:last-of-type {
background-color: darkorchid; /* 最后一个li类型的元素 */
}
ul li:nth-of-type(6) {
background-color: darkorchid; /* 选择第6个li类型的元素 */
}
</style>
</head>
<body>
<!-- 基础选择器 -->
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、双飞翼布局
实例
<head>
<meta charset="UTF-8">
<style>
/* 头部布局 */
.header {
width: 100%;
/* 参考色块 */
background-color: gray;
}
.header .content {
width: 2000px;
height: 100px;
/* 参考色块 */
background-color: aquamarine;
/* 居中 */
margin: 0 auto;
}
.header .content .nav {
/* 清空导航UL元素的默认样式 */
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
/* 设置最小宽度与最小高宽,以适应导航文本的变化 */
min-width: 180px;
min-height: 60px;
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
float: left;
/* 设置行高与头部区块等高,使导航文本可以垂直居中显示 */
line-height: 100px;
color: deeppink;
font-size: 1.5rem;
padding: 0 15px;
/* 去除链接标签默认下划线 */
text-decoration: none;
/* 让导航文本在每一个小区块中居中显示 */
text-align: center;
}
.header .content .nav .item a:hover {
text-decoration: underline;
background-color: blue;
color: antiquewhite;
}
/* 尾部布局 */
.footer {
width: 100%;
background-color: gray;
}
.footer .content {
width: 2000px;
height: 100px;
/* 参考色块 */
background-color: aquamarine;
/* 居中 */
margin: 0 auto;
}
.footer .content p {
line-height: 100px;
text-align: center;
}
.footer .content p a {
color: crimson;
font-size: 1.2rem;
text-decoration: none;
}
.footer .content p a:hover {
text-decoration: underline;
color: red;
}
/* 中间布局 */
.container {
width: 2000px;
background-color: coral;
margin: 10px auto;
min-height: 600px;
}
.wrap {
width: inherit;
min-height: inherit;
background-color: darkcyan;
}
.left {
width: 300px;
min-height: 600px;
background-color: wheat;
}
.right {
width: 300px;
min-height: 600px;
background-color: springgreen;
}
.wrap,
.left,
.right {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -300px;
}
.main {
padding: 0 300px;
}
</style>
<title>双飞翼布局</title>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="http://">首页</a></li>
<li class="item"><a href="http://">视频教程</a></li>
<li class="item"><a href="http://">社区问答</a></li>
<li class="item"><a href="http://">编程词典</a></li>
<li class="item"><a href="http://">手册下载</a></li>
<li class="item"><a href="http://">工具下载</a></li>
<li class="item"><a href="http://">类库下载</a></li>
<li class="item"><a href="http://">特色课程</a></li>
<li class="item"><a href="http://">菜鸟学堂</a></li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="container">
<!-- 创建双飞翼使用的DOM结构 -->
<!-- 必须先创建中间主体区块,确保它优先被渲染出来 -->
<!-- 中间内容区需要创建一个父级容器进行包裹 -->
<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="">©PHP中文网版权所有</a>
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、绝对定位实现窗口遮罩功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
margin: 0;
background-color: red;
/* 拉伸背景 */
background-size: cover;
}
.shade{
/* 设置遮罩 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login{
background-color: white;
position:absolute;
left: 50%;
top: 50%;
margin-left: -140px;
margin-top: -180px;
}
.login .box1{
width: 280px;
height: 360px;
background-color: cadetblue;
}
</style>
<title>绝对定位之遮罩</title>
</head>
<body>
<div class="shade"></div>
<div class="login">
<div class="box1">广告位</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、固定定位制作广告位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
height: 3000px;
background-color: bisque;
}
.ads{
width: 250px;
height: 300px;
background-color: aqua;
position:fixed;
right: 0;
bottom: 0;
}
.ads button{
float:right;
margin-right: 20px;
}
</style>
<title>固定定位实现广告位</title>
</head>
<body>
<h1>实现广告位</h1>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<h2>广告</h2>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
今天主要学习了选择器的使用以及网站的相关布局