【web前端开发教程】

笔记3

1.CSS定位
- relative
- absolute
- fixed
- sticky
- 练习
2.CSS省略器
3.CSSsprite
4.CSS圆角
5.博文尚美练习
6.PC游戏网页简易练习

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;}