Web前端学习第四周
position定位
- 指定一个元素在文档中的定位方式
- top,right,left,bottom属性决定最终位置
position取值
static（默认）
relative
absolute
fixed
sticky
1. relative相对定位
不会影响其他元素的布局
如果没有定位偏移量对元素本身无影响
例：
<style>
#box1{width:100px;height: 100px;background:red ;}
#box2{width:100px;height: 100px;background: blue; position:relative;left: 100px;top: 100px;}
#box3{width:100px;height: 100px;background:yellow ;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
效果：
- 只移动了蓝方块
对比margin
<style>
#box1{width:100px;height: 100px;background:red ;}
#box2{width:100px;height: 100px;background: blue;margin-top:100px ;margin-left: 100px; ;}
#box3{width:100px;height: 100px;background:yellow ;}
</style>
效果：
（ 黄色方块被影响）
2. absolute绝对定位
- 使元素完全脱离文档流
例：
正常情况
<style>
#box1{width:100px;height: 100px;background:red ;}
#box3{width:200px;height: 200px;background:yellow ;}
</style>
效果
加入属性absolute之后：
<style>
#box1{width:100px;height: 100px;background:red ;position: absolute;}
#box3{width:200px;height: 200px;background:yellow ;}
</style>
效果
- 使内联元素支持宽高（使内联具备块特性）
例：
正常情况：
<style>
span{width: 100px;height: 100px;background: red;}
</style>
</head>
<body>
<span>这是一个内联的</span>
效果：
加入absolute属性后：
<style>
span{width: 100px;height: 100px;background: red;position:absolute}
</style>
效果：
- 使块元素默认宽根据内容决定（让块具备内联的特性）
正常情况
<style>
div{background: red;}
</style>
</head>
<body>
<div>这是一个块</div>
加入absolute属性后：
div{background: red;position: absolute;}
效果：
4.如果定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
例：
默认情况：
<style>
#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;}
#box2{width: 100px;height: 100px;background: red;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
<style>
#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;}
#box2{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
如果加入相对定位：
<style>
#box1{width: 300px;height: 300px;border:1px black solid;margin: 200px;position:relaive}
#box2{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
则会回到边框里
3.fixed固定定位
- 使元素完全脱离文档流
- 使内联元素支持宽高（使内联具备块特性）
- 使块元素默认宽根据内容决定（让块具备内联的特性）
- 相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响
4.sticky粘性定位
例：
<style>
body{height: 20000px;}
div{background: yellow;position: sticky;top:0}
</style>
</head>
<body>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<div>这是一个块</div>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</body>
效果：当黄色字条走到顶端时便会固定不动
5. z-index定位层级
（可以写负数）
默认情况：
<style>
#box1{width: 100px;height: 100px;background:red ;position: absolute;}
#box2{width: 100px;height: 100px;background: black;position: absolute;left:50px;top:50px}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
（后写的默认层级高）
改变后
#box1{width: 100px;height: 100px;background:red ;position: absolute;z-index:1}
#box2{width: 100px;height: 100px;background: black;position: absolute;left:50px;top:50px}
小细节：嵌套结构时外层总是大于里层
CSS添加省略号
- width（必须有一个固定的宽）
- white-space:nowrap(不让内容折行）
- overflow:hidden（隐藏溢出内容）
- text-overflow:ellipsis（添加省略号）
例：
<style>
#content{width:200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
</head>
<body>
<div id="content">测试文字草草草草草草草草草草草草草草草草草草草草</div>
效果：
CSS Sprite
网页图片处理方式
好处：
1.减少图片质量，网页加载速度更快
2.减少图片的请求次数，加快网页的打开
例：
#box{width: 20px;height: 50px;background: url(.sprite_icon.png)no-repeat left -596px;}
CSS圆角
border-radius(给标签添加圆角）
例：
#box{width: 200px;height: 200px;background: yellow;border-radius: 20px;}
效果
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="./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: 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: 6px;}
#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;}
#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/web2.png);}
#service .service_list li:nth-of-type(3) div{background-image: url(./images/web3.png);}
#service .service_list li:nth-of-type(4) div{background-image: url(./images/web4.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{counter-reset: #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: 14;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{float: left;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;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 l">
<a href="#">
<img src="imges/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="banne" class="contaner-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="comtainer">
<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>
</ul>
</div>
<div id="case" class="container-fluid">
<div class="comtainer">
<div class="area_title"></div>
<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 id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt>
<img src="images/xs1.png" alt="">
</dt>
<dd>
<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>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container-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>
效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
