1.CSS定位
position:
static(默认)
relative
absolute：绝对定位
fixed:固定定位
sticky：粘性定位
relative
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left,right,top,bottom是相对于其他元素偏移的
<!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 ;}
#box2{width: 100px;height: 100px;background:blue ;position:relative ;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>
</html>
absolute
使元素完全脱离文档流
不使元素脱离文档流（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）
<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>
fixed
使元素完全脱离文档流
使内联元素脱离宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不收浏览器的滚动条影响
<title>Document</title>
<style>
body{width: 1000px;}
#box1{width: 300px;height: 300px;border: 1px black solid;margin: 200px;position: ;}
#box2{width: 100px;height: 100px;background: red;position: fixed;left: 0px;top: 0px;}
</style>
</head>
<body>
<div id="box1">蓝色</div>
<div id="box2">红色</div>
</body>
</html>
sticky
指定位置，进行粘性操作
z-index
默认层级为0
嵌套时候的层级问题
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
#menu ul{width: 100px;border: 1px black solid;position: absolute;left:-1px;top:30px;background:blue;
display: none;}
#menu:hover ul{display: block;}
#menu ul li :hover{background:gray;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul >
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
<li>商品5</li>
</ul>
</div>
<p>测试段落商品1商品1商品1商品1商品1</p>
</body>
</html>
练习
<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: 300px;height: 300px;border: 1px black solid;position: relative}
#box2{width: 100px;height: 100px;background: cornflowerblue;position: absolute;left: 50%;top: 50%;margin: -50px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
</html>
2.CSS省略器
width
必须有一个固定的宽
white-space:nowrap
不让内容折行
overflow:hidden
隐藏溢出的内容
text-overflow:ellipsis
添加省略号
3.CSSsprite
特性：CSS雪碧也叫CSS精灵，是一种网页图片的处理方式。它允许你将一个网页的所有零星图片都包含到一个大图片里处理
好处：可以减少图片的质量，网页图片的加载速度较快
减少图片的请求次数，加快网页打开
4.CSS圆角
border-radius
给标签添加圆角
5.博文尚美练习
博文尚美.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>
<link rel="stylesheet" href="./博文尚美.css">
<style>
#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position: relative;}
#banner .banner_list li{ width: 100%;height: 469px;background:center 0 no-repeat;position:absolute ;left: 0;
top: 0;opacity: 0;z-index: 1;}
#banner .banner_list li 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 60px;cursor: pointer;}
#banner .banner_btn li .active{background: white;}
#service{overflow: hidden; min-height: 407px;}
#service .service_list{text-align: center;}
#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: 20px;color: #6d6d6d;line-height: 22px;}
#case{background: #f8f8f8;}
#case .caontainer{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 56px;}
#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;color:white;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 .area_title 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;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="#">ABOOUT</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="container_fluid" >
<ul class="banner_list" >
<li class="active" style=" background-image: url(./banner.png) ;">
<a href="#" ></a>
</li>
<li class="active" style=" background-image: url(./banner.png) ;">
<a href="#"></a>
</li>
</ul>
<ol class="banner_btn" style="width: 100%;position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;">
<li class="active" style="display: inline-block;width: 12px;height: 12px;border: 2px solid white;
border-radius: 50%;box-sizing: border-box;margin:0 60px;cursor: pointer;"></li>
<li style="display: inline-block;width: 12px;height: 12px;border: 2px solid white;
border-radius: 50%;box-sizing: border-box;margin:0 60px;cursor: pointer;"></li>
<li style="display: inline-block;width: 12px;height: 12px;border: 2px solid white;
border-radius: 50%;box-sizing: border-box;margin:0 60px;cursor: pointer;"></li>
<li style="display: inline-block;width: 12px;height: 12px;border: 2px solid white;
border-radius: 50%;box-sizing: border-box;margin:0 60px;cursor: pointer;"></li>
</ol>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICE</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>1.WEB DESIGN</h3>
<p>企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.WEB DESIGN</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>3.WEB DESIGN</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>4.WEB DESIGN</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 innocative site</p>
</div>
<ul class="case_list clear">
<li>
<a href="#"><img src="./20141121095216750.png" alt></a>
</li>
<li>
<a href="#"><img src="./20141121095528549.png" alt></a>
</li>
<li>
<a href="#"><img src="./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>TEN 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>08</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>07</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>06</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 2019 Bowenshangmei Culyure 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>
博文尚美.css
*{margin: 0;padding: 0;}
ul,ol{list-style-type: 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; }
.area_title{margin-top: 61px;text-align: center;}
.area_title h2{font-size: 20px;line-height: 20px;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;}
#foot{background: #66c5b4;}
#foot .container{height:54px ;line-height: 54px;font-size: 12px;color: white;}
#foot .div{}
#foot .div a{color: white;margin: 0 10px;}
展示效果
6.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>《率土之滨》手游官网</title>
<link rel="shortcut icon" type="image/x-icon" href="./PCSTZBimages/周姬.png"/>
<link rel="stylesheet" href="./PC端游戏网页制作.css">
<style>
#main{background: url(./PCSTZBimages/小乔.png) center 0 ;height: 1920px;width: 100%;}
#nav{height: 116px;background: url(./PCSTZBimages/背景栏.png);}
#service{overflow: hidden; min-height: 407px;}
#service .service_list{text-align: center;}
#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(./PCSTZBimages/周姬.png);}
#service .service_list li:nth-of-type(2) div{background-image: url(./PCSTZBimages/灵帝.png);}
#service .service_list h3{font-size: 18px;color:rgb(167, 58, 58,) ;line-height: 36px;margin-top: 25px;}
#service .service_list p{font-size: 20px;color: rgb(167, 58, 58,);line-height: 22px;}
#news{min-height: 450px;overflow: hidden;}
#news .area_title{margin-top: 65px;}
#news .area_title 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;border: right 1px solid #dcdcdc;}
#news .news_date i{color: rgb(43, 46,54)4;font-size: 39px ;display: block;font-weight: bold;}
#news .news_date span{color: rgb(43, 46,54);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: rgb(43, 46,54)}
#news .news_text p{color:#a4a4a4;font-size: 12px;line-height: 21px; margin-top: 17px;}
</style>
</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="./PCSTZBimages/网易游戏.png" alt="网易广告" title="网游游戏">
</a>
</div>
<div class="head_menu r">
<div class="head_menu_gwsy l">
<a href="#">官网首页</a>
</div>
<div class="head_menu_match l">
<a href="#">赛事汇总</a>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div id="nav" class="container-fluid">
</div>
<div id="case" class="container_fluid">
<div class="container">
<div class="area_title">
<h3>{客户案例}</h3>
<p>With the best professional technology,to design the best innocative site</p>
</div>
<ul class="case_list clear">
<li>
<a href="#"><img src="./PCSTZBimages/灵帝.png" alt></a>
</li>
<li>
<a href="#"><img src="./PCSTZBimages/周姬.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>TEN 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> 历经近半个月的赛前准备活动，
《率土之滨》2022“长风破浪”邀请赛的三千家族，
近万名参赛选手，均已选择好起兵阵营，
只待大风起兮，便要乘长风破万里浪，于这个盛大的舞台之上，
谱写属于自己的传奇。...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>08</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">三千家族集结，万人同台竞技！《率土之滨》长风破浪邀请赛震撼开幕</a></h3>
<p> 历经近半个月的赛前准备活动，
《率土之滨》2022“长风破浪”邀请赛的三千家族，
近万名参赛选手，均已选择好起兵阵营，
只待大风起兮，便要乘长风破万里浪，于这个盛大的舞台之上，
谱写属于自己的传奇。...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>07</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">三千家族集结，万人同台竞技！《率土之滨》长风破浪邀请赛震撼开幕</a></h3>
<p> 历经近半个月的赛前准备活动，
《率土之滨》2022“长风破浪”邀请赛的三千家族，
近万名参赛选手，均已选择好起兵阵营，
只待大风起兮，便要乘长风破万里浪，于这个盛大的舞台之上，
谱写属于自己的传奇。...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>06</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">三千家族集结，万人同台竞技！《率土之滨》长风破浪邀请赛震撼开幕</a></h3>
<p> 历经近半个月的赛前准备活动，
《率土之滨》2022“长风破浪”邀请赛的三千家族，
近万名参赛选手，均已选择好起兵阵营，
只待大风起兮，便要乘长风破万里浪，于这个盛大的舞台之上，
谱写属于自己的传奇。...</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container_fluid">
<div class="container">
<p class="l">
Copyright 2019 Bowenshangmei Culyure 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 il {list-style-type: none;}
img{display: block;}
a{text-decoration: none;}
h1,h2,h3{font-size: 16px;}
.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-color: rgb(255, 255, 255 );height: 84px;width: 100%;}
#head .container{height: 60px;}
#head .head_logo{width: 280px;height: 125px;
background: url(./PCSTZBimages/月明千里\ 梦留汴京.png) no-repeat 0 15px ;width: 456px;}
#head .head_logo a {display: block;width: 100%;height: 100%;text-indent: -999px;overflow: hidden;}
#head .head_ad a img{margin-top: 20px; display: block;margin-left: 30px;}
#head .head_menu{font-size: 18px ;}
#head .head_menu div{height: 56px;margin-top: 35px;}
#head .head_menu_gwsy{margin-right: 65px;}
#head .head_menu a{color: black;}
.area_title{margin-top: 61px;text-align: center;}
.area_title h2{font-size: 20px;line-height: 20px;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;}
#foot{background: rgb(9, 9, 9);}
#foot .container{height:54px ;line-height: 54px;font-size: 12px;color: white;}
#foot .div{}
#foot .div a{color: white;margin: 0 10px;}
9266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
