html_blog 84-109

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文详细介绍了CSS中的定位技术，包括relative、absolute、fixed和sticky定位的特性和应用场景。通过实例展示了如何使用定位实现下拉菜单、居中布局以及装饰效果。此外，还探讨了CSS雪碧图、圆角设置以及在PC端制作企业类型和游戏类型整页布局的方法，强调了布局、层级控制和响应式设计的重要性。

html84-109

CSS定位
定位实现下拉菜单
6、定位实现居中和装饰
7、CSS添加省略号
8、CSS 雪碧（Sprite）
9、CSS圆角设置
10、PC端企业类型整页制作
11、PC端游戏类型整页制作

CSS定位

1、relative的相对定位

1.position

position特性
css position属性用于指定一个元素在文档中的定位方式。top、right.bottom、left 属性则决定了该元素的最终位置。

position取值
static（默认)
relative
absolute
fixed
sticky

2.relative

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、 top、 right、 bottom是相对于当前元素自身进行偏移的

<style>
    #box1{ width: 100px;height: 100px;background: red ;}
    #box2{ width: 100px;height: 100px;background: blue ; position: relative;left: 100px;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>

在这里插入图片描述

2、absolute绝对定位

特性：
1.使元素完全脱离文档流

#box1{ width: 100px;height: 100px;background: red ;position: absolute;}
#box2{ width: 200px;height: 200px;background: blue ; }

在这里插入图片描述

2.使内联元素支持宽高(让内联具备块特性）


<style>
spanwidth:10opx; height : 10opx; background:red; position: absoluteB
</style>

在这里插入图片描述

3.使块元素默认宽根据内容决定(让块具备内联的特性)

div{background: red; position: absolute;}

在这里插入图片描述

4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档（可视部分）发生偏移（绝对、相对、固定)

#box1{ width: 300px; height: 300px; border:1px black solid;
margin: 200px;}
#box2{width:100px; height:100px; background:red; position: absolute; right:o; botton: 0;}

在这里插入图片描述

3、fixed固定定位（可以用来返回顶部按钮）

1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

4、sticky黏性定位

1.在指定的位置，进行黏性操作。

div{ background: red;position: sticky;top: 0px; }

（当红色块随滚动条上移时，到距离（top）0px时，会固定在当前可视页面不动，而其他元素会随着滚动而动。）
在这里插入图片描述

5.z -index定位层级

后写的层级会更高
1.默认层级为0
2.嵌套时候的层级问题

定位实现下拉菜单

<!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>
    *{ margin: 0;padding: 0;}
    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: white;
        display: none; }
    #menu:hover ul{ display: bolck; }
    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>
        </ul>
   </div>
   <p>测试段落</p>
</body>
</html>

在这里插入图片描述

6、定位实现居中和装饰

 <style>
    #box1{width: 100px; height: 300px; border: 1px black solid; position: relative;}
    #box2{ width: 100px; height: 100px; background: red; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }   
    </style>
</head>
<body>
   <div id="box1">
        <div id="box2"></div>
   </div> 
</body>
</html>

7、CSS添加省略号

width
必须有一个固定的宽
white-space : nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号

8、CSS 雪碧（Sprite）

特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页
面涉及到的所有零星图片都包含到一张大图中去加载。

好处
可以减少图片的质量，网页的图片加载速度快减少图片的请求的次数，加快网页的打开

9、CSS圆角设置

border-radius: 10px(左) 20px(右);
(四个同理)
border-radius: 10px/20px;
(椭圆）

#box{ width:30opx; height:150px; background: red; border-radius: 150px 150px 0 0; }

半圆：四个值后两个设为0，高度改小

10、PC端企业类型整页制作

PC端的布局：
通栏:自适应浏览器的宽度。
版心:固定一个宽度,并且让容器居中。
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>
    <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; 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/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: 26px; 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{ 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{ color: #3f3f3f;}
    #news .news_text p{ color: #a4a4a4; font-size: 12px; line-height: 21px; margin-top: 27px;}
    </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 SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIQN</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 LAST 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>18</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">漳州西恩视觉婚纱摄影网站建设</a></h3>
                            <p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌，由国内著名摄影师冬晖CHAN...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>16</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站数据统计用哪种比较好?</a></h3>
                            <p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具，几乎每个用户的网站程序都会...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>14</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">厦门网站建设服务的内容主要有哪些？</a></h3>
                            <p>大多数用户建网站由于都是头一次接触，对于网站建设并不了解，往往会误认为找网站建设公司建网站...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>12</i>
                            <span>Aug</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> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
            </div>
        </div>
     </div>
</body>
</html>

CSS：

*{ margin: 00; 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: 164px; 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{ margin: 0 10px; color: white;}

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

在这里插入图片描述

11、PC端游戏类型整页制作

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>
    <link rel="stylesheet" href="./css/common.css">
    <style>
    #main{ background:url(./images/bg20190104.jpg) 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;}
    #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/nav_tips.png)no-repeat; 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;}
    #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}   
    
    #banner{ height:276px; background:url( ./images/top.png) no-repeat; margin-top: 20px}
    #banner .banner_left{ width:240px; height:310px; background:url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}
    
    /*CSS3简单的动画*/
    #banner .banner_download :hover p:first-child{ animation:1s upNove;}
    @keyframes upMove{
        0%{transform : translateY ( -40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1;}
    }
    #banner .banner_download :hover p:first-child{ animation:1s downNove;}
    @keyframes downMove{
        0%{transform : translateY ( 40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1;}    
    }
    /*CSS3简单的动画*/
    
    #banner .banner_user div{ width:56px; height:56px; border-radius: 50%; margin:80px auto 0 auto; border :4px #283257 solid; box-sizing: border-box; overflow: hidden;}
    #banner .banner_user img{ box-sizing: border-box;overflow: hidden; }
    #banner .banner_user p{ text-align: center; font-size:12px; color: white; margin-top:25px;}
    #banner .banner_user a{color:#34f1de;}
    
    #banner .banner_list{ width:497px; height:253px; overflow: hidden;margin:13px 0 0 4px;}
    #banner .banner_list_ul{ width: 2000px;}
    #banner .banner_list_ul li{ width:497px; height:253px; float:left;}
    #banner .banner_bottomline{ width:100%; height:37px; background: rgba(0,0,0,.5); border-top:1px #514b55 solid;position: absolute; bottom: 0; left:0;}
    #banner .banner_bottomline_ul{ text-align: center; margin-top: 11px;}
    #banner .banner_bottomline_ul li{ display: inline-block; width:15px; height:15px; background:url(./images/top.png) no-repeat -603px -299px; cursor: pointer;}
    #banner .banner_bottomline_ul li.active{ background-position: -581px -299px;}
    #banner .banner_bottomline_leftbtn, #banner .banner_bottomline_rightbtn{ width:12px; height:22px; position: absolute; top:5px; background:url(./images/top.png) no-repeat; cursor: pointer;}
    #banner .banner_bottomline_leftbtn{ left:5px;background-position: -542px -296px;}
    #banner .banner_bottomline_rightbtn{ right:5px;background-position: -554px -296px;}
    #banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325pX;}
    #banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325pX;}
    #banner .banner_list_lt{ left:-2px; top:-4px; background-position: -621px -299px;}
    #banner .banner_list_rt{ right:-2px; top:-4px; background-position: -634px -299px;}
    #banner .banner_list_rb{ right:-2px; bottom:-5px; background-position: -634px -312px;}
    #banner .banner_list_lb{ left:-2px; bottom:-5px; background-position: -621px -312px;}

    #banner .banner_right{ width:209px; height:255px; position: relative; margin:12px 0 0 12px;}
    #banner .banner_right_lt, #banner .banner_right_rt, #banner .banner_right_rb, #banner .banner_right_lb{ width:15px; height:15px; background:url(./images/top.png) no-repeat; position: absolute;}
    #banner .banner_right_lt{ left:-4px; top:-4px; background-position: -681px -298px;}
    #banner .banner_right_rt{ right :-4px; top:-4px; background-position: -696px -298pX;}
    #banner .banner_right_rb{ right :-4px; bottom:-6px; background-position: -696pX -313px;}
    #banner .banner_right_lb{ left :-4px; bottom:-6px; background-position: -681px -313px;}
    </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="container">
                <div class="nav_logo">
                <a href="#">
                    <img src=". /images/inside_logo.png" alt="QQ飞车" title="QQ飞车">
                </a>
                </div>
            </div>
            <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_zx">
                <dt></dt>
                <dd><a class="hot" href="#">SSC</a></dd>
                <dd><a href="#">谁是车王</a></dd>
                <dd><a href="#">全民争霸赛</a></dd>
            </dl>
            <dl class="nav_zx">
                <dt></dt>
                <dd><a class="hot" href="#">版本专区</a></dd>
                <dd><a href="#">合作专区</a></dd>
                <dd><a href="#">CDK兑换</a></dd>
            </dl>
        </div> 
    </div>
    <div id="link" class="container">
        <a href="#"></a>
    </div>
    <div id="banner" class="container">
        <div class="banner_left l">
            <div class="banner_download">
                <p>下载游戏</p>
                <p>DOWNLOAD</p>
            </div>
            <div class="banner_user">
                <img src="./images/56x56.jpg" alt="">
                <p>欢迎<a href="#">登录</a>。进入飞车世界</P>
            </div>
        </div>
        <div class="banner_center l">
            <div class="banner_list">
                <ul class="banner_list_ul">
                    <li>
                        <a href="#"><img src="首页图片地址1" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="首页图片地址2" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="首页图片地址3" alt=""></a>
                    </li>
                </ul>
                <div class="banner_bottomline">
                    <ul class="banner_bottomline_ul">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="banner_bottomline_leftbtn"></div>
                    <div class="banner_bottomline_rightbtn"></div>
                </div>
                <i class="banner_list_lt"></i>
                <i class="banner_list_rt"></i>
                <i class="banner_list_rb"></i>
                <i class="banner_list_1b"></i>
            </div>
        </div>
        <div class="banner_right l">
            <a href="#"><img src="./images/bebae86c3d1f64d50a53434ed5458d22-80.jpg" alt=""></a>
            <i class="banner_right_lt"></i>
            <i class="banner_right_rt"></i>
            <i class="banner_right_rb"></i>
            <i class="banner_right_1b"></i>
        </div>
    </div>
</body>
</html>

CSS：

*{ 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%;}

.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: -99px; overflow: hidder;}
#head .head_ad{ margin-left: 8px; }
#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 -92px; }
#head .head_menu .head_menu_top{ padding-right:17px; background-position:right -89px; }

在这里插入图片描述