收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/* 标签选择器 */
ul {
border: 1px solid red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
}
/* 层级选择器 */
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background-color: wheat;
float: left;
border-radius: 50%;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 1px #888;
margin-left: 10px;
}
/* id选择器 */
#bg-blue {
background-color: lightblue;
}
/* class选择器 */
.bg-green {
background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
border: 2px solid red;
}
/* 群组选择器 */
#bg-blue,.bg-green{
border:2px solid blue;
}
/* 相邻选择器 */
#bg-blue + *{
background-color: yellow;
}
/* 兄弟选择器 */
/* #bg-blue ~ * {
background-color: yellow;
} */
/* 伪类：子元素选择器 */
ul :first-child {
background-color: coral;
}
ul :last-child {
background-color: coral;
}
ul :nth-child(6) {
background-color: coral;
}
ul :nth-last-child(3) {
background-color: coral;
}
ul li:last-of-type {
background-color: darkorchid;
}
ul li:first-of-type{
background-color: darkorchid;
}
/* 选中每个div中的第二个子元素 */
div :nth-child(2){
/* background-color: lightgreen; */
}
/* 如果只想选中西门大官人 */
div:first-of-type :nth-child(3){
/* background-color: lightgreen; */
}
p:nth-of-type(2){
background-color: yellow;
}
form :enabled{
background-color:wheat;
}
/* 讲单选按钮中的文本前景色设置为红色，使用了伪类和相邻选择器 */
form :checked + * {
color: red;
}
form :focus{
background-color: lightgreen;
}
button:hover{
background-color: lightgreen;
height: 28px;
width: 56px;
background-color: black;
color: white;
}
form :invalid{
background-color: red;
}
</style>
<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>
<div>
<p>猪哥</p>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p>灭绝师太</p>
<li>韦小宝</li>
</div>
<!-- 演示表单选择器 -->
<form action="">
<label for="emali">邮箱：</label>
<input type="email">
<label for="password">密码：</label>
<input type="password">
<br>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
<button>登陆</button>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
常用的基本选择器：
<form action=""> <label for="emali">邮箱：</label> <input type="email"> <label for="password">密码：</label> <input type="password"> <br> <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label> <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label> <button>登陆</button> </form>
表单选择器：
<form> 元素：每个表单都对应一个<form></form>标签 表单内所有元素都写在 <form></form>里面；
属性：
action属性 规定了 提交的地址 action=“网址”
Method属性 规定了两种 提交方式 ：
method=“get” 传值有长度限制 能看到传值内容
method=“post” 没有长度限制 不能看到传值内容
<input> 元素：是最重要的表单元素；
属性：
text属性定义文本输入。
radio属性定义安萱按钮输入。
submit属性定义按钮（提交表单）。
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
/* 标签选择器 */
ul {
border: 1px solid red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
}标签选择器：使用标签名称作为选择器选中标签设置样式
/* 层级选择器 */
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background-color: wheat;
float: left;
border-radius: 50%;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 1px #888;
margin-left: 10px;
}层级选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。
/* id选择器 */
#bg-blue {
background-color: lightblue;
}id选择器：标签中利用ID属性进行设置，在样式表中， #ID{设置样式}
特点：一个标签有且只有一个ID，且不能重名
/* class选择器 */
.bg-green {
background-color: lightgreen;
}类选择器：在标签中利用class属性设置在样式表中 .类型名{设置样式}
特点：相当于给标签起了一个别名可以重名。也可以有多个名称
/* 属性选择器 */
li[id="bg-blue"] {
border: 2px solid red;
}属性选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性
/* 群组选择器 */
#bg-blue,.bg-green{
border:2px solid blue;
}群组选择器：同时对几个选择器进行相同的操作
/* 相邻选择器 */
#bg-blue + *{
background-color: yellow;
}相邻选择器
/* 兄弟选择器 */
/* #bg-blue ~ * {
background-color: yellow;
} */兄弟选择器
相邻兄弟选择器： li【1】 + li【2】, 选中的仅是一个元素。同级并且li的后面。（很少用）
/* 伪类：子元素选择器 */
ul :first-child {
background-color: coral;
}伪类选择器：
兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
-：获取当前元素的满足条件的兄弟元素
1-a:hover/a:link/a:active/a:visited
2-以某元素对于其父元素或兄弟元素的位置来获取元素的结构伪类
1.1- a:first-child:查找某元素的父元素第一个子元素E
1.2- a:lastchild：最后一个子元素
1.3- a：nth-child（n）：第n个子元素，计算方法是a元素的全部兄弟元素
1.4- a：nth-last-child（n）：第n个子元素，倒着计算
1.5- a:nth-child（even）：所有偶数
1.6- a：nth-child（odd）：所有奇数
注意：图片没有上传上去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/css/style02.css">
<style>
body{
height: 2000px;
}
.box{
/* 宽度300px */
width: 300px;
/* 高度300px */
height: 300px;
/* 内边距10px */
padding: 10px;
/* 边框 */
border: 5px dashed black;
/* 背景颜色 */
background-color: cyan;
/* 图片链接 */
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-position: 10% 20%;
background-attachment: fixed;
background: yellow url(../images/bg.jpg) no-repeat left bottom;
background-image:none;
background-image:url(../images/bg.jpg),url(../images/bg1.jpg);
background-position: left bottom,right top;
background-image: none;
background-image: url(../images/bg.jpg);
background-size: 120px 80px;
background-size: contain;
background-size: cover;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
背景：
1.基本设置
（1）.background-color：背景色
（2）.backgorund-image：背景图片
（3）.background-repeat：重复方向
（4）.background-position：背景定位
（5）.background-attachment：滚动方式
简写顺序：背景色 背景图片 重复方向 背景定位 滚动方式
2.css3背景新特征
（1）.background-img：多背景设置
（2）.background-size：背景图片尺寸
（3）.background-clip：背景绘制区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.TP{
height: 165px;
width: 140px;
background-color: red;
text-align: center;
line-height: 140px;
}
.box1{
width: 300px;
height: 300px;
background-color: lightgreen;
padding: 50px;
}
/* 解决方案1.只需要将盒子的大小，根据padding进行调整 */
/* 现在宽/高=原宽/高-padding*2 */
.box1{
width: 200px;
height: 200px;
}
/* 解决方案2.改变dom结构，将盒子的宽高与内边距设置分离 */
/* 先将盒子大小复位，内边距清零 */
.box1{
width: 300px;
height: 300px;
padding: 0;
}
/* 宽高分离 */
.box2{
padding: 50px;
}
/* 分析
第一种方案dom结构简单，但是要修改原盒子大小
第二种方案不需要修改原盒子大小，但需要在盒子与内容之间增加一个容器
增加了一个纯属结构性的dom元素
所以，各有利弊，在开发中，根据实际情况斟酌 */
</style>
</head>
<body>
<!-- 将图片在容器中居中显示 -->
<div class="box1">
<div class="box2">
<div class="TP">图片</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
解决方案1：只需要将盒子的大小，根据padding进行调整 ， 现在宽/高=原宽/高-padding*2
.box1{
width: 200px;
height: 200px;
}解决方案2：改变dom结构，将盒子的宽高与内边距设置分离 ， 先将盒子大小复位，内边距清零
.box1{
width: 300px;
height: 300px;
padding: 0;
}
.box2{
padding: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 100px;
height: 100px;
background-color: lightcoral;
margin-top: 30px
}
.box1{
margin-bottom: 50px;
}
.box2{
margin-top: 80px;
}
.box3{
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4{
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box3{
padding-top: 50px;
height: 150px;
}
/* 自动挤压 */
.box5{
width: 100px;
height: 100px;
background: lightcoral;
}
.box5{
margin-left: 100px;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 1.同级塌陷
2.嵌套传递
3.自动挤压 -->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<div class="box5"></div>
</body>
</body4
</html>点击 "运行实例" 按钮查看在线实例
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 100px;
height: 100px;
background-color: lightcoral;
margin-top: 30px
}.box3{
width: 200px;
height: 200px;
background-color: lightblue;
padding-top: 50px;
height: 150px;
}
.box4{
width: 100px;
height: 100px;
background-color: lightcoral;
}.box5{
width: 100px;
height: 100px;
background: lightcoral;
}
.box5{
margin-left: 100px;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
/* 左浮动脱离文档流，后面的区块自动前移占据了它的空间 */
float: left;
}
.box2{
width: 180px;
height: 180px;
background-color: lightcoral;
float: left;
/* 第二个珊瑚色区块浮动后,相当于浮动元素组成的文档流中
所以,它碰到前一个浮动元素后就停止了向左浮动,排到了前一个浮动元素的右边 */
}
.box3{
width: 200px;
height: 200px;
background-color: lightgreen;
/* 向右浮动,直到碰到浏览器窗口右边框为止,当窗口宽度缩小到不能容纳它时自动掉到第二排 */
float: right;
}
.box4{
height: 100px;
background-color: lightgray;
clear: both;
}
</style>
</head>
<body>
<!-- 1.文档流：html元素默认按照书写的顺序在浏览器中，遵循从左到右，从上到下排列
2.布局前提：通过先将元素从文档流中脱离，这样才能随心所欲的操作
3.元素脱离文档流的手段：浮动和绝对定位 -->
<!-- 浮动地基本原理 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
左浮动
float：left；
右浮动
float：right；
清除浮动
float：clear；
-----------------------------------------------------------------------------------------------------
定位:将元素在页面中重新排列,分为四类
1.静态定位:浏览器默认方式(文档流)
2.相对定位:元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位:元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位:始终相对于浏览器的窗口做定位父级,进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
position: relative;
margin-left: 150px;
/* 第一个区块向右移动150px */
}
.box2{
width: 150px;
height: 150px;
background-color: lightgray;
/* 第二个区块不需要移动 */
}
.box3{
width: 150px;
height: 150px;
background-color: lightgreen;
position: relative;
left: 300px;
top: -150px
/* 第三个区块向右移动300px,向上移动150px */
}
.box4{
width: 150px;
height: 150px;
background-color: lightcoral;
position: relative;
left: 150px;
top: -300px;
/* 第四个区块向右移动150px,向上移动300px */
}
.box5{
width: 150px;
height: 150px;
background-color: lightseagreen;
position: relative;
left: 150px;
top: -300px
/* 第四个区块向右移动150px,向上移动300px */
}
</style>
</head>
<body>
<!-- 相对定位小案例:在页面中创建一个彩色的十字架 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
/* 定位父级一定要有定位属性 */
position: relative;
border: 1px solid gray;
width: 450px;
height: 450px;
}
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
position: absolute;
left: 150px;
}
.box2{
width: 150px;
height: 150px;
background-color: lightgray;
position: absolute;
top: 150px;
}
.box3{
width: 150px;
height: 150px;
background-color: lightgreen;
position: absolute;
left: 300px;
top: 150px;
}
.box4{
width: 150px;
height: 150px;
background-color: lightcoral;
position: absolute;
left: 150px;
top: 150px;
}
.box5{
width: 150px;
height: 150px;
background-color: lightseagreen;
position: absolute;
left: 150px;
top: 300px;
}
</style>
</head>
<body>
<!-- 绝对定位小案例:在页面中创建一个彩色的十字架 -->
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
background-image: url(../images/php.jpg);
background-repeat: no-repeat;
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;
}
</style>
</head>
<body>
<!-- 模拟php中文网的登陆页面 -->
<div class="shade"></div>
<div class="login"><img src="static/images/login.jpg" alt=""></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: lightgrey;
height: 2000px;
}
.ads{
width: 350px;
height: 250px;
background-color: lightblue;
position: fixed;
right: 0;
bottom: 0;
}
.ads button{
float: right;
margin-right:20px;
}
</style>
</head>
<body>
<h1>实现广告位</h1>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<h2>php中文网第四期线上班</h2>
<h1>招生进行中</h1>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/css/style10.css">
<style>
.header{
width: 100%;
/* 参考色块,上线时应该删除或替换 */
background-color: lightgray;
}
.header .content{
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
background-color: lightgreen;
margin:0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
/* 一定要将浮动设置到链接标签a上面,否则无法实现导航区的点击与高亮 */
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: #444;
font-size: 1.2em;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover{
/* 当鼠标移入到导航链接上时改变背景与文本前景色,实现当前导航高亮功能; */
background-color: #444;
color: white;
}
.container{
width: 1000px;
height: 600px;
background-color: lightgrey;
margin: 5 auto;
}
.footer{
width: 100%;
background-color: lightgrey;
}
.footer .content{
width: 1000px;
height: 60px;
background-color: lightgreen;
margin:0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content a{
text-decoration: none;
color: #777;
}
.footer .content a:hover{
color: #444;
}
</style>
</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>
</ul>
</div>
</div>
<!-- 中间主题用一个区块模拟替代 -->
<div class="container"></div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">©php中文网版权所有</a>
<a href="">0551-88888888999999</a>
<a href="">皖icp4545435453-1</a>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/css/style11.css">
<style>
.header{
width: 100%;
/* 参考色块,上线时应该删除或替换 */
background-color: lightgray;
}
.header .content{
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
background-color: lightgreen;
margin:0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
/* 一定要将浮动设置到链接标签a上面,否则无法实现导航区的点击与高亮 */
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: #444;
font-size: 1.2em;
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;
background-color: lightgrey;
margin: 5px auto;
}
/* 第二部:左,右两侧固定宽度,中间区块自适应 */
/* 中间区块宽度设置在它的容器wrap中 */
.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: lightgreen;
}
/* 第三步:将中间,左,右区块全部左浮动 */
.wrap, .left, .right{
float: left;
}
/* 第四部:将left和right拉回到他们正确的位置上 */
/* 通过设置区块的付外边距的方式,实现向相反方向移动区块 */
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
/* 现在还有最后一个问题,中间内容去块main没有显示 */
/* 第五步:将中间内容区块main显示出来 */
.main{
padding-left: 200px;
padding-right: 200px;
}
</style>
</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>
</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-88888888999999</a>
<a href="">皖icp4545435453-1</a>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼布局能够解决的问题：
1、两边列宽度固定，中间列宽度自适应式布局；
2、中间内容区先被加载。
双飞翼布局的优点：
1、可以实现主要内容区先加载；
2、兼容主流浏览器；
3、布局灵活，改变css即可改变布局方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局案例3: 圣杯布局</title>
<link rel="stylesheet" href="static/css/style12.css">
<style>
.header {
/* 通常宽度默认为100% */
width: 100%;
/* 参考色块,上线时应该删除或替换 */
background-color: lightgray;
}
.header .content {
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
/* 参考色块 */
background-color: lightgreen;
/* 上下外边距为0,左右自动居中 */
margin: 0 auto;
/* margin: 0 auto的等价语句,注意上右下左的顺序 */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/* 因为上下相等,左右也相等,所以可以简写为: margin: 0 auto; */
}
.header .content .nav {
/* 清空导航UL元素的默认样式 */
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
float: left;
/* 设置最小宽度与最小高宽,以适应导航文本的变化 */
min-width: 80px;
min-height: 60px;
/* 设置行高与头部区块等高,使导航文本可以垂直居中显示 */
line-height: 60px;
color: #444;
/* 将导航文本设置为系统根字体大小的1.2倍 */
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: 600px;
min-height: 600px;
margin: 5px auto;
background-color: lightgray; /* 参考色块 */
}
/* 第二步: 左,右二侧固定宽度,中间区块继承父级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: 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;
}
</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">
<!-- 创建双飞翼使用的DOM结构 -->
<!-- 必须先创建中间主体区块,确保它优先被渲染出来 -->
<!-- 与双飞翼相比, DOM结构更简洁, 不需要为main创建父级容器 -->
<!-- 中间内容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>点击 "运行实例" 按钮查看在线实例
圣杯布局的优点：
结构简单，无多余dom层
圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
