一，position定位
（1）特性
css position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。
浮动适合左右布局，而定位适合上下布局
（2）取值
[1]relative相对定位
#box{width:100px;height:100px;position:relative；}
[2]absolute绝对定位
与浮动类似
#box1{width:100px;height:100px;background:red;position:absolute;}
[3]fixed固定定位
不受祖先元素的控制
[3]sticky黏性定位
在指定的位置进行粘性操作
吸附功能
单加标签无意义，要配合具体上下左右数据实现，比如top=0，添加了效果的块，在触碰页面顶端时就会暂停不动，但不会影响它下面的内容向上滚动。
[4]z-index定位层级
仅比较父容器的层级，除非外层容器不写定位层级
练习
<!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>
<style>
*{margin: 0;padding:0;}
ul{list-style: none;}
#menu{
width: 100px;
height: 30px;
margin: 20 auto;
border: 1px black solid;
position: relative;
}
#menu ul{
width: 100px;
border: 1px black solid;
position: absolute;
left: -1px;
top:30px;
background: white;
display: none;
}
#menu:hover ul{display:block;}
#menu ul li:hover{background: grey;}
p{text-align: centre;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
</body>
</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>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
<style>
#box1{width: 300px;
height: 300px ;
border:1px
black solid;
position: relative;
}
#box2{
width: 100px;
height: 100px;
background: red;
position: absolute;
left:50%;
top:50%;
margin: -50px 0 0 -50px;
}
</style>
</body>
</html>
二，CSS添加省略号
#content{width:200px;border:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
三，CSS Sprite
四，CSS圆角
border-radius：给标签添加圆角
border-radius：可以实现半圆效果
（1）两个值10px，20px：两个对角
（2）四个值：从左上角开始，顺时针开始依次对应
（3）20px/40px:x轴长度为20，y轴长度为40的椭圆
五，网页作业
通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中## 标题
<!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>
<style>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{
text-decoration: none;
color: #646464;
}
h1,h2,h3{font-size: 16px;}
body{font-family:Arial ;}
.l{float: left;}
.r{float:right;}
.clear:after{content:"";display: block;clear: both;}
.container{width: 1080px;margin: 0 auto;position:relative;}
.container-fluid{width: 100%;}
#head{height:81px;}
#head .head_logo{width:162px;height:44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}
#banner{position:relative;}
#banner .banner_list{
width: 100%;
height:469px;
position: relative;
}
#banner .banner_btn li{
display: inline-block;
width: 12px;
height:12px;
border:2px solid white;
border-radius: 50%;
box-sizing: border-box ;
margin: 0 6px;
cursor: pointer;
}
#banner .banner_list li{
width: 100%;
height:100%;
background:center 0 no-repeat;
position:absolute;left:0;top: 0;opacity: 0;z-index: 1;
}
#banner .banner_list li.active{
opacity: 1;
z-index: 10;
}
#banner .banner_btn{
z-index: 20;
width: 100%;
position: absolute;
bottom: 19px;
left:20;
font-size: 0;
text-align: center;
margin: 0 6px;
}
#banner .banner_btn li.active{
background: white;
}
#banner .banner_list a{display: block;width: 100%;height: 100%;cursor: pointer;}
.service{overflow:hidden;min-height:407px;}
.area_title{margin-top: 60PX;text-align: center;}
.area_title h2{
height: 20px;line-height: 20px;font-size: 20px;color:#363636;background: url(images/title_bg.png)no-repeat center 7px;font-weight:normal ;}
.area_title p{color:#9f9f9f;font-size: 14px;line-height: 34px;}
#service{overflow: hidden;min-height: 407px;}
#service .service_list{text-align: center;margin-top: 40px;}
#service .service_list li{float: left;width: 250px;margin: 0 10px;}
#service .service_list div{width:102px;height: 102px;margin: 0 auto;}
#service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
#service .service_list li:nth-of-type(2) div{background-image: url(./images/mail1.png);}
#service .service_list li:nth-of-type(3) div{background-image: url(./images/graphic1.png);}
#service .service_list li:nth-of-type(4) div{background-image: url(./images/e-bussiness1.png);}
#service .service_list h3{font-size: 18px;color: #434343;line-height:22px;margin-top: 30px;}
#service .service_list p{font-size: 14px;color:#6D6D6D;line-height: 22px;}
#case{background: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{color: #66C5B4;}
#case .case_list{margin-top: 28px;}
#case .case_list li{float:left;width:340px;margin: 0 10px;}
#case .case_btn{width:176px;height:37px;background: #66C5B4;margin: 0 auto;border-radius: 25px;line-height:37px ;text-align: center;font-size: 14px;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;color: #f8f8f8;}
#news{min-height: 450px;overflow: hidden;}
#news .area_title{margin-top: 65px;}
#news dl{margin-top: 48px;}
#news dt{width:234px;}
#news dd{width: 846px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
#news .news_date{width: 71px;height: 70px;border-right: 1px solid #DCDCDC;text-align: center;}
#news .news_date i{color: #66C5B4;font-size: 39px;display: block;font-weight: bold;}
#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
#news .news_text{width: 310px;margin-left: 20px;}
#news .news_text h3{font-size: 14px;}
#news .news_text h3 a {color:#3F3F3F}
#news .news_text h3 p {color:#A4A4A4;font-size: 12px;line-height: 21px;margin-top: 17px;}
#foot{background: #66C5B4;}
#foot .container{height:54px;line-height:54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo l">
<a href="#">
<img src="./images/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu r">
<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>
<div id="banner"class="contaner-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./images/banner.png) ;">
<a herf="#"></a>
</li>
<li style="background-image:url(./images/banner.png) ">
<a herf="#"></a>
</li>
<li style="background-image:url(./images/banner.png) ">
<a herf="#"></a>
</li>
<li style="background-image:url(./images/banner.png) ">
<a herf="#"></a>
</li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.graphic design</h3>
<p>
标志logo设计/产品宣传册设计
<br>
企业广告
</p>
</li>
<li>
<div></div>
<h3>3.e-business plan</h3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博、微信营销
</p>
</li>
<li>
<div></div>
<h3>4.mailboxagents</h3>
<p>
腾讯/网易企业邮箱品牌代理
<br>
个性化邮箱定制开发
</p>
</li>
</div>
<div id="case" class="container-fluid">
<div class="container">
<div class="area_title">
<h2>{客户案例}</h2>
<p>With the best professional technology,to design the best innovative web site</p>
</div>
<ul class="case_list clear">
<li>
<a herf="#"><img src="./images/20141121095216750.png"alt=""> </a>
</li>
<li>
<a herf="#"><img src="./images/20141121095528549.png"alt=""> </a>
</li>
<li>
<a herf="#"><img src="./images/20141121105856226.png"alt=""> </a>
</li>
</ul>
<div class="case_btn"></div>
<a href="#"> view more</a>
</div>
</div>
<div id="new" class="container ">
<div class="area_tiele">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./images/xs1.png"alt="">
</dt>
<dd class="l">
<ul class="newss_list">
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎，更不用说网页前三了..</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎，更不用说网页前三了..</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎，更不用说网页前三了..</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎，更不用说网页前三了..</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot"class="container-fluid">
<div class="container">
<p class="l">Copyright 2006-2014 Bowenshangmei Culture ALL Rights Rwserved</p>
<div class="r">
<a href="#">Home</a>|
<a href="#">ABOUT</a>|
<a href="#">Portfolio</a>|
<a href="#">Contact</a>|
</div>
</div>
</div>
</body>
</html>
版权声明：本文为m0_74135603原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。