Html、CSS 学习 4.0

O_oregou

已于 2022-12-28 19:47:15 修改

阅读量1k

点赞数 1

文章标签：学习 css

于 2022-11-14 21:37:54 首次发布

本文链接：https://blog.csdn.net/o_osange/article/details/127685673

版权

1.position定位

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

position取值：

1.static：静态定位（默认）

2.relative：相对定位

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

例：使用margin：

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;}
        .div2{width: 100px;height: 100px;background-color: blue;margin-left: 100px;margin-top: 100px;}
        .div3{width: 100px;height: 100px;background-color: yellow;margin-top: -100px;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

例：使用relative：

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;}
        .div2{width: 100px;height: 100px;background-color: blue;position: relative;left: 100px;top: 100px;}
        .div3{width: 100px;height: 100px;background-color: yellow;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

在这里插入图片描述

3.absolute：绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于对位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

例：使用float：

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;float: left;}
        .div2{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

例：使用absolute：

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;position: absolute;}
        .div2{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

在这里插入图片描述

<head>
    <style>
        .div1{width: 200px;height: 200px;background-color: red;position: absolute;}
        .div2{width: 400px;height: 400px;background-color: blue;}
        span{width: 50px;height: 50px;background-color: aqua;position: absolute;}
        .div3{height: 50px;background-color: green;position: absolute;}
    </style>
</head>
<body>
    <div class="div1"><span>这是一个内联</span></div>
    <div class="div2"></div>
    <div class="div3">这是一个块</div>
</body>

在这里插入图片描述
若父级没有定位元素：

<head>
    <style>
        .div1{width: 300px;height: 300px;border: 1px solid red;margin: 100px;}
        .div2{width: 100px;height: 100px;background-color: aqua;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

在这里插入图片描述
若父级有定位元素：

<head>
    <style>
        .div1{width: 300px;height: 300px;border: 1px solid red; position: relative;left: 100px;top: 100px;}
        .div2{width: 100px;height: 100px;background-color: aqua;position: absolute;left: 0;bottom: 0;}
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

在这里插入图片描述

4.fixed：固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
▲注意：fixed只相对于整个文档发生偏移

<head>
    <style>
        body{height: 3000px;background-color: pink;}
        .div1{width: 100px;height: 100px;background-color: red;}
        button{position: fixed;right: 0;top: 200px;}
    </style>
</head>
<body>
    <div class="div1"><span id="top">顶部</span></div>
    <button><a href="#top">返回顶部</a></button>
</body>

在这里插入图片描述

5.sticky：粘性定位

在指定位置，进行粘性操作

<head>
    <style>
        body{height: 3000px;}
        .div1{background-color: aqua;position: sticky;top: 50px;}
    </style>
</head>
<body>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <div class="div1">这是一个块</div>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
</body>

在这里插入图片描述

6.z-index：定位层级

▲注意：z-index进行比较时先比较同级容器的层级,若同级容器无z-index则会与其子级进行比较z-index

<head>
    <style>
        .div1{width: 100px;height: 100px;border: 5px solid black;position: absolute; z-index: 2;}
        .div2{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 0;}
        .div3{width: 100px;height: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;z-index: 1;}
    </style>

</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
</body>

在这里插入图片描述

2.CSS添加省略号

步骤：

①width

必须有一个固定的宽

②white-space：nowrap

不让内容折行

③overflow：hidden

隐藏溢出内容

④text-overflow：ellipsis

添加省略号

3.CSS sprite(精灵)

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

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

 <head>
    <style>
        .div1{width: 360px;height: 160px;background:url(../图片/22.11.23/长截屏.jpg)
        no-repeat right -3480px;border: 1px solid black;}

    </style>
</head>
<body>
    <div class="div1"></div>
</body>

在这里插入图片描述

4.CSS圆角

border-radius

给标签添加圆角
注意：
设置一个值：四个角
设置两个值：左上右下、右上左下
设置四个值：左上、右上、右下、左下

<head>
    <style>
        .div1{width: 200px;height: 200px;background-color: aqua;border-radius:50px 80px ;}
    </style>

</head>
<body>
    <div class="div1">
    </div>
</body>

在这里插入图片描述
还可以设置成为椭圆角
注意： / 前面为椭圆的x长度，/ 后面为椭圆y的长度

<head>
    <style>
        .div1{width: 200px;height: 200px;background-color: aqua;border-radius:50px/80px ;}
    </style>
</head>
<body>
    <div class="div1">
    </div>
</body>

在这里插入图片描述练习：制作一个半圆

<head>
    <style>
        .div1{width: 300px;height: 150px;background-color: aqua;border-radius:150px 150px 0 0 ;}
    </style>
</head>
<body>
    <div class="div1">
    </div>
</body>

在这里插入图片描述

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/样式.css">
    
</head>
<body>
    <!-- head -->
    <div id="head" class="container">
        <div class="logo l">
            <a href="#"><img src="../img/logo.png" alt="博文尚美"></a>
        </div>
        <ul class="menu">
            <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>

    <!-- book -->
    <div id="book">
        <ul class="list">
            <li style="background-image: url(../img/书.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="btn">
            <li class="lix"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- 服务范围 -->
    <div id="fuwu" class="wrapper">
        <div id="heng" >
            <h2>服务范围</h2>
            <p>OUR SERVICES</p>
        </div>
        <div id="tu1">
            <img src="../img/电脑.png" alt="">
            <h2>1.WEB DESIGN</h2>
            <ul>
                <li class="li2">企业品牌网站设计/手机网站制作</li>
                <li class="li3">动画网站创意设计</li>
            </ul>
        </div>
        <div id="tu2">
            <img src="../img/圆圈图片.png" alt="">
            <h2>2.GRAPHIC DESIGN</h2>
            <ul>
                <li class="li2">标志LOGO设计/产品宣传册设计</li>
                <li class="li3">企业广告/海报设计</li>
            </ul>
            </div>
        <div id="tu3">
            <img src="../img/购物车.png" alt="">
            <h2>3.E-BUSINESS PLAN</h2>
            <ul>
                <li class="li2">淘宝/天猫装修设计及运营推广</li>
                <li class="li3">企业微博、微信营销</li>
            </ul>
        </div>
        <div id="tu4">
            <img src="../img/信件.png" alt="">
            <h2>4.MALBOXAGENTS</h2>
            <ul>
                <li class="li2">腾讯/网易企业邮箱品牌代理</li>
                <li class="li3">个性化邮箱定制开发</li>
            </ul>
        </div>
    </div>

    <!-- 客户案例 -->
    <div id="anli" class="wrapper">
        <div id="heng">
            <h2><span>{ 客户案例 }</span></h2>
            <p>With the best prolessional technology, to design the best innovative web site</p>
        </div>
        <div id="kehu">
            <ul>
                <li><a href="#"><img src="../img/戴墨镜.png" alt=""></a></li>
                <li><a href="#"><img src="../img/椅子落日.png" alt=""></a></li>
                <li><a href="#"><img src="../img/蓝绿.png" alt=""></a></li>
            </ul>
        </div>
        <button><span>VIEW MORE</span></button>
    </div>

    <!-- 最新咨询 -->
    <div id="zixun" class="container">
        <div id="heng" class="xia">
            <h2>最新咨询</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <div id="zixuntu">
            <img src="../img/白色.png" alt="">
        </div>

        <div id="jan">
            <div class="yue">
                <h2>09</h2>
                <p>Jan</p>
            </div>
            <div class="text">
                    <h2>
                        网站排名进入前三的技巧
                    </h2>
                    <p>
                        很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111
                    </p>
            </div>
        </div>
        <div id="jan">
            <div class="yue">
                <h2>08</h2>
                <p>Jan</p>
            </div>
            <div class="text">
                <h2>
                    网站排名进入前三的技巧
                </h2>
                <p>
                    很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111
                </p>
            </div>
        </div>
        <div id="jan">
            <div class="yue">
                <h2>07</h2>
                <p>Jan</p>
            </div>
            <div class="text">
                <h2>
                    网站排名进入前三的技巧
                </h2>
                <p>
                    很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111
                </p>
            </div>
        </div>
        <div id="jan">
            <div class="yue">
                <h2>06</h2>
                <p>Jan</p>
            </div>
            <div class="text">
                <h2>
                    网站排名进入前三的技巧
                </h2>
                <p>
                    很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么优化1111111111111111111111111111111111111111111111111111111111111111
                </p>
            </div>
        </div>




    </div>

    <!-- 底部 -->
    <div id="bottom" class="wrapper">
        <div id="nei" class="container">
            <p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
            <ul>
                <li><a href="#" class="wu">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>

    </div>

</body>
</html>

css：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,ul,li{
    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;}

 /* 版心 */
 .container{
    width: 1080px;
    margin: 0 auto;
    position: relative;
 }

 .wrapper{
    width: 1352px;
    margin: 0 auto;
 }

 /* 通栏 */
 .fluid{
    width: 100%;
}


/* head */
#head{
    height: 82px;

    line-height: 82px;
}

#head .logo{
    margin-top: 19px;
}

#head .menu{
    float: right;
    font-size: 17px;
}

#head .menu li{
    float: right;
    margin-left: 50px;
}

#head .menu li a{
    color: #646464;
}



/* book */
#book{
    position: relative;

}

#book .list{
    position: relative;
    width: 100%;
    height: 469px;
}

#book .list li {
    position: absolute;left: 0;top: 0;
    height: 100%;
    width: 100%;
    background:center 0 no-repeat;
}

#book .btn{
    width: 100%;
    position: absolute;bottom: 19px;
    text-align: center;
}

#book .btn li{
    display: inline-block;
    margin-right: 11px;
    width: 12px;
    height: 12px;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
}

#book .btn .lix{
    background-color: aliceblue;
}



/* 服务范围 */
#fuwu{
    overflow: hidden;/* 不加这个会出现下面 #heng 的 margin-top 传递 */
    height: 408px;
    /* width: 1352px; */
    /* background-color: pink; */
}

#heng{
    margin-top: 60px;
    text-align: center;
    /* background-color: pink; */
}

#heng h2{
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: normal;
    color: #363636;
    background: url(../img/两横.png) no-repeat center 5px;
}

#heng p{
    font-size: 14px;
    margin-top: 10px;
    color: #9f9f9f;
}

/* 四张服务范围图片 */
/* (背景的装饰，即可能长期不变的图片使用background-img) */
/* (用于展示的图片，即短期可能发生变动的图片用img) */
#fuwu #tu1{ 
    float: left;
    width: 210px;
    height: 210px;
    /* background-color: pink; */
    margin-top: 40px;
    margin-right: 70px;
    margin-left: 151px;

    text-align: center;
}
#fuwu #tu1 img{
    margin: 0 auto;
}
#fuwu #tu1 h2{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
}
#fuwu #tu1 .li2{
    margin-top: 10px;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}
#fuwu #tu1 .li3{
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}

#fuwu #tu2{ 
    float: left;
    width: 210px;
    height: 210px;
    /* background-color: pink; */
    margin-right: 70px;
    margin-top: 40px;

    text-align: center;
}
#fuwu #tu2 img{
    margin: 0 auto;
}
#fuwu #tu2 h2{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
}
#fuwu #tu2 .li2{
    margin-top: 10px;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}
#fuwu #tu2 .li3{
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}

#fuwu #tu3{ 
    float: left;
    width: 210px;
    height: 210px;
    /* background-color: pink; */
    margin-right: 70px;
    margin-top: 40px;

    text-align: center;
}
#fuwu #tu3 img{
    margin: 0 auto;
}
#fuwu #tu3 h2{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
}
#fuwu #tu3 .li2{
    margin-top: 10px;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}
#fuwu #tu3 .li3{
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}

#fuwu #tu4{ 
    float: left;
    width: 210px;
    height: 210px;
    /* background-color: pink; */
    margin-top: 40px;

    text-align: center;
}
#fuwu #tu4 img{
    margin: 0 auto;
}
#fuwu #tu4 h2{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
}
#fuwu #tu4 .li2{
    margin-top: 10px;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}
#fuwu #tu4 .li3{
    font-size: 14px;
    color: #6d6d6d;
    line-height: 22px;
}



/* 客户案例 */
#anli{
    position: relative;
    overflow: hidden;
    height: 460px;
    background: rgb(245, 243, 243);
    background-color: #f8f8f8;
}

#anli #heng h2 span{
    color: #66c5b4;
}

#anli #kehu ul{
    float: left;
    margin-top: 38px;
    margin-left: 167px;
}

#anli #kehu li{
    float: left;
    margin-right: 20px;
}

#anli button{
    position: absolute;bottom: 50px;left: 590px;
    width: 176px;
    height: 37px;
    border:3px solid #66c5b4;
    border-radius: 40px;
    background-color: #66c5b4;
    cursor: pointer;
}

#anli button span{
    color: white;
    font-size: 14px;
}



/* 最新咨询 */
#zixun{
    overflow: hidden;
    height: 450px;
    /* background-color: pink; */
}

#zixun .xia{
    margin-bottom: 65px;
}

#zixun #zixuntu{
    float: left;

}

#zixun #jan{
    float: left;
    margin-left: 10px;
    margin-bottom: 16px;
    width: 400px;
    height: 90px;
    /* background-color: #363636; */
}
#zixun #jan .yue{
    float: left;
    width: 65px;
    height: 100%;
    border-right:2px solid rgb(233, 227, 227) ;
    /* background-color: green; */

}
#zixun #jan .yue h2{
    text-align: center;
    line-height: 60px;
    font-size: 39px;
    font-weight: bold;
    color: #66c5b4;
}
#zixun #jan .yue p{
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    color:#9f9f9f;
}
#zixun #jan .text{
    float: left;
    margin-left: 20px;
    /* background-color: red; */
}
#zixun #jan .text h2{
    font-size: 18px;
}
#zixun #jan .text p{
    margin-top: 20px;
    width: 300px;
    height: 40px;
    font-size: 14px;
    color: #9f9f9f;

    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}



/* 底部 */
#bottom{

    height: 50px;
    /* line-height: 50px; */
    background-color: #5FBAB5;
}

#bottom #nei{

    height: 50px;
    line-height: 50px;
}

#bottom #nei p{
    float: left;
    font-size: 14px;
    color: white;
}

#bottom #nei ul{
    float: right;
}

#bottom #nei ul li{
    float: right;
    text-align: center;
}

#bottom #nei ul li a{
    border-right:1px solid white ;
    padding: 0 20px;
    font-size: 10px;
    color: white;
}
#bottom #nei ul li .wu{
    border: 0;
}

效果展示：

在这里插入图片描述

6.第二个练习：QQ飞车官网（类似）

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/官网.css">
    <style>
        #main{background: url(./img/背景.jpg) no-repeat center 0;min-height: 0px;}
    </style>
</head>
<body>
    <!-- 腾讯游戏顶部通用 -->
    <div id="txtongyong" class="wrapper">
        <a href="#"><img src="./img/腾讯游戏.png" alt="" class="txtu1 l"></a>
        <a href="#" ><img src="./img/风起云巅.png" alt="" class="txtu2 l"></a>
        <a href="#" ><img src="./img/成长守护平台.png" alt="" class="txtu3 l"></a>
    </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="./img/下载（黄色按钮）.png" alt=""></a>
                </div>
                    <p class="p1"><a href="#">下载游戏</a></p>
                <div id="lsxz">
                <a href="#"><img src="./img/下载（蓝色）.png" alt=""></a>
                </div>
                    <p class="p2"><a href="#">补丁下载</a></p>
                <div id="zsxz">
                    <a href="#"><img src="./img/紫钻（紫色）.png" alt=""></a>
                </div>
                    <p class="p3"><a href="#">紫钻专区</a></p>
            
                <!-- 登录区域 -->
                <div id="dlu" >
                    <div class="bj">
                        <!-- 用户头像 -->
                        <div class="yuan l"><!-- <img src="./img/用户.png" alt="" width="76px" height="76px"> --></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="./img/二维码.png" alt=""></a></li>
                            <li class="text1 l">
                                <p>掌飞全面升级</p>
                                <h2>扫码下载</h2>
                            </li>
                            <li class="tu2 l"><a href="#"><img src="./img/二维码.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>
                            <li class="r li3"><a href="#"><span class="r">更多 +</span></a></li>
                        </ul>
                        <div class="situ r">
                            <a href="#" class="az"><img src="./img/正在进行1.jpg" alt=""></a>
                            <a href="#" class="ay"><img src="./img/正在进行2.jpg" alt=""></a>
                            <a href="#" class="az"><img src="./img/正在进行3.jpg" alt=""></a>
                            <a href="#" class="ay"><img src="./img/正在进行4.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</body>
</html>

css：

*{
    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 a .txtu3{
    margin-left: 320px;
    margin-top: 14px;
}

/* 顶部导航 */


#main #nav{
    position: relative;
    width: 100%;
    min-height: 340px;
    /* padding-left:310px ; */
    background: url(../img/nav.png) repeat-x;
    overflow: hidden;
}

#main #nav #nav_logo{
    margin-top: 13px;
    width: 102px;
    height: 75px;
    background: url(../img/logo.png);
}

#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;
    background: url(../img/雪碧图.png) no-repeat -282px -73px;
}
#main #nav dd .awx:after{
    position: absolute;right: -18px;top: -2px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/雪碧图.png) no-repeat -261px -73px;
}
#main #nav dt{
    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;
    /* background-color: pink; */
    margin-top: 364px;
}

#ckxq a{
    display: block;
    width: 100%;
    height: 100%;
}




/* 下载区 */
/* #main2{
    overflow: hidden;
} */
#xz{
    overflow: hidden;
    min-height: 500px;
    /* background-color: pink; */
    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: 391px;

}

#xz #dlu .bj{
    overflow: hidden;
    width: 431px;
    height: 127px;
    background: url(../img/登录背景框框.png) no-repeat;
}

#xz #dlu .bj .yuan{
    margin-top: 22px;
    margin-left: 30px;
    width: 76px;
    height: 76px;
    border-radius: 50px;
    /* background: url(../img/用户.png); */
    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;
    /* background-color: pink; */
}

#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;
    background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a2{
    margin-top: 25px;
    margin-left: 64px;
    width: 26px;
    height: 21px;
    background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a3{
    margin-top: 25px;
    margin-left: 64px;
    width: 26px;
    height: 24px;
    background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a4{
    margin-top: 25px;
    margin-left: 64px;
    width: 25px;
    height: 25px;
    background:url(../img/4.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a5{
    margin-top: 50px;
    margin-left: 64px;
    width: 34px;
    height: 24px;
    background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a6{
    margin-top: 50px;
    margin-left: 64px;
    width: 26px;
    height: 21px;
    background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a7{
    margin-top: 50px;
    margin-left: 64px;
    width: 26px;
    height: 24px;
    background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a8{
    margin-top: 50px;
    margin-left: 64px;
    width: 25px;
    height: 25px;
    background:url(../img/4.png) no-repeat -20px -3px ;
}

#xz #dlu .batu .p1{
    position: absolute;left: 52px;top: 60px;
    width: 60px;
    line-height: 20px;
    font-size: 14px;
}
#xz #dlu .batu .p2{
    position: absolute;left: 150px;top: 60px;
    width: 60px;
    line-height: 20px;
    font-size: 14px;
}
#xz #dlu .batu .p3{
    position: absolute;left: 239px;top: 60px;
    width: 60px;
    line-height: 20px;
    font-size: 14px;
}
#xz #dlu .batu .p4{
    position: absolute;left: 328px;top: 60px;
    width: 60px;
    line-height: 20px;
    font-size: 14px;
}
#xz #dlu .batu .p5{
    position: absolute;left: 52px;top: 135px;
    width: 60px;
    line-height: 20px;
    font-size: 14px;
}
#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;
}
#xz #right .situ a img{

}