收藏
批改状态：合格
老师批语：完成的很不错 ， 这么快布局都会了啊
CSS基本选择器：
1、标签选择器
ul {border: 1px dashed red;} 选择所有<ul>标签
2、层级选择器
ul li {list-style-type:none;} 选择<ul>下面所有<li>标签
3、id选择器（注意: id也可以给多个元素添加样式,但不要这样做 ）
#bg-blue {background-color: lightblue;} 选择所有id="bg-blue "的元素
4、类选择器
.bg-green {background-color: lightgreen;} 选择所有class="bg-green"的元素
5、属性选择器
li[id="bg-blue"] {border: 2px solid red;} 选择id="bg-blue"的所有<li>标签
6、群组选择器
#bg-blue, .bg-green {border: 2px solid blue;} 选择所有id="bg-blue"和class="bg-green"的元素
7、相邻选择器
#bg-blue + * {background-color: yellow;} 选择id="bg-blue"的下一个同级元素
8、兄弟选择器
#bg-blue ~ * {background-color: yellow; } 选择id="bg-blue"后面的所有同级兄弟元素
9、子元素选择器
ul :first-child {background-color: coral; }指定只有当<ul>元素是其父级的第一个子级的样式。
ul :last-child {background-color: coral; }指定只有当<ul>元素是其父级的最后一个子级的样式。
ul :nth-child(6) {background-color: coral; }指定只有当<ul>元素是其父级的第六个子级的样式。
ul :nth-last-child(3) {background-color: coral; }指定只有当<ul>元素是其父级的倒数第三个子级的样式。
10、类型选择器
ul li:first-of-type {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的第一个<li>元素
ul li:last-of-type {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的最后一个<li>元素
ul li:nth-of-type(6) {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的第六个<li>元素
我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢?
这两类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
而类型选择器关注点在 "type" 关键字上,重点是元素的类型
11、伪类:表单控件
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;}设置鼠标悬停时的样式
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
/* 头部 */
.header{
/* 通常宽度默认为100% */
width: 100%;
background-color: lightgreen;
}
.header .content{
/* 头部内容区,应该居中显示,所有要有宽度 */
height: 60px;
width: 1000px;
background-color: lightcoral;
/* 上下外边距为0,左右自动居中 */
margin: 0 auto;
}
.header .content .nav{
/* 清空导航UL元素的默认样式 */
margin: 0;
padding-left: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
float: left;
/* 设置最小宽度与最小高宽,以适应导航文本的变化 */
min-width: 40px;
min-height: 60px;
/* 设置行高与头部区块等高,使导航文本可以垂直居中显示 */
line-height: 60px;
color: blueviolet;
/* 将导航文本设置为系统根字体大小的1.2倍 */
font-size:1.2rem;
/* 设置民航文本的左右内边距,使导航文本不要挨的太紧 */
padding: 0 40px;
/* 去掉链接标签默认的下划线 */
text-decoration: none;
/* 让导航文本在每一个小区块中居中显示 */
text-align: center;
}
.header .content .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: #444;
color: white;
}
/* 使用圣杯布局实现主体部分 */
/* 第一步: 主体容器设置的宽度与中间区块相同,并水平居中 */
.container {
width: 600px;
min-height: 600px;
margin: 5px auto;
background-color: #ccc;
}
/* 第二步: 左,右二侧固定宽度,中间区块继承父级container宽度*/
.main {
width: inherit;
min-height: 600px;
background-color: lightcyan;
}
/* 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */
.left {
width: 200px;
min-height: 600px;
background-color: lightcoral;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightseagreen
}
/* 第三步:将中间,左,右区块全部左浮动 */
/* 因中间区块宽度100%,所以左右会被挤压到下面 */
.main, .left, .right {
float: left;
}
/* 第四步: 将left和right拉回到中间区块的二边 */
/* 通过设置区块的负外边距的方式,实现向反方向移动区块 */
.left {
margin-left: -100%; /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
}
.right {
margin-left: -200px; /* -200px就正好将右区块上移到中间区块右侧显示 */
}
/* 现在还有最后一个问题,中间内容区块main没有显示出来 */
/* 第五步: 设置容器container内边距给左右区块预留位置 */
.container {
padding-left:200px;
padding-right: 200px;
}
/* 第六步:左右区块使用相对定位,回到正确的位置上 */
.left {
position: relative;
left: -200px;
}
.right {
position: relative;
left: 200px;
}
/* 底部与头部的基本样式类似 */
.footer {
width: 100%;
background-color: lightseagreen;
}
.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: black;
}
/* 鼠标移入时显示下划线并加深字体前景色 */
.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>
</ul>
</div>
</div>
<!-- 中间主体 -->
<div class="container">
<!-- 中间内容main区块中 -->
<div class="main">主体内容区</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>点击 "运行实例" 按钮查看在线实例
绝对定位实现窗口遮罩功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现窗口遮罩</title>
<style>
body {
margin: 0;
background-color: lightgreen;
}
.shade{
/* 遮罩绝对定位,并自动伸展到整个窗口 */
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
/* 将背景设置为纯黑,并通过透明度使背影内容透出来 */
background-color: black;
opacity: 0.7;
}
/* 设置登录窗口 */
.login {
background-color: white;
/* 登录窗口不随窗口大小变化,说明它不是文档流中,是绝对定位 */
position: absolute;
/* 使登录窗中页面的正中间位置开始显示,注意是显示的起点在正中间 */
left: 50%;
top: 50%;
/* 再把每个方向向相反方式拉,设置负外边距就可以 */
/* 注意,margin的负值是登录块的大小的一半 */
margin-left: -190px;
margin-top: -230px;
}
.login{
width: 380px;
height: 460px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
固定定位制作广告位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位小案例(position:fixed)</title>
<style>
body {
background-color: lightyellow;
height: 1000px;
}
.ads {
width: 400px;
height: 400px;
background-color: lightgreen;
position: fixed;
right: 0;
bottom: 0;
}
.ads button {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="ads">
<button onclick="this.parentNode.style.display = 'none'">关闭</button>
<h2>广告</h2>
<h1>广告~广告~</h1>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
