这里写目录标题
1.position定位
1.1 relative相对定位
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.left 、top、 right、 bottom是相对于当前元素自身进行偏移
4.不影响其它元素的布局
1.2absolute绝对定位
1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块的特性）
3.使块元素默认宽根据内容决定（让块具备内联的特性）
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移。（绝对、相对、固定）
1.3 fixed固定定位
1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块的特性）
3.使块元素默认宽根据内容决定（让块具备内联的特性）
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
1.4 sticky黏性定位
在指定的位置进行粘性操作
1.5 z-index定位层级
默认层级为0
嵌套
1.6 定位实现元素居中
1.7 定位实现列表装饰点
2. CSS添加省略号
width ：必须有一个固定的宽
white-space: nowrap 不让内容折行
overflow: hidden 隐藏溢出的内容
text-overflow: ellipsis 添加省略号
3.CSS Sprite
4.CSS圆角
5.PC端布局
通栏：自适应浏览器的宽度
版心：固定一个宽度，并让容器居中。
6.博文尚美首页练习
[COMMON.CSS]
```*{ 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: 0px 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;float: right;}
#foot div span{color: white;margin: 0 10px;float: right;}
.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;}
<!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 o 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;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/graphic1.png);}
#service .service-list li:nth-of-type(3) div{ background-image: url(./images/e-bussiness1.png);}
#service .service-list li:nth-of-type(4) div{ background-image: url(./images/mail1.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 .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{float: left;width:234px ;}
#news dd{float: left;width: 846px;}
#news .news-list{width: 100%;}
#news .news-list li{width: 50%;float: left; margin-bottom: 48px;}
#news .news-date{width: 71px; height: 71px; border: 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 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="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>
<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>
<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> <span>|</span><a href="#">About</a><span>|</span><a href="#">Portfolio</a><span>|</span><a href="#">Contact</a>
</div>
</div>
</div>
</body>
</html>
7.qq飞车首页
在这里插入代码片
<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>
#main{background: url(./images/bg\(1\).webp) no-repeat center 0;min-height: 400px;}
</style>
</head>
<body>
<!-- 腾讯游戏顶部通用 -->
<div id="txtongyong"}
class="wrapper">
<a href="#"><img src="https://game.gtimg.cn/images/js/title/logo.png" alt="" class="txtu1 l"></a>
<a href="#" ><img src="./images/01.png.jpg" alt="" class="txtu2 l"></a>
<div class="head-menu r">
<div class="head-menu-czch l" >
<a href="#">成长守护平台</a>
</div>
<div class="head-menu-top l" >
<a href="#">腾讯游戏排行榜</a>
</div>
</div>
</div>
<!-- 大背景 -->
<div id="main">
<!-- 顶部导航 -->
<div id="nav">
<div id="xiugai" class="wrapper">
<div id="nav_logo" class="l"></div>
<ul class="l xiugai2">
<li id="nav_logo_li" class="l"><a href="#">
<h2>游戏资料</h2>
<p>GAME DATA</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>赛事中心</h2>
<p>RACE</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>活动中心</h2>
<p>EVETN</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>商城专区</h2>
<p>ITEM SHOP</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>视频直播</h2>
<p>VIDEO</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l">
<h2>玩家互动</h2>
<p>HCOMMUNION</p>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l">
<h2>客服中心</h2>
<p>SERVICE</p>
</li>
</ul>
</div>
<!-- 导航下的文字 -->
<!-- 游戏资料 -->
<div id="xiugai3" class="wrapper">
<dl class="nav_zl">
<dt></dt>
<dd><a href="#">新手指引</a></dd>
<dd><a href="#">官方漫画</a></dd>
<dd><a href="#" class="aqq">高清壁纸</a></dd>
<dd><a href="#">游戏下载</a></dd>
<dd><a href="#" class="awx">飞车手游</a></dd>
</dl>
<!-- 赛事中心 -->
<dl class="nav_ss">
<dt></dt>
<dd><a href="#">谁是车王</a></dd>
<dd><a href="#" class="awx">SSC</a></dd>
<dd><a href="#" class="aqq">全国公开赛</a></dd>
</dl>
<!-- 活动中心 -->
<dl class="nav_hd">
<dt></dt>
<dd><a href="#" class="aqq">版本专区</a></dd>
<dd><a href="#" class="awx">活动专区</a></dd>
<dd><a href="#">CDK兑换</a></dd>
</dl>
<!-- 商城专区 -->
<dl class="nav_sc">
<dt></dt>
<dd><a href="#" class="aqq">紫钻专区</a></dd>
<dd><a href="#">道聚城</a></dd>
<dd><a href="#" class="awx">点卷充值</a></dd>
</dl>
<!-- 视频直播 -->
<dl class="nav_sp">
<dt></dt>
<dd><a href="#">教学视频</a></dd>
<dd><a href="#" class="aqq">视频中心</a></dd>
</dl>
<!-- 玩家互动 -->
<dl class="nav_wj">
<dt></dt>
<dd><a href="#">官方论坛</a></dd>
<dd><a href="#">掌上飞车</a></dd>
<dd><a href="#" class="awx">官方微信</a></dd>
<dd><a href="#">官方微博</a></dd>
</dl>
<!-- 客服中心 -->
<dl class="nav_kf">
<dt></dt>
<dd><a href="#">在线客服</a></dd>
<dd><a href="#" class="awx">信用星级</a></dd>
<dd><a href="#">封号查询</a></dd>
<dd><a href="#">密码找回</a></dd>
<dd><a href="#" class="awx">家长监控</a></dd>
<dd><a href="#">防沉迷</a></dd>
<dd><a href="#">安全中心</a></dd>
<dd><a href="#">点亮皇族</a></dd>
</dl>
</div>
<!-- 查看详情 -->
<div id="ckxq" class="wrapper">
<a href="#"></a>
</div>
</div>
<!-- 下部分 -->
<div id="xz" class="wrapper">
<div id="hsxz" class="l">
<a href="#"><img src="https://speed.qq.com/web202204/download.shtml" alt=""></a>
</div>
<p class="p1"><a href="#">下载游戏</a></p>
<div id="lsxz">
<a href="#"><img src="https://speed.qq.com/web202204/download.shtml" alt=""></a>
</div>
<p class="p2"><a href="#">补丁下载</a></p>
<div id="zsxz">
<a href="#"><img src="https://speed.qq.com/act/a20170630zzvip/" alt=""></a>
</div>
<p class="p3"><a href="#">紫钻专区</a></p>
<!-- 登录区域 -->
<div id="dlu" >
<div class="bj">
<!-- 用户头像 -->
<div class="yuan l"> <img src="https://game.gtimg.cn/images/speed/web202204/head.png"></div>
<!-- 文字区域 -->
<div class="text l">
<ul id="dlu_ul" class="l">
<li class="ul_hy l">欢迎登录</li>
<li class="l san">
<h3>魅力值</h3>
<p>0</p>
</li>
<li class="l san">
<h3>荣誉值</h3>
<p>0</p>
</li>
<li class="l san">
<h3>点卷</h3>
<p>0</p>
</li>
</ul>
</div>
</div>
<!-- 服务选项 -->
<div class="batu">
<div class="a1 l"><a href="#"></a></div>
<p class="p1">开通紫钻</p>
<div class="a2 l"><a href="#"></a></div>
<p class="p2">视频专区</p>
<div class="a3 l"><a href="#"></a></div>
<p class="p3">官方论坛</p>
<div class="a4 l"><a href="#"></a></div>
<p class="p4">在线客服</p>
<div class="a5 l"><a href="#"></a></div>
<p class="p5">开通紫钻</p>
<div class="a6 l"><a href="#"></a></div>
<p class="p6">视频专区</p>
<div class="a7 l"><a href="#"></a></div>
<p class="p7">官方论坛</p>
<div class="a8 l"><a href="#"></a></div>
<p class="p8">在线客服</p>
</div>
<!-- 两张二维码 -->
<div class="ewm">
<ul>
<li class="tu1 l"><a href="#"><img src="./images/ewm_l.png" alt=""></a></li>
<li class="text1 l">
<p>掌飞全面升级</p>
<h2>扫码下载</h2>
</li>
<li class="tu2 l"><a href="#"><img src="./images/ewm_r.png" alt=""></a></li>
<li class="text2 l">
<p>公众号送豪利</p>
<h2>扫码关注</h2>
</li>
</ul>
</div>
</div>
<!-- 右边部分 -->
<div id="right" class="r">
<div class="top l">
<ul class="l ul1">
<li class="l li1"><span>活动</span></li>
<li class="l li2" style="margin-left:22px;"><a href="#">正在进行</a></li>
<li class="l li2"><a href="#">免费福利</a></li>
<li class="l li2"><a href="#">商城特惠</a></li>
<li class="l li2"><a href="#">长期活动</a></li>
</ul>
<div class="situ r">
<a href="#" class="az"><img src="./images/左1.png.jpeg" alt=""></a>
<a href="#" class="ay"><img src="./images/左2.png.jpeg" alt=""></a>
<a href="#" class="az"><img src="./images/左3.png.jpeg" alt=""></a>
<a href="#" class="ay"><img src="./images/左4.png.jpeg" alt=""></a>
</div>
</div>
</div>
<div class="footer">
<div id="gfooter" ams="147/35032/m113" dark="0" ieg-logo="">
<p class="copyright_txt">著作权人：腾讯科技（深圳）有限公司 出版单位：深圳市腾讯计算机系统有限公司</p>
<p class="copyright_txt">温馨提示:本游戏适合16岁(含)以上玩家娱乐；请您确定已如实进行实名注册；为了您的健康，请合理控制游戏时间。</p>
<ul class="c footer_tips copyright_txt" style="width: 694px;margin: 0 auto;">
<li>抵制不良游戏</li>
<li>拒绝盗版游戏</li>
<li>注意自我保护</li>
<li>谨防受骗上当</li>
<li>适度游戏益脑</li>
<li>沉迷游戏伤身</li>
<li>合理安排时间</li>
<li>享受健康生活</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
在这里插入代码片
*{margin: 0;padding: 0;box-sizing: border-box;}
ol,ul{list-style: none;}
img{display: block;}
a{text-decoration: none;}
body{font-family: Arial;}
.clear:before,.clear:after{content: " ";display: block;clear: both;}
.l{float: left;}
.r{float: right;}
.wrapper{width: 1500px;margin: 0 auto;}
/* 腾讯顶部通栏 */
#txtongyong{overflow: hidden;height: 50px;}
#txtongyong a .txtu1{margin-left: 250px;}
#txtongyong a .txtu2{margin-left: 30px;}
#txtongyong .head-menu{margin-top: 20px;font-size: 15px;}
#txtongyong .head-menu-top{margin-right:300px; margin-left: 36px;}
/* 顶部导航 */
#main #nav{position: relative;width: 100%;min-height: 340px;overflow: hidden;}
#main #nav .xiugai2{margin-left:35px ;}
#main #nav #nav_logo_li{margin-top: 32px;margin-left: 90px;}
#main #nav #nav_logo_li h2{font-size: 20px;color: white;font-weight: 0;font-family: '宋体';}
#main #nav #nav_logo_li p{font-size: 8px;width: 80px;text-align: center;color: #839481;}
/* 导航下的文字 */
#main #nav #xiugai3{position: relative;}
#main #nav dl{position: absolute;width: 84px;}
#main #nav dl a{position: relative;color: #f1ece3;}
#main #nav dl a:hover{text-decoration: underline;color: rgb(255, 64, 0);}
#main #nav dl .aqq:after{position: absolute;right: -18px;top: -2px;content: ""; display: block;width: 16px;height: 16px;}
#main #nav dd .awx:after{position: absolute;right: -18px;top: -2px;content: "";display: block;width: 16px;height: 16px;}
#main #nav{ height: 90px;}
#main #nav dd{line-height: 30px;text-align: center;font-size: 14px;}
#main #nav .nav_zl{left: 222px;}
#main #nav .nav_ss{left: 400px;}
#main #nav .nav_hd{left: 575px;}
#main #nav .nav_sc{left: 750px;}
#main #nav .nav_sp{left: 929px}
#main #nav .nav_wj{left: 1105px;}
#main #nav .nav_kf{left: 1280px;}
/* 查看详情 */
#ckxq{height: 160px;margin-top: 364px;}
#ckxq a{display: block;width: 100%;height: 100%;}
/* 下载区 */
#xz{overflow: hidden;min-height: 500px;position: relative;}
#xz #hsxz{margin-bottom: 10px;}
#xz .p1{position: absolute;left: 50px;top: 40px;font-size: 50px;font-weight: bold;}
#xz .p1 a{color: #8d5112;}
#xz #lsxz img{
display: block;
position: absolute;left: 316px;}
#xz .p2{position: absolute;left: 333px;top: 28px;font-size: 18px;font-weight: bold;letter-spacing: 1px;}
#xz .p2 a{color: white;}
#xz #zsxz img{display: block;position: absolute;left: 316px;top: 80px;}
#xz .p3{position: absolute;left: 333px;top: 105px;font-size: 18px;font-weight: bold;letter-spacing: 1px;}
#xz .p3 a{color: white;}
/* 登录区域 */
#xz #dlu{margin-top: 160px;width: 431px;min-height: 391p}
#xz #dlu .bj{overflow: hidden;width: 431px;height: 127px;background-color:white;}
#xz #dlu .bj .yuan{margin-top: 22px;margin-left: 30px;width: 76px;height: 76px;border-radius: 50px;background-color: white;}
#xz #dlu .text #dlu_ul{text-align: center;}
#xz #dlu .text .ul_hy{color: rgb(18, 177, 177);font-size: 20px;margin-left: 12px;line-height: 127px;}
#xz #dlu .text .san{margin-left: 24px;margin-top: 22px;line-height: 40px;color: #839481;
font-weight: 0;font-size: 15px;}
#xz #dlu .batu{position: relative;overflow: hidden;width: 431px;height: 163px;}
#xz #dlu .batu a{display: block;width: 100%;height: 100%;text-indent: -9999px;overflow: hidden;}
#xz #dlu .batu .a1{margin-top: 25px;margin-left: 64px;width: 34px;height: 24px;}
#xz #dlu .batu .a2{margin-top: 25px;margin-left: 64px;
width: 26px;height: 21px;}
#xz #dlu .batu .a3{margin-top: 25px;margin-left: 64px;width: 26px;height: 24px;}
#xz #dlu .batu .a4{margin-top: 25px;margin-left: 64px;width: 25px;height: 25px;}
#xz #dlu .batu .a5{margin-top: 50px;margin-left: 64px;width: 34px;height: 24px;}
#xz #dlu .batu .a6{margin-top: 50px;margin-left: 64px;width: 26px;height: 21px;}
#xz #dlu .batu .a7{margin-top: 50px;margin-left: 64px;width: 26px;height: 24px;}
#xz #dlu .batu .a8{margin-top: 50px;margin-left: 64px;width: 25px;height: 25px;}
#xz #dlu .batu .p1{position: absolute;left: 52px;top: 60px;width: 60px;line-height: 20px;font-size: 14p}
#xz #dlu .batu .p2{
position: absolute;left: 150px;top: 60px;width: 60px;line-height: 20px;font-size: 14p}
#xz #dlu .batu .p3{position: absolute;left: 239px;top: 60px;width: 60px;line-height: 20px;font-size: 14p}
#xz #dlu .batu .p4{position: absolute;left: 328px;top: 60px;width: 60px;line-height: 20px;font-size: 14p}
#xz #dlu .batu .p5{position: absolute;left: 52px;top: 135px;width: 60px;line-height: 20px;font-size: 14p}
#xz #dlu .batu .p6{position: absolute;left: 150px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;}
#xz #dlu .batu .p7{position: absolute;left: 239px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;}
#xz #dlu .batu .p8{position: absolute;left: 328px;top: 135px;width: 60px;line-height: 20px;font-size: 14px;}
#xz #dlu .ewm{width: 431px;height: 130px;background-color: #e8eff2;}
#xz #dlu .ewm .tu1{margin-top: 23px;margin-left:10px;}
#xz #dlu .ewm .text1{margin-top: 40px;margin-left: 10px;}
#xz #dlu .ewm .text1 p{font-size: 16px;color: #3a94dd;}
#xz #dlu .ewm .text1 h2{font-size: 24px;color: #9da7c5;}
#xz #dlu .ewm .tu2{margin-top: 23px;margin-left:12px;}
#xz #dlu .ewm .text2{margin-top: 40px;margin-left: 10px;}
#xz #dlu .ewm .text2 p{font-size: 16px;color: #3a94dd;}
#xz #dlu .ewm .text2 h2{font-size: 24px;color: #9da7c5;}
/* 右边区域 */
#xz #right{position: absolute;right: 0;top: 0;width: 1050px;height: 581px;/* background-color: pink; */overflow: hidden;}
#xz #right .ul1{width: 1050px;margin-bottom: 10px;}
#xz #right .li1{margin-left: 30px;height: 55px;border-left:3px solid #e98e1f ;font-size: 30px;line-height: 55px;}
#xz #right .li1 span{margin-left: 10px;}
#xz #right .li2{width: 148px;height: 55px;font-size: 20px;/* margin-left: 50px; */line-height: 55px;text-align: center;border-bottom:2px solid #3a94dd;}
#xz #right .li2 a:hover{color: #3a94dd;font-weight: bold;}
#xz #right .li2 a{color: gray;}
#xz #right .li3{width: 328px;height: 55px;font: 16px;line-height: 55px;margin-right: 5px;border-bottom:2px solid #3a94dd;}
#xz #right .li3 span{color: gray;}
#xz #right .situ a{float: left;display: block;margin-bottom: 10px;}
#xz #right .situ .az{margin-left: 135px;}
#xz #right .situ .ay{margin-left: 15px;}
.footer_wp:after {content: '\20';display: block;height: 0;clear: both;}
.foot{color: #717b87 !important;}
.footer_wp {*zoom: 1;}
.footer a:hover {color: #A5A2A5;}
#gfooter a:hover {color: #A5A2A5;}
.footer {padding-top: 100px;}
.footer_wp {margin: 0 auto;width: 1000px;padding: 0 0 30px;}
#gfooter .foot {margin: 0 auto;width: 1000px;padding: 0 0 30px;background: none}
.footer_links_area {float: left;padding-left: 4px;line-height: 1.8}
.footer_links_area span {padding: 0 6px}
.fd-line {display: inline-block;margin: 0 7px 0;*margin-bottom: 7px;margin-bottom: 0\0;width: 1px;height: 6px;overflow: hidden;background: #A5A2A5}
.copyright_txt{font-size: 12px;color: #717b87;line-height: 20px;}
.copyright_zh a,.link_map a,.copyright_public a,.copyright_private{font-size: 12px !important;color: #717b87 !important;line-height: 20px !important;}
.foot{min-width: 1360px !important;}
.foot_cpright{padding: 46px 0 0!important;}
#gfooter{background: #f0f0f0;}
.footer_tips li{float: left;margin-left: 5px;}
.footer_tips li:first-child{margin-left: 0;}
.foot_left{margin: 10px 0 0 23px;}
.foot_lefts{margin-top: 30px;}
.foot_links .link_map span, .foot_links .link_map a{color: #717b87;}
扫一扫
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
