HTML+CSS系列之导学

一：拨云见日
- 54.position定位
- - relative相对定位
  - absolute决对定位
  - fixed固定定位
  - 定位的下拉菜单
  - 定位实现元素居中
  - 定位实现列表添加修饰
- 55.CSS添加省略号
- 56.CSS sprite
- 57.CSS圆角
- 58.PC端的布局
- 练习：博文尚美
- 练习:游戏网页制作

一：拨云见日

54.position定位

position特性
css position 属性用于决定一个元素在文档中的定位方式。top，bottom，left属性则决定了该元素的最终位置

position取值：
static（默认）静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky

relative相对定位

如果没有定位的偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对当前的元素自身进行偏移的

absolute决对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

定位的下拉菜单

定位实现元素居中

定位实现列表添加修饰

55.CSS添加省略号

width：必须有一个固定宽
white-space：nowrap
不让内容折行
overflow：hidden
隐藏溢出内容
text-overfiow：ellipsis
添加省略号

56.CSS sprite

特性：
CSS雪碧也叫做CSS精灵，是一种网页图片应用的处理方式。他允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处：
1.可以减少图片的质量，网页的图片加载速度快
2.减少图片的请求次数，加快网页的打开

57.CSS圆角

border-radius
给标签添加圆角
例如：

58.PC端的布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让器居中

练习：博文尚美

html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博文尚美</title><link rel="stylesheet" href="./css/commom.css"></head>
<body><!-- head --><div id="head" class="container"><div class="logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美"></a></div><ul class="menu"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul></div><!-- book --><div id="book"><ul class="list"><li style="background-image: url(./images/banner.png);"><a href="#"></a></li></ul><ol class="btn"><li class="lix"></li><li></li><li></li><li></li></ol></div><!-- 服务范围 --><div id="fuwu" class="wrapper"><div id="heng" ><h2>服务范围</h2><p>OUR SERVICES</p></div><div id="tu1"><img src="./images/web1.png" alt=""><h2>1.WEB DESIGN</h2><ul><li class="li2">企业品牌网站设计/手机网站制作</li><li class="li3">动画网站创意设计</li></ul></div><div id="tu2"><img src="./images/graphic1.png" alt=""><h2>2.GRAPHIC DESIGN</h2><ul><li class="li2">标志LOGO设计/产品宣传册设计</li><li class="li3">企业广告/海报设计</li></ul></div><div id="tu3"><img src="./images/e-bussiness1.png" alt=""><h2>3.E-BUSINESS PLAN</h2><ul><li class="li2">淘宝/天猫装修设计及运营推广</li><li class="li3">企业微博、微信营销</li></ul></div><div id="tu4"><img src="./images/mail1.png" alt=""><h2>4.MALBOXAGENTS</h2><ul><li class="li2">腾讯/网易企业邮箱品牌代理</li><li class="li3">个性化邮箱定制开发</li></ul></div></div><!-- 客户案例 --><div id="anli" class="wrapper"><div id="heng"><h2><span>{ 客户案例 }</span></h2><p>With the best prolessional technology, to design the best innovative web site</p></div><div id="kehu"><ul><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul></div><button><span>VIEW MORE</span></button></div><!-- 最新咨询 --><div id="zixun" class="container"><div id="heng" class="xia"><h2>最新咨询</h2><p>TEH LATEST NEWS</p></div><div id="zixuntu"><img src="./images/xs1.png" alt=""></div><div id="jan"><div class="yue"><h2>09</h2><p>Jan</p></div><div class="text"><h2>网站排名进入前三的技巧</h2><p>很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化.......</p></div></div><div id="jan"><div class="yue"><h2>08</h2><p>Jan</p></div><div class="text"><h2>flash网站制作的优缺点</h2><p>虽然HTML5程序语言的出现，大有逐渐代替flash网站制作，但是过于生硬的HTML5动画效果，始终........</p></div></div><div id="jan"><div class="yue"><h2>07</h2><p>Jan</p></div><div class="text"><h2>做个网站多少钱</h2><p>“做个网站多少钱”很多客户打电话过来直接第一句话就抛出来问题。这好比买辆车多少钱，你要是.......</p></div></div><div id="jan"><div class="yue"><h2>06</h2><p>Jan</p></div><div class="text"><h2>哪些网站优化手法属于网站过度优化</h2><p>大部分人都想让自己的网站，一夜之间出现在搜索独占鳌头。但是事实告诉我们罗马不是一..........</p></div></div></div><!-- 底部 --><div id="bottom" class="wrapper"><div id="nei" class="container"><p>Copynight 2006-2014 Bowenshangmei CULture All Rights Reserver</p><ul><li><a href="#" class="wu">Home</a></li><li><a href="#">About</a></li><li><a href="#">portfolio</a></li><li><a href="#">Contact</a></li></ul></div></div></body>
</html>

css:

*{margin: 0;padding: 0;box-sizing: border-box;
}ol,ul,li{list-style: none;
}img{display: block;}a{text-decoration: none;
}body{font-family: Arial;
}.clear:before,.clear:after{content: " ";display: block;clear: both;
}
.l{float: left;}
.r{float: right;}.container{width: 1080px;margin: 0 auto;position: relative;}.wrapper{width: 1352px;margin: 0 auto;}.fluid{width: 100%;
}#head{height: 82px;line-height: 82px;
}#head .logo{margin-top: 19px;
}#head .menu{float: right;font-size: 17px;
}#head .menu li{float: right;margin-left: 50px;
}#head .menu li a{color: #646464;
}#book{position: relative;}#book .list{position: relative;width: 100%;height: 469px;
}#book .list li {position: absolute;left: 0;top: 0;height: 100%;width: 100%;background:center 0 no-repeat;
}#book .btn{width: 100%;position: absolute;bottom: 19px;text-align: center;
}#book .btn li{display: inline-block;margin-right: 11px;width: 12px;height: 12px;border: 3px solid white;border-radius: 50%;cursor: pointer;
}#book .btn .lix{background-color: aliceblue;
}#fuwu{overflow: hidden;height: 408px;
}#heng{margin-top: 60px;text-align: center;/* background-color: pink; */
}#heng h2{height: 20px;line-height: 20px;font-size: 20px;font-weight: normal;color: #363636;background:  no-repeat center 5px;
}#heng p{font-size: 14px;margin-top: 10px;color: #9f9f9f;
}#fuwu #tu1{ float: left;width: 210px;height: 210px;margin-top: 40px;margin-right: 70px;margin-left: 151px;text-align: center;
}
#fuwu #tu1 img{margin: 0 auto;
}
#fuwu #tu1 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu1 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu1 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu2{ float: left;width: 210px;height: 210px;margin-right: 70px;margin-top: 40px;text-align: center;
}
#fuwu #tu2 img{margin: 0 auto;
}
#fuwu #tu2 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu2 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu2 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu3{ float: left;width: 210px;height: 210px;margin-right: 70px;margin-top: 40px;text-align: center;
}
#fuwu #tu3 img{margin: 0 auto;
}
#fuwu #tu3 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu3 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu3 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#fuwu #tu4{ float: left;width: 210px;height: 210px;margin-top: 40px;text-align: center;
}
#fuwu #tu4 img{margin: 0 auto;
}
#fuwu #tu4 h2{margin-top: 20px;font-size: 18px;font-weight: bold;line-height: 36px;
}
#fuwu #tu4 .li2{margin-top: 10px;font-size: 14px;color: #6d6d6d;line-height: 22px;
}
#fuwu #tu4 .li3{font-size: 14px;color: #6d6d6d;line-height: 22px;
}#anli{position: relative;overflow: hidden;height: 460px;background: rgb(245, 243, 243);background-color: #f8f8f8;
}#anli #heng h2 span{color: #66c5b4;
}#anli #kehu ul{float: left;margin-top: 38px;margin-left: 167px;
}#anli #kehu li{float: left;margin-right: 20px;
}#anli button{position: absolute;bottom: 50px;left: 590px;width: 176px;height: 37px;border:3px solid #66c5b4;border-radius: 40px;background-color: #66c5b4;cursor: pointer;
}#anli button span{color: white;font-size: 14px;
}#zixun{overflow: hidden;height: 450px;
}#zixun .xia{margin-bottom: 65px;
}#zixun #zixuntu{float: left;}#zixun #jan{float: left;margin-left: 10px;margin-bottom: 16px;width: 400px;height: 90px
}
#zixun #jan .yue{float: left;width: 65px;height: 100%;border-right:2px solid rgb(233, 227, 227) ;
}
#zixun #jan .yue h2{text-align: center;line-height: 60px;font-size: 39px;font-weight: bold;color: #66c5b4;
}
#zixun #jan .yue p{text-align: center;font-size: 18px;line-height: 30px;color:#9f9f9f;
}
#zixun #jan .text{float: left;margin-left: 20px;
}
#zixun #jan .text h2{font-size: 18px;
}
#zixun #jan .text p{margin-top: 20px;width: 300px;height: 40px;font-size: 14px;color: #9f9f9f;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}#bottom{height: 50px;background-color: #5FBAB5;
}#bottom #nei{height: 50px;line-height: 50px;
}#bottom #nei p{float: left;font-size: 14px;color: white;
}#bottom #nei ul{float: right;
}#bottom #nei ul li{float: right;text-align: center;
}#bottom #nei ul li a{border-right:1px solid white ;padding: 0 20px;font-size: 10px;color: white;
}
#bottom #nei ul li .wu{border: 0;
}

效果：

练习:游戏网页制作