第四周笔记
48.position定位（K84-K88）
1.position特性
a. css position属性用于指定一个元素在文档中的定位方式。
b. top、right、bottom、left属性则决定了该元素的最终位置
2.position取值
- staic（默认）
- relative（相对定位）
a. 如果没有定位偏移量，对元素本身没有任何影响
b. 不使元素脱离文档流
c. 不影响其他元素布局
d.left、top、right、bottom是相对于当前元素进行偏移的
例题：
<style>#box1{ width: 100px; height: 100px; background: red;}#box2{ width: 100px; height: 100px; background: blue;}#box3{ width: 100px; height: 100px; background: yellow;}</style> </head> <body><div id="box1"></div><div id="box2"></div><div id="box3"></div> </body>移动：
#box2{ width: 100px; height: 100px; background: blue; margin-left: 100px; margin-top: 100px;}变：
#box3{ width: 100px; height: 100px; background: yellow; margin-top: -100px;}优化：
#box2{ width: 100px; height: 100px; background: blue; position: relative;left: 100px; top: 100px;}注：尝试无left则蓝块覆盖下面的黄块
- absolute（绝对定位）
a.使元素完全脱离文档流
b.使内联元素支持宽高（让内联具备块属性）
c.使块元素默认宽根据内容决定（让块具备内联属性）
d.如定位祖先元素相对其偏移，无祖元素相对整个文档偏移（绝对、相对、固定）
原：
#box1{ width: 100px; height: 100px; background: red;}#box2{ width: 200px; height: 200px; background: blue;}</style> </head> <body><div id="box1"></div><div id="box2"></div>在一起：
#box1{ width: 100px; height: 100px; background: red; position: absolute;}原：
span{ width: 100px; height: 100px; background: red;}</style> </head> <body><span>这是一个内联</span>变块块：
span{ width: 100px; height: 100px; background: red;position: absolute;}原：
div{ background: red;}</style> </head> <body><div>这是一个块</div>变内联：
div{ background: red; position: absolute;}原：
#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>相对框框（似乎没变的样子）：
#box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}#box2{ width: 100px; height: 100px; background: red;position: absolute;left: 0; top: 0;}注：上position确定祖先元素，下position：absolute进行变换，若上无则以显示界面为祖先元素
- fixed（固定定位）
a.使元素完全脱离文档流
b.使内联元素支持宽高（让内联元素具备块属性）
c.使块元素默认宽高根据内容决定（让块具备内联的特性）
d.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
形如：
注：提了一嘴返回顶部，但没有详细操作- sticky（粘性定位）
a.在指定位置进行粘性操作
原：
body{ height: 2000px;}div{ background: green; position: sticky;}</style> </head> <body><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><div>这是医疗小车</div><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p><p>铃兰小姐永远的光</p>增加粘性定位：
div{ background: green; position: sticky; top: 100px;}注：在添加top：X；之后，有了相对界面的定位
- z-index定位层级
a.默认层级为0
b.嵌套时候的层级问题
原：
#box1{ width: 100px; height: 100px; background: red; position: absolute;}#box2{ width: 100px; height: 100px; background: blue; 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;}注：数字X越大，层级优先级越大，可用负数
嵌套时：
#parent{ width: 100px; height: 100px; border: 1px black solid; position: absolute;z-index: -1;}#box1{ width: 100px; height: 100px; background: red; position: absolute; z-index: 1;}#box2{ width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px;z-index: 0;}</style> </head> <body><div id="parent"><div id="box1"></div></div><div id="box2"></div>注：嵌套时，嵌套外部与下行div进行index比较，若外部无index，则内部与下行比较
3.练习：模拟可露希尔下拉菜单（K87）速写：li{内容}*x
step1：
*{ margin: 0; padding: 0;}/*去默认样式 */ul{ list-style:none ;}#menu{ width: 100px; height: 30px; margin: 20px auto; border: 1px black solid;}</style> </head> <body><div id="menu">可露希尔推荐<ul><li>组合包1</li><li>组合包2</li><li>组合包3</li><li>组合包4</li></ul></div><p>源石礼包源石礼包源石礼包源石礼包源石礼包源石礼包</p> </body>step2：
*{ margin: 0; padding: 0;}/*去默认样式 */ul{ list-style:none ;}#menu{ width: 100px; height: 30px; margin: 20px auto; border: 1px black solid; position: relative;}/*加相对定位对menu*/#menu ul{ width: 100px; border: 1px black solid; background: white; position: absolute; left: -1px; top: 30px; }/*加绝对定位后相对于整个页面偏移*/p{ text-align: center;}/*段落居中*/step3（且鼠标未上置时折叠）：
*{ margin: 0; padding: 0;}/*去默认样式 */ul{ list-style:none ;}#menu{ width: 100px; height: 30px; margin: 20px auto; border: 1px black solid; position: relative;}/*加相对定位对menu*/#menu ul{ width: 100px; border: 1px black solid; background: white; position: absolute; left: -1px; top: 30px; display: none; }/*加绝对定位后相对于整个页面偏移*/#menu:hover ul { display: block;}#menu ul li:hover{ background: gray;}p{ text-align: center;}/*段落居中*/4.练习：定位实现元素居中（K88）
step1：
<style>#box1{ width: 300px; height: 300px; border: 1px black solid; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: absolute;}</style> </head> <body><div id="box1"><div id="box2"></div></div> </body>step2：
#box2{ width: 100px; height: 100px; background: red; position: absolute; left: 50%; top: 50%;margin: -50px 0 0 -50px; }5.定位实现列表的装饰点（K88）详见视频
简要操作：
<style>#main ul li{padding-left: 18px; position: relative;}#main ul li:before{ content: ""; display: block; width: 3px; background: red;position: absolute; left: 8px; top: 50%; margin-top: -2px; }</style>49.CSS小操作（K89-K93）
1.CSS添加省略号
- width 必须有一个固定的宽
#content{ width: 200px; border: 1px black solid;}</style> </head> <body><div id="content">达不溜达不溜达不溜达不溜达不溜达不溜</div>- white-space：nowrap 不让内容折行
#content{ width: 200px; border: 1px black solid; white-space: nowrap;}- overflow：hidden 隐藏溢出内容
#content{ width: 200px; border: 1px black solid; white-space: nowrap; overflow: hidden;}- text-overflow：ellipsis 添加省略号
#content{ width: 200px; border: 1px black solid; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;注：对汉字文本生效，英文暂时无效
2.CSS Sprite
a.特性：
CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
b.好处
1）可以减少图片的质量，网页的图片加载速度快
2）减少图片的请求次数，加快网页的打开
3.CSS圆角- border-radius 给标签添加圆角 原： 
#box{ width: 200px; height: 200px; background: red;}</style> </head> <body><div id="box"></div>添加圆角：
#box{ width: 200px; height: 200px; background: red; border-radius: 20px;}注：圆角半径大小<=块半边长,也可使用百分比，可设置两值，为对角变换；四值顺时针指向；x/X为椭圆
半圆：
#box{ width: 300px; height: 150px; background: red; border-radius: 150px 150px 0 0;}4.制作小页面（K92-K99）
a.PC端的布局
1）通栏：自适应浏览器宽度
2）版心：固定一个宽度，并且让内容居中
step1：上界面
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: white;}</style> </head> <body><div id="head" class="container"><div class="head_logo l"><a href="#"><img src="./images/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="banner" 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> </body> </html>step2：短小的共用内容
#service{ overflow: hidden; min-height: 407px;}<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR SERVICES</p></div></div>.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 7px;} .area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}step3：小贴图和文字（服务范围）
<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: 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; color: #6d6d6d; line-height: 22px;}</style> </head> <body><div id="head" class="container"><div class="head_logo l"><a href="#"><img src="./images/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="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></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> </body>step4：小图文字进行时（客户案例）
#case{ background: #f8f8f8;}#case .container{ min-height: 460px; overflow: hidden;}#case .area_title{ margin-top: 55px;}#case .area_title h2{ color: #66c5b4;}#case .csae_list{ margin-top: 28px;}#case .csae_list li{ float: left; width: 340px; margin: 0 10px;}#case .csae_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 .csae_btn a{ display: block; width: 100%; height: 100%; color: white;}<div class="container-fluid"><!--通栏--><div id="case" 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="csae_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="csae_btn"><a href="#">VIEW MORE</a></div></div></div>step5：最最最后的变形文字图片（最新资讯）
#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_text h3 a{ color: #3f3f3f;}#news .news_text p{ color: #a4a4a4; font-size: 12px; line-height: 21px; margin-top: 17px;}<div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>THE 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>step6：黄昏，通栏嵌套版心
<!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: 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; 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: #66c5b4;}#case .csae_list{ margin-top: 28px;}#case .csae_list li{ float: left; width: 340px; margin: 0 10px;}#case .csae_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 .csae_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_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="./images/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="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></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 id="case" 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="csae_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="csae_btn"><a href="#">VIEW MORE</a></div></div></div><div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>THE 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></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>*{ 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; 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 7px; font-weight: normal;} .area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}50.游戏界面制作（K100-K108）
step1：common制作
*{ 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%;}step2：头标
<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/QQ截图20221117123429.png" 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>#head{background: url('../images/xt.png') repeat-x;} #head .container{ height:41px} #head .head_logo{ width: 220px; height: 41px; background: url(../images/logotx.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/yq.png) no-repeat} #head .head_menu .menu_menu_czsh{ margin-left: 26px; padding-left: 20px; background-position: left -93px;} #head .head_menu .head_menu_top{margin-right: 17px; background-position: right -89px;}step3：大背景铺设
<style>#main{ background: url(./images/datu.png) 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;}#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/QQ截图20221117123429.png" 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/i;ogo.png" alt="QQ飞车" title="QQ飞车"></a></div></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><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><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>step4：文字添加
<style>#main{ background: url(./images/datu.png) 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;}#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -9999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after{ content: "";display: block; width: 12px; height: 12px; background: url(./images/bzd.png) no-repeat 0 -12px;position: absolute; right: -15px; top: 0;}#nav dd a.new:after{ content: "";display: block; width: 12px; height: 12px; background: url(./images/bzd.png) no-repeat 0 0;}#nav .nav_index{ width: 65px; left: 0; position: absolute; right: -15px; top: 0;}#nav .nav_zl{width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}</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/QQ截图20221117123429.png" 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><div class="nav_logo"><a href="#"><img src="./images/i;ogo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页 </a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a class="hot" >SSC</a></dd><dd><a href="#">谁是车王</a></dd><dd><a href="#">全面争霸赛</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a class="hot" >版本专区</a></dd><dd><a href="#">合作专区</a></dd><dd><a href="#">CDK兑换</a></dd></dl></div></div>step5：优化代码，添加链接
#main{ background: url(./images/datu.png) no-repeat center 0;}#nav{ background: url(./images/nav_down_re.png) repeat-x , url(./images/nav.png) no-repeat center 0;}#nav .container{ min-height: 236px; overflow: hidden;} #nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -9999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after,#nav dd a.new:after{ content: "";display: block; width: 12px; height: 12px; background: url(./images/bzd.png);position: absolute; right: -15px; top: 0;}#nav dd a.hot:after{background-position: 0 -12px;}#nav dd a.new:after{background-position: 0 0;}#nav .nav_index{ width: 65px; left: 0; position: absolute; right: -15px; top: 0;}#nav .nav_zl{width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}#link{ height: 175px; }#link a{ width: 463px; height: 100%; display: block; margin: 0 auto;}
