三十七、CSS定位
1. position定位
position特性：
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值：
static（默认）
relative
absolute
fixed
sticky
relative:
- 如果没有定位偏移量，对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、bottom是相对于当前元素自身进行偏移的
absolute：
- 使元素完全脱离文档流
- 使内联元素支持宽高（让内联具备块特性）
- 使块元素默认宽根据内容决定（让块具备内联的特性）
- 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档流发生偏移（绝对、相对、固定）
fixed：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky粘性定位：
在指定位置，进行粘性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题
小练习：定位下拉菜单
代码：
<!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>
<style>
*{margin:0;padding:0;}
ul{list-style: none;}
#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;}
#menu ul{width: 100px;border: 1px black solid;position: relative;left: -1;
top: 10px;background-color: white;display: none;
}
#menu:hover ul{display: block;}
#menu ul li:hover{background-color: grey;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">卖家中心
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落</p>
</body>
</html>
实现效果：
2. CSS添加省略号
首先必须有一个固定的宽width
不让内容折行 white-space：nowrap
隐藏溢出的内容 overflow：hidden
添加省略号 text-overflow：ellipsis
三十八、CSS Sprite
特性：
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去架在
好处：
可以减少图片的质量，网页的图片加载速度更快
减少图片的请求的次数，加快网页的打开
三十九、CSS圆角
border-radius 给标签添加圆角
常用操作：
<!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>
<style>
#box{height: 300px;width: 300px;background-color: red;border-radius: 50%;}/*画一个圆*/
#box{height: 300px;width: 300px;background-color: red;border-radius: 10px 20px;}/*左上角右下角和左下角右上角的圆角半径*/
#box{height: 300px;width: 300px;background-color: red;border-radius: 10px 20px 30px 40px;}/*从左上角开始顺时针各圆角的半径*/
#box{height: 300px;width: 300px;background-color: red;border-radius: 20px / 40px;}/*圆角x轴和y轴的半径（椭圆）*/
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
四十、PC端的布局
通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中
四十一、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>Document</title>
<link rel="stylesheet" href="./css/common.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 a{display: block;width: 100%;height: 100%;}
#banner .banner_list li.active{opacity: 1;z-index: 10;}
#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-color: 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(./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: 36px;margin-top: 25px;}
#service .service_list p{font-size: 14px;line-height: 22px;color: #6d6d6d;line-height: 22px;}
#case .container{min-height: 460px;overflow: hidden;background: #f8f8f8;width:100%;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{color: #66c5b4;}
#case .case_list{margin-top: 28px;float: left;}
#case .case_list li{float: left;width: 340px;margin: 0 10px;height: 180px;}
#case .case_btn{width: 176px;height: 37px;margin: 0 auto;border-radius: 25px;line-height: 37px;
text-align: center;font-size: 14px;margin-top: 250px;background-color:#66c5b4;}
#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: 70;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 p {color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo">
<a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_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="#">CONTENT</a>
</li>
</ul>
</div>
<div id="banner" class="container-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image:url(./images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image:url(./images/banner.png);">
<a href="#"></a>
</li>
<li style="background-image:url(./images/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>
<ul class="service_list">
<li>
<div></div>
<h3>1.WEB DESIGN</h3>
<p>企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.GRARHIC DESIGN</h3>
<p>标志LOGO设计/产品宣传册设计
<br>
企业广告/海报设计
</p>
</li>
<li>
<div></div>
<h3>3.E-BUSSINESS PLAN</h3>
<p>淘宝/天猫装修设计及运营推广
<br>
企业微博、微信营销
</p>
</li>
<li>
<div></div>
<h3>4.MAILBOXAGENTS</h3>
<p>腾讯/网易企业邮箱品牌代理
<br>
个性化邮箱定制开发
</p>
</li>
</ul>
</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 href="#"><img src="./images/20141121095216750.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121095528549.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121105856226.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="#">view more</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>TEH LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./images/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="container_fluid">
<div class="container">
<p class="l"></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>
CSS:
*{
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%;
}
ul{
float: left;
}
#head{
height: 81px;
}
#head .head_logo{
width: 162px;
height: 44px;
margin-top: 19px;
float: left;
}
#head .head_menu{
font-size: 14px;
line-height: 81px;
}
#head .head_menu li{
float: left;
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;
line-height: 20px;
font-size: 20px;
color: #363636;
background: url(../images/title_bg.png) no-repeat center 0;
font-weight: normal;
}
.area_title p{
color: #9f9f9f;
font-size: 14px;
line-height: 34px;
}
显示效果：
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
