6.定位
position:属性值;
css position属性用于指定一个元素在文档中的定位方式。
top，right，bottom，left属性则决定了该元素的最终位置
这四个元素是相对当前元素自身进行偏移的
6.1静态定位
position:static；
正常文档流，默认值。
6.2固定定位
position:fixed；
1.脱离文档流，不会占用原来的位置
2.固定定位 参考 窗体定位
3.不会随着浏览器的滚动而滚动
<!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>
body{height: 2000px;}
div{position: fixed;}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
4. 使内联元素支持宽高
6.3相对定位
reletive相对定位
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
相对定位不会占用新的位置，保留原来的位置
所有定位除了static，默认比标准文档流高一个层级 但是相对定位依旧在标准文档流中，因为父级边框没有 塌陷
<html>
<head>
<title></title>
<style>
#box1{width: 100px;width: 100px;background-color: red;}
#box1{width: 100px;width: 100px;background-color: blue;position: relative;left: 100px;top: 100px;}
#box3{width: 100px;width: 100px;background-color: yellow;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:500px;
height:500px;
border:2px solid #FF0000;
}
.one{
width:200px;
height:200px;
background-color:#00FFFF;
}
.two{
width:200px;
height:200px;
background-color:#FFA500;
/*相对定位：以自身为参考，上下左右移动top|buttom|left|right*/
position:relative;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
</div>
<div class="two">
</div>
</div>
</body>
</html>
6.4绝对定位
position:absolute;
绝对定位脱离了标准文档流，不占用原来的位置
<!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>
#box1{width: 100px;height: 100px;background: red;position: absolute;}
#box2{width: 200px;height: 200px;background: blue;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</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>Document</title>
<style>
span{width: 100px;height: 100px;background: red;position: absolute;}
</style>
</head>
<body>
<span>这是一个内联</span>
</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>Document</title>
<style>
div{background: red;position: absolute}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
决定定位会参考最近的父元素（其父元素拥有
position属性，这个属性值不能static）
若到了body都没有发现含有position属性，则参考窗口。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:500px;
height:500px;
border:2px solid #FF0000;
position:relative;
}
.one{
width:200px;
height:200px;
background-color:#00FFFF;
}
.two{
width:200px;
height:200px;
background-color:#FFA500;
/*相对定位：以自身为参考，上下左右移动top|buttom|left|right*/
position:absolute;
bottom:20px;
right:20px;
}
.three{
width:50px;
height:200px;
background:#009E94;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</body>
</html>
6.5黏性定位
在指定的位置，进行黏性操作。
<!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>
body{height: 2000px;}
div{background: red; position: sticky;top: 0;}
/*当div元素到达网页顶部时，不再继续向上移动*/
</style>
</head>
<body>
<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>
</body>
</html>
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>Document</title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;z-index: 1;}
#div2{width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px;z-index: 2;}
/*z-index决定谁覆盖在上面*/
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
CSS添加省略号
width
必须有一个固定的宽
white-space：nowrap
不让内容折行
overflow:hidden
隐藏溢出内容
text-overflow:ellipsis
添加省略号
<!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>
#box1{width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="box1">这是一段这是一段文字这是一段文字这是一段文字
文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</div>
</body>
</html>
CSS Sprite
特性：
CSS雪碧也叫作CSS精灵，是一种网页图片应用处理方式。它允许你将一个网页涉及到的所有零星图片都包含到一张大图中去加载。
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页都打开
<!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>
#box1{width: 20px;height: 21px;background: url(./sprite_icon.png)no-repeat left -596px;}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
4.5圆角
border-radius
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
background:#FFA500;
/*
border-radius:50px;四个角都设置
border-radius:10px 50px;左上右下 右上左下
border-radius:5px 25px 75px 100px;左上 右上 右下 左下 顺时针
20px/40px椭圆
*/
border-radius: 5px 25px 75px 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
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.bwsm.css">
<style>
#banner{}
#banner .banner_list{width: 100%;height: 100%;}
#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;left: 200px;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(./images/web1.png) ;}
#service .service_list li:nth-of-type(2) div{background-image:url(./images/web1.png) ;}
#service .service_list li:nth-of-type(3) div{background-image:url(./images/web1.png) ;}
#service .service_list li:nth-of-type(4) div{background-image:url(./images/web1.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: #66c584;}
#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;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_date 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="./image/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu">
<li>
<a href="#">HOME</a>
</li>
</ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">HOME</a>
</li>
</div>
<div id="banner" class="contaner_fluid">
<ul>
<li class="active" style="background-image:url(./images/banner.png) ">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png) ">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png) ">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png) ">
<a href="#"></a>
</li>
</ul>
<ol class="banner_btn">
<li></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>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
li>
<div></div>
<h3>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
li>
<div></div>
<h3>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
</ul>
</div>
<div id="case" class="contaner_fluid">
<div class="area_title">
<h2>{客户案例}</h2>
<p>with the best professional technology</p>
</div>
<ul class="case_list clear">
<li>
<a href="#"><img src="#com.css"alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121095216750.png"alt=""></a>
</li>
<li>
<a href="#"><img src="./images/20141121095216750.png"alt=""></a>
</li>
</ul>
<div class="case_bth">
<a href="#">view more</a>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE</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" l>
<h3><a href="#"wangzhan></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="#"wangzhan></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="#"wangzhan></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="#"wangzhan></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="#">about</a>|<a href="#">about</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;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_tltle{margin-top: 60px;text-align: center;}
.area_tltle 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_tltle p{color: #9f9f9f;font-size: 14px;line-height: 34px;}
游戏页面
<!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>
#main{background: url(./images/bg20190104.jpg)no-repeat center 0;}
#nav{min-height: 236px;background:url(./images/nav_down_re.png)repeat-x,url(./images/nav.png)no-repeat
center 0;overflow: hidden;}
#nav .nav_logo{width: 138px;height: 112px;margin: 15px auto;}
</style>
</head>
<body>
<div id="head" class="container-fluid">
<div class="container">
<div class="head_logo l">
<a href="#">腾讯游戏</a>
</div>
<div class="head_ad l">
<a href="#"><img src="./images/ad.jpg" alt=""></a>
</div>
<div class="head_menu r">
<div class="head_menu_czsh l">
<a href="#">成长守护平台</a>
</div>
<div class="head_menu_top l">
<a href="#">腾讯游戏排行榜</a>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div id="nav" class="container-fluid">
<div class="nav_logo">
<a href="#">
<img src="./images/insife_logo.png" alt="QQ飞车" title="QQ飞车">
</a>
</div>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #464646;}
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: 980px;margin: 0 auto;position: relative;}
.container-fluid{width: 100%;}
#head{background: url('../images/head_bg.png')repeat-x;}
#head .container{height: 41px;}
#head .head_logo{width: 220px;height: 41px;background: url(../images/ost-bg.png)no-repeat 0 -38px;}
#head .head_logo a{display: block;width: 100%;height: 100%;text-indent: -9999px;overflow: hidden;}
#head .head_ad{margin-left: 8px;}
#head .head_menu{font-size: 12px;}
#head .head_menu div{height: 18px;margin-top: 13px;background: url(../images/ost-bg.png)no-repeat;}
#head .head_menu .head_menu_czsh{margin-right: 26px;padding-left: 20px;background-position:left -93px;}
#head .head_menu .head_menu_top{padding-left: 17px;background-position: right -89px;}
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
