Web前端从学习到学废（四）

已于 2022-11-22 17:38:23 修改
阅读量155 收藏
点赞数
文章标签： 前端 学习
于 2022-11-18 22:19:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongshan14quan17/article/details/127834526
版权

84.relative相对定位

position定位：
position特性：css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left、属性则决定了该元素的最终位置。
position取值：
static(默认)
relative(相对定位)
absolute（绝对定位）
fixde（固定定位）
sticky（粘性定位）
relative特性：

  1. 如果没有定位偏移量，对元素本身没有任何影响
  2. 不使元素脱离文档流
  3. 不影响其他元素布局
  4. left、top、right、bottom是相对于当前元素自身进行偏移的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #box1{ width:100px; height:100px;background:red;}
        #box2{ width:100px; height:100px;background:blue; margin-left:100px; margin-top:100px;}
        #box3{ width:100px; height:100px;background:yellow; margin-top:-100px;} */
        #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>

85.absolute绝对定位

  1. 使元素完全脱离文档流
  2. 使内联元素支持宽高（让内联具备块特性）
  3. 使块元素默认宽根据内容决定（让块具备内联的特性）
  4. 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* #box1{ width:100px; height:100px;background:red;position:absolute;}
    #box2{ width:200px; height:200px;background:blue;} */
    /* span{ width:100px; height:100px;background:red;position:absolute;}
    div{ background:red;position:absolute;left:100px;top:100px;} */
    #box1{ width:300px;height:300px;border:1px black solid;margin:200px;position:relative;}
    #box2{ width:100px;height:100px;background:red; position:absolute;right:0;bottom:0;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <span>这是一个内联的</span> -->
    <!-- <div>这是一个块</div> -->
    <div id="box1">
        <div id="box2"></div>

    </div>
</body>
</html>

86.fixed和sticky及z-index

fixed固定定位：

  1. 使元素完全脱离文档流
  2. 使内联元素支持宽高（让内联具备块特性）
  3. 使块元素默认宽根据内容决定（让块具备内联的特性）
  4. 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
<!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>
        /* body{ height:2000px;}
        div{ position:fixed;bottom:0;right:0;} */
        body{ height:2000px;}
        #box1{ width:300px;height:300px;border:1px black solid;margin:200px;position:relative;}
        #box2{ width:100px;height:100px;background:red; position:fixed;left:0;top:0;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div> -->
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

sticky粘性定位：在指定的位置，进行粘性操作。

<!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>
        body{ height:2000px;}
        div{ background:red; position: sticky;top:0;}
    </style>
</head>
<body>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <div>这是一个块</div>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    </div>
</body>
</html>

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>
        /* #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:2;} */
        #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="box1"></div>
    <div id="box2"></div> -->
    <div id="parent">
        <div id="box1"></div>
    </div>
    <div id="box2"></div>
</body>
</html>

87.定位实现下拉菜单

<!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: block;}
        #menu ul li:hover{ background: gray;}
        p{ text-align: center;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落</p>
</body>
</html>

88.定位实现居中和装饰点

定位实现元素居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width:300px; 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>

定位实现列表的装饰点：
代码略，下次补充。

89.CSS添加省略号

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

<!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>
        #content{ width:200px; border:1px black solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
    </style>
</head>
<body>
    <div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

90.CSS精灵及好处

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

  1. 可以减少图片的质量，网页的图片加载速度快
  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>
        #box1{ width:20px;height:21px; background:url(../img/en/是究极无敌巨TM可爱的琪亚娜\ -\ 副本\(1\)\(1\).png) no-repeat left -4px;}
        #box2{ width:300px; height:50px; border:1px black solid; line-height:50px;padding-left:30px;
        background:url(../img/en/是究极无敌巨TM可爱的琪亚娜\ -\ 副本\(1\)\(1\).png) no-repeat left -4px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">产品中心</div>
</body>
</html>

91.CSS圆角设置

border-radius:给标签添加圆角

<!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>
        /* #box{ width:200px; height:200px; background:red; border-radius:100px;} */
        /* #box{ width:200px; height:200px; background:red; border-radius:50%;} */
        /* #box{ width:200px; height:200px; background:red; border-radius:10px 20px;}(“10px”表示左上角和右下角，“20px”表示右上角和左下角) */
        /* #box{ width:200px; height:200px; background:red; border-radius:10px 20px 30px 40px;}("10、20、30、40"依次表示左上、右上、右下、左下) */
        /* #box{ width:200px; height:200px; background:red; border-radius:10px/20px;}(x/y的值，即不再是正圆而是一个椭圆) */
        /* #box{ width:200px; height:100px; background:red; border-radius:100px 100px 0 0;}（这表示一个半圆） */
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

92-99.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 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/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 .case_list{ margin-top: 28px;}
        #case .case_list li{ float:left; width: 340px; margin: 0 10px;}
        #case .case_btn{ width: 176px; height: 37px; background: #66C5B4; margin: 0 auto; border-radius: 25px; 
        line-height:37px; text-align: center; color:white;font-size: 14px; margin-top: 36px;}
        #case .case_btn a{ display: block; width: 100%; height: 100%; color: white;}

        #news{ min-height:450px; overflow: hidden;}
        #news .area_title{ margin-top: 65px;}
        #news 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 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 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: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;}

效果展示
在这里插入图片描述

100-109.PC端游戏类型整页制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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>

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

在这里插入图片描述

犬十七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端视频学习资料50G
06-01
Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习...
web前端学习框架图.png
04-01
这是2020版最全的web学习框架，博主自己绘图，希望对你有帮助，助你在前端学习路上一臂之力，欢迎大家下载收藏，觉着有帮助的欢迎留言哦
web前端从学习到学废
dongshan14quan17的博客
10-19 2309
新人web前端学习
web前端从学习到学废（五）
dongshan14quan17的博客
11-25 474
新人学习web前端第五周
web前端从学习到学废（二）
dongshan14quan17的博客
10-28 1015
新人web前端学习第二篇
web前端开发从学会了到学废了日记3
zkd1094692863的博客
11-04 112
web前端开发css篇
web前端开发从学会了到学废了日记2
zkd1094692863的博客
10-27 368
关于web前端开发的学习日记
前端技术图谱：看看你学废了哪些？
web全栈开发的博客
07-01 244
一、写在前面前端的技术更新迭代，相对各端而言是比较快的，也不知道是旧技术不值得优化了，还是 还是行业 Top 们“太卷”，还是说前端更新换代成本太低。好在基本都围绕着前端（web 前端）三大基础 JavaScript、HTML 和 CSS 转。tips：为什么要梳理技术图谱？答：梳理技术图谱，对应市场需求，紧跟时代发展，查漏补缺，也许是许多程序员应该做的事。程序员的面试题...
Web前端
m0_65454105的博客
09-19 197
HTML、CSS、JavaScript、jQuery、bootstrap
【前端修炼场】— 在页面里面放图片，你学废了么？
热爱生活，积极向上的阿酱！
09-14 2569
承接上一篇文章，我们最后介绍了自定义列表，其中自定义列表可以放入图片和文字，那么我们的图片如何导入到我们的页面呢？接下来我将为诸位道友详细介绍一下！话不多说，开干！在此篇章，已经给大家介绍了一下图片标签，希望大家余下时间自行练习以熟练掌握！✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下👍}⭐️}✏️评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富。
【从入门到学废---SpringBoot】
小汤圆
04-30 290
持续更新，建议收藏
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
学习资料-Web前端概述.md
04-20
学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端...
Web前端学习路线图.jpg
07-03
针对web前端开发，整理的一份学习路线图，可以作为入门参考资料。 包含html、css、javascript基础路线，以及jQuery、MySQL； 进阶的包含Nodejs、vue、react、微信小程序等路线。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 223
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 281
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 453
对于上云api开发学习过程中的错误教训积累总结
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，...这份文档提供了一个全面的Java Web前端入门指南，涵盖了从基本HTML结构到动态交互实现的多个方面，对于初学者或希望巩固基础知识的开发者来说是一份宝贵的资源。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值