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、这俩布局我之前有疑问即使不加嵌套或者不位移也可实现,但是经过思考,老师这样布局可以方便以后调整,可以轻松的改变一行分几栏,实现布局重用。