这次讲的内容不多，但已经把CSS最基本的内容学完了，所以通过这些内容，我们可以制作一个简单的网页，代码会附在文章最后。
一、选择器
1. 后代选择器 作用为使某一祖先元素的所有后代元素拥有某些属性，格式为：祖先元素 后代元素{} 例如：
ul li{ list-style: none; }表示祖先元素ul下的所有li后代元素的列表样式均为none
2. 集合选择器 作用为使某一集合内所有元素拥有某些属性，格式为：元素a，元素b，元素c{} 例如：
#text1,#text2,#text3{ color: blue; }表示将text1，text2，text3的文本颜色设置为蓝色
二、更多属性
1. Clear清除属性 元素浮动之后，周围的元素会重新排列，为了避免这种情况， 可以使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
.clear{ clear: both; }2. overflow属性 CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
p{ width:150px; height:30px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }效果为单行省略
三、简单网页的制作
html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="./css/index.css"/> </head> <body> <div class="fs_center grid_cl"> <div class="fs_top"> <div class="fs_logo"> <a href="#"> <img src="./img/logo.gif" alt=""/> </a> </div> <div class="fs_menu"> <ul class="fs_nav"> <li id="selectRed">首 页</li> <li>集团概况</li> <li>新闻中心</li> <li>产品服务</li> <li>企业文化</li> <li>综合业务</li> <li>品牌建设</li> <li>人力资源</li> <li>国际合作</li> </ul> </div> </div> <div class="fs_banner grid_cl"> <img src="./img/banner.gif" alt=""/> </div> <div class="fs_news grid_cl"> <div class="fs_cl1"> <h4> <span>图片</span>新闻 </h4> <a href="#"> <img src="./img/news.jpg" alt=""/> </a> </div> <div class="fs_cl2 "> <h4 class="fs_bg"> 集团新闻 </h4> <div class="fs_newslist"> <ul> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司保利集团董事视察辽宁公司</span></a></li> <li><a href="#"><span>[2019-6-29]</span><span>保利集团董事视察辽宁公司</span></a></li> </ul> </div> </div> <div class="fs_cl3"> <h4 class="fs_bg"> 公司简介 </h4> <div class="fs_cl3_info"> <p> 保利房地产（集团）股份有限公司是中国保利集团控股的大型国有房地产上市公司，也是中国保利集团房地产业务的主要运作平台，国家一级房地产开发资质企业，国有房地产企业综合实力榜首，并连续五年蝉联央企房地产第一名。</p> <img src="./img/company_02.jpg" alt=""/> </div> </div> </div> <div class="showlist grid_cl"> <div class="show"> <h4 class="fs_bg fs_title">项目展示</h4> <div class="showimg"> <a href="#"><img src="./img/1.jpg" alt=""/></a> <a href="#"><img src="./img/2.jpg" alt=""/></a> <a href="#"><img src="./img/3.jpg" alt=""/></a> <a href="#"><img src="./img/4.gif" alt=""/></a> </div> </div> <div class="search"> <h4><span>站内</span>搜索</h4> <form class="btnsear"> <ul> <li><label for="">关键字:</label><input type="text"/></li> <li> <input type="submit" value="Search"/> </li> </ul> </form> </div> </div> <div class="footer"> <div class="info"> <span>版权信息：©有限公司 </span> <span>2018-2019 </span> </div> </div> </div> </body> </html>css
* { margin: 0; padding: 0; } body { font-size: 14px; background-image: url("../img/body.gif"); } .fs_center { margin: auto; height: auto; } .grid_cl { width: 960px; margin: auto; background: #fff; } .fs_top { height: 54px; } .fs_logo { float: left; width: 230px; } .fs_menu { float: left; width: 730px; } .fs_nav { overflow: hidden; border-top: 3px solid black; margin-top: 10px; } .fs_nav > li { list-style: none; float: left; padding: 0 12px; height: 40px; line-height: 40px; } #selectRed { background: red; color: #fff; } .showlist { height: 210px; } .fs_nav > li:hover { background: red; color: #fff; } .fs_banner { margin-top: 3px; height: 230px; } .fs_banner > img { width: 100%; height: 100%; vertical-align: middle; } .fs_news { height: 260px; padding: 0 5px; box-sizing: border-box; } .fs_cl1, .fs_cl3 { width: 300px; height: 260px; float: left; } .fs_cl2 { width: 330px; height: 260px; float: left; margin: 0 10px; } .fs_news h4 { height: 30px; line-height: 30px; padding-left: 1em; } .fs_cl1 > h4 span { color: red; } .fs_bg { background: url("../img/ico5.gif") no-repeat left; padding-left: 1.5em !important; } .fs_cl1 > a img { width: 280px; border-radius: 5px; padding: 5px; background: #f1f1f1; } .fs_newslist > ul { border-top: 1px solid red; } .fs_newslist > ul > li { border-bottom: 1px dashed silver; list-style-type: square; list-style: none; overflow: hidden; padding-left: 10px; background: url("../img/ico1.gif") no-repeat left; } .fs_newslist > ul > li a { text-decoration: none; color: #000; line-height: 26px; } .fs_newslist > ul > li a:hover { color: red; } .fs_newslist > ul > li a span:nth-child(2) { overflow: hidden; width: 240px; white-space: nowrap; text-overflow: ellipsis; display: block; float: right; } .fs_newslist > ul > li a span:nth-child(1) { float: right; } .fs_cl3_info { overflow: hidden; } .fs_cl3_info > p { width: 140px; line-height: 22px; white-space: normal; text-overflow: ellipsis; -webkit-line-clamp: 10; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; float: left; } .fs_cl3_info > img { float: right; height: 212px; } .show { width: 650px; float: left; } .search { width: 200px; float: left; } .showimg { border-top: 1px solid red; } .showimg img { width: 158px; } .showimg > a { float: left; margin: 4px 0 0 4px; } .fs_title { line-height: 20px; } .search { margin: 40px 0 0 50px; padding: 15px 0; background: #efefef; } .search > h4 { line-height: 30px; padding-left: 15px; border-bottom: 1px solid #dbdbdb; } .search > h4 > span { color: red; } .btnsear li { list-style: none; text-align: center; margin: 15px 0; } .btnsear li input[type=text] { width: 140px; outline: none; } .btnsear li label { color: red; } .btnsear li input[type=submit] { width: 70px; height: 25px; line-height: 25px; border-radius: 5px; background: red; color: #fff; outline: none; border: 1px solid #fff; } .footer { width: 960px; height: 100px; background: #4787e7; clear: both; text-align: center; line-height: 100px; } .info { display: inline-block; vertical-align: middle; line-height: 20px; } .info > span { display: block; } img{ border: 0; }