作业要求：
1月15日作业
1. 常用选择器的使用
2.双飞翼与圣杯布局任选一个完成
3.绝对定位实现窗口遮罩功能
4.固定定位制作广告位
1. 常用选择器的使用
CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。
html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>0115-job</title> <link rel="stylesheet" href="static/css/job.css"> </head> <body> <ul> <li class="bg-green">1</li> <li id="bg-blue">2</li> <li class="bg-green">3</li> <li class="bg-green">4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <div> <p>猪哥</p> <p>朱老师</p> <p>西门大官人</p> </div> <div> <p>灭绝师太</p> <p>韦小宝</p> </div> <form action=""> <label for="email">邮箱:</label> <input type="email"> <label for="password">密码:</label> <input type="password"> </form> <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label> <input type="radio" id="month" name="save" value="30" checked><label for="month">保存一月</label> <button>登录</button> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
实例
/* 标签选择器 */
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类型的元素 */
}
/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 下面再通过一个案例,就可以看出区别了, html代码在 "demo02.html" 中 */
/* 选中每个div中的第二个子元素 */
div :nth-child(2) {
background-color: lightgreen;
}
/* 如果只想选中"西门大官人",应该如何选择呢? */
/* 分析: "西门大官人"是第一个div中的第三个子元素,常规思维应该是这样获取 */
div:first-of-type :nth-child(3){
background-color: -lightblue;
}
/* 还可以进一步简化(先让前面的选择失效) */
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
background-color: yellow;
}
/* 思考: 为什么第二个div中的p没有选中? 因为当前div 下面只有一个p */
/* 如果我在第二个div中再添加一个:<p>aaaaa</p>,你会发现也会被选中的 */
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */
/* 如果我要选择只有一个子元素且子元素为p,应该如何做? */
p:only-of-type {
background-color: pink;
}
/* 伪类: 表单控件 */
form :enabled {
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + * {
color: red;
}
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.双飞翼与圣杯布局任选一个完成
双飞翼造型
html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼造型</title> <link rel="stylesheet" href="sfy.css"> </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> </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="">© PHP中文网版权所有</a> | <a href="">025-88880000</a> | <a href="">苏ICP2222244444-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
实例
.header {
width: 100%;
background-color: lightgray;
}
.header .content {
width: 1000px;
height: 60px;
background-color: lightgreen;
margin: 0 auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: #444;
font-size: 1.2rem;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
background-color: #444;
color:white;
}
.container {
width: 1000px;
min-height: 600px;
margin: 5px auto;
background-color: lightgray;
}
.wrap {
width: inherit;
min-height: inherit;
background-color: cyan;
}
.left {
width: 200px;
min-height: 600px;
background-color: lightcoral;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightseagreen
}
.wrap, .left, .right {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
.footer {
width: 100%;
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: lightblue;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: #777;
}
/* 鼠标移入时显示下划线并加深字体前景色 */
.footer .content a:hover {
text-decoration: underline;
color: #444;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/* 标签选择器 */
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类型的元素 */
}
/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 下面再通过一个案例,就可以看出区别了, html代码在 "demo02.html" 中 */
/* 选中每个div中的第二个子元素 */
div :nth-child(2) {
background-color: lightgreen;
}
/* 如果只想选中"西门大官人",应该如何选择呢? */
/* 分析: "西门大官人"是第一个div中的第三个子元素,常规思维应该是这样获取 */
div:first-of-type :nth-child(3){
background-color: -lightblue;
}
/* 还可以进一步简化(先让前面的选择失效) */
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
background-color: yellow;
}
/* 思考: 为什么第二个div中的p没有选中? 因为当前div 下面只有一个p */
/* 如果我在第二个div中再添加一个:<p>aaaaa</p>,你会发现也会被选中的 */
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */
/* 如果我要选择只有一个子元素且子元素为p,应该如何做? */
p:only-of-type {
background-color: pink;
}
/* 伪类: 表单控件 */
form :enabled {
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + * {
color: red;
}
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3.绝对定位实现窗口遮罩功能
html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遮罩</title> <link rel="stylesheet" href="zhezhao.css"> </head> <body> <div class="shade"></div> <div class="login"><img src="../static/images/login.jpg" alt=""> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
实例
body {
margin :0;
background-image:url(../static/images/php.jpg);
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: -190px;
margin-top: -230px;
}
.login img {
width: 380px;
height: 460px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
4.固定定位制作广告位
html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>广告位</title> <link rel="stylesheet" href="guanggao.css"> </head> <body> <h1>固定定位小案例：实现广告位</h1> <div class="ads"> <button onclick="this.parentNode.style.display = 'none'">关闭</button> <h2>php中文网第四期线上班</h2> <h1>招生进行中...</h1> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
body {
background-color: lightgray;
height: 2000px;
}
.ads {
width: 350px;
height: 250px;
background-color: lightblue;
position: fixed;
right: 0;
bottom: 0;
}
.ads button {
float: right;
margin-right: 20px;
}