35.position定位
position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值
static（默认）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（黏性定位）
relative（相对定位）
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
例：
absolute（绝对定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果定位祖先元素（绝对、相对、固定），相对于定位祖先元素发生偏移，没有定位祖先元素，相对于整个文档发生偏移
例：
fixed（固定定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条或别的嵌套定位等的影响
sticky（黏性定位）
在指定的位置进行黏性操作
例：
z-index定位层级
默认层级为0（默认后写的优先级高）（可以写负数）
例：
嵌套时的层级问题
同一级别的先比较（parent和box2），如果父容器没有z-index再用里面的比较（box1和box2）
36.CSS添加省略号
width：必须有一个固定的宽
white-space：nowrap：不让内容折行
overflow：hidden：隐藏溢出的内容
text-overflow：ellipsis：添加省略号
37.CSS Sprite
css雪碧也叫css精灵，是一种网页图片应用处理方式。它允许你讲一个页面涉及到的所有零星图片都包含到一张大图去加载。
好处：
可以减少图片的质量，网页图片加载速度快
减少图片请求的次数，加快网页的打开
38.CSS圆角
border-radius：给标签添加圆角
复合样式写法border-radius：n1，n2；
n1：左上角右下角
n2：右上角左下角
border-radius：n1,n2,n3,n4；
1-4：左上，右上，右下，左下
border-radius：n1/n2;
n1（x轴），n2（y轴）的椭圆
39.pc端布局
通栏：自适应浏览器宽度
版心：固定一个宽度，让容器居中
有时可能通栏嵌套版心
练习
<!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>Document</title>
<link rel="stylesheet" href="./css样式/commen.css">
<style>
#banner{position: relative;}
#banner .banner-list{width: 100%;height: 469px;position: relative;}
#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-list a{display: block;width: 100%;height: 100%;}
#banner .banner-btn{width:100%;position: absolute;
bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
#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-btn li.active{background: white;}
#service{overflow: hidden;min-height: 407px;}
#service .service-list{text-align: center;margin-top: 34px;}
#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(./图片/web1.png);}
#service .service-list li:nth-of-type(2) div{background-image: url(./图片/mail1.png);}
#service .service-list li:nth-of-type(3) div{background-image: url(./图片/graphic1.png);}
#service .service-list li:nth-of-type(4) div{background-image: url(./图片/e-bussiness1.png);}
#service .service-list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
#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: white;}
#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;}
#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 p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo l" >
<a href="#">
<img src="./图片/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="#">CONTANT</a>
</li>
</ul>
</div>
<div id="banner" class="container-fluid">
<ul class="banner-list">
<li class="active" style="background-image:url(./图片/banner.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./图片/banner.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./图片/banner.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./图片/banner.png)">
<a href="#"></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>
<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>
</ul>
</div>
</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>
<ul class="case-list clear" >
<li>
<a href="#"><img src="./图片/20141121095216750.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./图片/20141121105856226.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./图片/20141121095528549.png" alt=""></a>
</li>
</ul>
<div class="case-btn">
<a href="">VIEW MORE</a>
</div>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area-title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./图片/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news-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="contain-fluid">
<div class="container">
<p class="l">copyright 2006-2014 bowenshangmei culture all rights reserved</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>
*{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;}
#head .head_menu li{float: left;line-height: 81px;margin-left: 58px;}
#foot{background: #66c5b4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}
.area-title{margin-top: 60px;text-align: center;}
.area-title h2{height:20px; font-size: 20px;line-height: 20px;
color: #363636;background: url(../图片/title_bg.png) no-repeat center 7px;font-weight: normal;}
.area-title p{color: #9F9F9F;font-size: 14PX;line-height: 34px;}
1111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
