收藏
批改状态：未批改
老师批语：
css是在html搭建起结构后进行装饰的，css选择器就时要更准确和省力的找到我们需要改变样式的标签，css选择器需要灵活方便准确。背景css可以给出背景相应的样式，尤其在css3加入的background-size可以更加多变的改变背景。页面布局需要通过内外边距、浮动、定位作为基础来进行，通过圣杯布局 双飞翼布局进一步的加深印象，从而熟练页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器</title>
<link rel="stylesheet" href="static/css/style01.css">
</head>
<body>
<ul>
<li id="bg-red">1</li>
<li class="bg-green">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>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p>灭绝师太</p>
<li>韦小宝</li>
</div>
<!-- 演示表单选择器 -->
<form action="">
<label for="email">邮箱:</label>
<input type="email">
<br>
<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>
<br>
<button>登录</button>
</form>
</body>
</html>
/* 标签选择器 */
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
border: 1px solid firebrick;
padding: 20px;
overflow: hidden;
}
/* 层级选择器 */
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background-color: slategray;
float: left;
margin-left: 10px;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 1px darkblue;
}
/* id选择器 */
#bg-red{
background-color: red;
}
/* class选择器 */
.bg-green{
background-color: green;
}
/* 属性选择器 */
li[id="bg-red"]{
width: 100px;
height: 100px;
}
/* 群组选择器 */
#bg-red, .bg-green {
font-size: 28px;
}
/* 相邻选择器 */
#bg-red + * {
width: 100px;
}
/* 兄弟选择器 */
#bg-red ~ * {
height: 100px;;
}
/* 伪类选择器 */
ul :first-child {
border: 10px solid khaki;
}
ul :last-child {
width: 100px;
}
ul :nth-child(5) {
width: 80px;
}
ul :nth-last-child(2) {
background-color: blueviolet;
}
/* 类型选择器 */
ul li:last-of-type {
background-color: chartreuse;
}
ul li:first-of-type {
color: darkturquoise;
}
ul li:nth-of-type(3) {
color: aqua;
}
ul li:nth-last-of-type(4) {
background-color: darkolivegreen;
}
/* 选中每个div下面的第二元素 */
div :nth-child(2) {
background-color: gold;
}
/* 如果只想选择西门大官人 */
/* 类型选择器第二个div 下面的第三个元素 */
div:first-of-type :nth-child(3) {
background-color: red;
}
/* 如果只想选择西门大官人 另一种思路 */
div p:nth-of-type(2) {
background-color: blue;
}
/* 表单选择器 */
/* 表单下的控件选择可用状态 */
form :enabled {
background-color: blueviolet;
}
/* 表单下的控件选中状态 */
form :checked {
width: 100px;
}
/* 表单下的控件获取焦点状态 */
form :focus {
background-color: cornflowerblue;
}
/* 鼠标悬停状态 */
button:hover {
background-color: bisque;
}
/* 控件下输入无效控件时 */
form :invalid {
color: orange;
}点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩登录框</title>
<link rel="stylesheet" href="static/css/style02.css">
</head>
<body>
<div class="box">
</div>
<img src="static/images/login.jpg" alt="login" class="login">
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-image: url('../images/php.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.box {
width: 100%;
height: 100%;
background-color: black;
/* 设置为绝对定位脱离文档流 就可以让他撑满整个屏幕 */
position: absolute;
top: 0;
left: 0;
opacity: .7;
}
.login {
width: 380px;
height: 460px;
/* 设置绝对定位 让他在最中间 绝对定位后img成为块元素*/
position: absolute;
top: 50%;
left: 50%;
/* 在进行偏移 让他的中心在页面的中心 偏移这张图片宽高的一半 */
margin-left: -190px;
margin-top: -230px;
}点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>固定广告位</title>
<link rel="stylesheet" href="static/css/style03.css">
</head>
<body>
<div class="adv">
<h3>固定广告位</h3>
<h2>电话：11111111</h2>
<span onclick="this.parentNode.style.display = 'none'">关闭</span>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
width: 100%;
height: 4000px;
background-color: lightslategray;
}
.adv {
width: 300px;
height: 250px;
background-color: brown;
position: fixed;
bottom: 5px;
right: 5px;
}
.adv h2, .adv h3 {
margin-top: 0;
padding-top: 30px;
text-align: center;
}
.adv span {
background-color: aliceblue;
position: absolute;
padding: 3px;
top: 0;
right: 0;
}点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style04.css">
<title>双飞翼布局</title>
</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="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>
.header {
/* 通常宽度默认为100% */
width: 100%;
/* 参考色块,上线时应该删除或替换 */
background-color: lightgray;
}
.header .content {
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
/* 上下外边距为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: 1000px;
min-height: 600px;
background-color: lightgoldenrodyellow;
margin: 10px auto;
}
/* main上面的div 用来将main挤在中间 */
.wrap {
/* 宽高继承父级 */
width: inherit;
min-height: inherit;
background-color: aqua;
}
.left {
width: 200px;
height: 600px;
background-color: brown;
/* 负的外边距移动到位置 */
margin-left: -100%;
}
.right {
width: 200px;
height: 600px;
background-color: lawngreen;
margin-left: -200px;
}
.wrap, .left, .right {
float: left;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
/* 底部与头部的基本样式类似 */
.footer {
width: 100%;
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
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;
}点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style05.css">
<title>圣杯布局</title>
</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="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>
.header {
/* 通常宽度默认为100% */
width: 100%;
/* 参考色块,上线时应该删除或替换 */
background-color: lightgray;
}
.header .content {
/* 头部内容区,应该居中显示,所有要有宽度 */
width: 1000px;
height: 60px;
/* 上下外边距为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;
background-color: lightgoldenrodyellow;
margin: 10px auto;
padding-left: 200px;
padding-right: 200px;
}
/* main上面的div 用来将main挤在中间 */
.main {
/* 宽高继承父级 */
width: inherit;
min-height: inherit;
background-color: aqua;
}
.left {
width: 200px;
height: 600px;
background-color: brown;
/* 负的外边距移动到位置 */
margin-left: -100%;
/* 通过绝对定位放到相应的位置 */
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 600px;
background-color: lawngreen;
margin-left: -200px;
position: relative;
left: -200px;
}
.main, .left, .right {
float: left;
}
/* 底部与头部的基本样式类似 */
.footer {
width: 100%;
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
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;
}点击 "运行实例" 按钮查看在线实例
以上内容总结：
1、css选择器基本选择器就可以适应页面需求，但是兄弟选择器 相邻选择器 伪类 类型选择器 还有专门的表单可以更加灵活的找到需要的标签；
2、内边距增加盒子的大小，可以通过改变盒子大小和宽高分离来解决
3、外边距的特点：同级塌陷 嵌套传递 自动挤压
4、浮动 绝对定位脱离文档流，脱离文档流才是布局的前提
5、圣杯布局 双飞翼布局的思路区别就是：双飞翼的main之外还嵌套一层然后浮动后通过负的外边距调整好左右区域的位置，这里需要注意到,main加左右内边距让显示区域呈现的前提就是main上面的那层嵌套div，否则格式会乱；圣杯就是cotaineri就加左右内边距然后改变宽高来达到预期的大小，通过负外边距 相对定位来吧左右调整到位；
6、这俩布局我之前有疑问即使不加嵌套或者不位移也可实现，但是经过思考，老师这样布局可以方便以后调整，可以轻松的改变一行分几栏，实现布局重用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
