一、CSS常用的选择器
实例
<!DOCTYPE html>
<html>
<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>CSS常用的选择器</title>
<style>
ul {
border:1px dashed red;
margin-top:0;
margin-bottom:0;
padding-left:0;
padding:10px;
overflow:hidden;
}
ul li {
float:left;
background-color:lightblue;
width:60px;
height:60px;
list-style-type:none;
line-height:60px;
text-align:center;
margin-left:10px;
border-radius:50%;
box-shadow:4px 4px 6px #888888;
}
/* id选择器 */
#bg-red {
background-color:red;
}
/* 类选择器 */
.bg-yellow {
background-color:yellow;
}
/* 属性选择器 */
li[id="bg-red"] {
border:3px solid green;
}
/* 群组选择器 */
#bg-red,.bg-yellow {
background-color:lightseagreen;
}
/* 相邻选择器 */
#bg-red + * {
background-color:lightpink;
}
/* 兄弟选择器 */
/* #bg-red ~ * {
background-color:lightyellow;
} */
/* 伪类：子元素选择器 */
li:first-child {
background-color:red;
}
/* 优先级问题，需要把兄弟选择器注释 */
ul li:last-child {
background-color:#ccc;
}
ul li:nth-child(8) {
background-color:#000;
color:#fff;
}
ul li:nth-last-child(3) {
background-color:coral;
}
/* 伪类：类型选择器 */
ul li:first-of-type {
background-color:crimson;
}
ul li:last-of-type {
background-color:crimson;
}
ul li:nth-of-type(2) {
background-color:crimson;
}
div :nth-child(2) {
background-color: lightgreen;
}
div:first-of-type :nth-child(3){
background-color: lightblue;
}
p:nth-of-type(2) {
background-color: red;
}
p:only-of-type {
background-color:linen;
}
/* 伪类表单控件 */
form :enabled {
background-color: #000;
color:#fff;
}
/* form input:enabled{
background-color:#ffff00;
} */
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + * {
color:red;
}
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color:white;
}
/* 设置鼠标悬停时的样式 */
button:hover {
background-color:coral;
}
</style>
</head>
<body>
<!-- 演示基本选择器 -->
<ul>
<li class="bg-yellow">1</li>
<li>2</li>
<li id="bg-red">3</li>
<li>4</li>
<li class="bg-yellow">5</li>
<li class="bg-yellow">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
<div>
<p>电脑</p>
<li>手机</li>
<p>电视</p>
</div>
<hr>
<div>
<p>游戏</p>
<li>美国</li>
</div>
<hr>
<!-- 演示表单选择器 -->
<form action="">
<div>
<label for="email">邮箱:</label>
<input type="email" id="email">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password">
</div>
<div>
<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>
</div>
<div>
<button>登录</button>
</div>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、网站布局-双飞翼布局
实例
<!DOCTYPE html>
<html>
<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>
<style>
/* 顶部导航样式 */
.header {
width: 100%;
height: 60px;
background-color: #000;
}
.header .content {
width: 1200px;
height: 60px;
background-color: #000;
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
width: 130px;
height: 54px;
line-height: 60px;
text-decoration: none;
color: #fff;
padding: 0 10px;
font-size: 16px;
text-align: center;
}
.header .content .nav .item a:hover {
color: #fff;
border-bottom: 6px solid lightgreen;
}
/* 中间部分央视 */
.container {
width: 1200px;
min-height: 600px;
margin: 10px auto;
background-color: #ccc;
}
.wrap {
float: left;
width: inherit;
min-height: inherit;
background-color: lightcoral;
}
.left {
float: left;
width: 200px;
min-height: 600px;
background-color: lightblue;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
min-height: 600px;
background-color: lightgreen;
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
/* 底部版权样式 */
.footer {
width: 100%;
height: 100px;
background-color: #000;
}
.footer .content {
width: 1200px;
height: 100px;
margin: 0 auto;
background-color: #000;
line-height: 100px;
}
.footer .content .p1 {
margin: 0;
padding-top: 24px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.footer .content .p2 {
margin: 0;
padding-top: 10px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
</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>
<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 class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 底部版权 -->
<div class="footer">
<div class="content">
<p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、网站布局-圣杯布局
实例
<!DOCTYPE html>
<html>
<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>
<style>
body {
margin: 0;
}
/* 顶部导航样式 */
.header {
width: 100%;
height: 60px;
background-color: #000;
}
.header .content {
width: 1200px;
height: 60px;
background-color: #000;
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
width: 130px;
height: 54px;
line-height: 60px;
text-decoration: none;
color: #fff;
padding: 0 10px;
font-size: 16px;
text-align: center;
}
.header .content .nav .item a:hover {
color: #fff;
border-bottom: 6px solid lightgreen;
}
/* 中间部分央视 */
.container {
width: 600px;
min-height: 600px;
margin: 10px auto;
background-color: #ccc;
}
.main {
float: left;
width: inherit;
min-height: 600px;
background-color: lightcoral;
}
.left {
float: left;
width: 300px;
min-height: 600px;
background-color: lightblue;
margin-left: -100%;
position: relative;
left: -300px;
}
.right {
float: left;
width: 300px;
min-height: 600px;
background-color: lightgreen;
margin-left: -300px;
position: relative;
left: 300px;
}
/* 底部版权样式 */
.footer {
width: 100%;
height: 100px;
background-color: #000;
}
.footer .content {
width: 1200px;
height: 100px;
margin: 0 auto;
background-color: #000;
line-height: 100px;
}
.footer .content .p1 {
margin: 0;
padding-top: 24px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.footer .content .p2 {
margin: 0;
padding-top: 10px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
</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>
<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 class="main">主体内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 底部版权 -->
<div class="footer">
<div class="content">
<p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、圣杯布局基础上做绝对定位--遮罩及滚顶广告
实例
<!DOCTYPE html>
<html>
<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>
<style>
/* 顶部导航样式 */
body {
margin: 0;
}
.header {
width: 100%;
height: 60px;
background-color: #000;
}
.header .content {
width: 1200px;
height: 60px;
background-color: #000;
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
width: 130px;
height: 54px;
line-height: 60px;
text-decoration: none;
color: #fff;
padding: 0 10px;
font-size: 16px;
text-align: center;
}
.header .content .nav .item a:hover {
color: #fff;
border-bottom: 6px solid lightgreen;
}
/* 中间部分央视 */
.container {
width: 600px;
min-height: 600px;
margin: 10px auto;
background-color: #ccc;
}
.main {
float: left;
width: inherit;
min-height: 600px;
background-color: lightcoral;
}
.left {
float: left;
width: 300px;
min-height: 600px;
background-color: lightblue;
margin-left: -100%;
position: relative;
left: -300px;
}
.right {
float: left;
width: 300px;
min-height: 600px;
background-color: lightgreen;
margin-left: -300px;
position: relative;
left: 300px;
}
/* 底部版权样式 */
.footer {
width: 100%;
height: 100px;
background-color: #000;
}
.footer .content {
width: 1200px;
height: 100px;
margin: 0 auto;
background-color: #000;
line-height: 100px;
}
.footer .content .p1 {
margin: 0;
padding-top: 24px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.footer .content .p2 {
margin: 0;
padding-top: 10px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.login-color {
width: 200px;
height: 200px;
background-color: lawngreen;
z-index: 999;
}
.shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
.login {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
text-align: center;
line-height: 200px;
color: #fff;
}
.ads{
width:200px;
height: 150px;
position: fixed;
right: 0px;
bottom: 0;
background-color:red;
}
.ads button {
float: right;
}
</style>
</head>
<body>
<!-- 遮罩 -->
<div class="shade"></div>
<div class="login">
<div class="login-color">登录框</div>
</div>
<!-- 顶部导航 -->
<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>
</ul>
</div>
</div>
<!-- 中间部分 -->
<div class="container">
<div class="main">主体内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<!-- 底部版权 -->
<div class="footer">
<div class="content">
<p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
</div>
</div>
<!-- 固定广告 -->
<div class="ads">
<button onclick="this.parentNode.style.display = 'none'">关闭</button>
<h2>广告标题</h2>
<h1>广告展示中....</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、学习心得
经过学习，对网站布局有了一定的认识。