PC web page production

Language 2023-12-17 05:55:56 views: null

PC web page production

1. Relative relative positioning

position positioning
1.position property
The css position property is used to specify how an element is positioned in the document. The top, right, bottom, and left attributes determine the final position of the element.
2.position value
static (default), relative, absolute, fixed, sticky
relative relative positioning
1. If there is no positioning offset, it has no effect on the element itself
2. It does not make the element out of the document flow
3. It has no effect Layout of other elements
4.left, top, right, bottom are offset relative to the current element itself 

<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>

2. absolute positioning

absolute positioning
1. Make the element completely out of the document flow
2. Make the inline element support width and height( Let inline have block characteristics)
3. Make the block element's default widthdetermined by the content(Let block have inline Characteristics)
4. If there is a positioned ancestor element that is offset relative to the positioned ancestor element, there is no positioned ancestor element. Offset relative to the entire document (absolute, relative, fixed)

<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>

3. fixed, sticky and zlndex

fixed fixed positioning
1. Make the element completely out of the document flow
2. Make the inline element support width and height (let the inline have block characteristics)
3. Make the default width of the block element determined by the content (let the block have inline characteristics)
4. Offset relative to the entire browser window, not affected by the browser scroll bar
sticky sticky positioning
Perform sticky operations at the specified location.
z-index positioning hierarchy
The default level is 0
Nesting Level problem

<style>
        /* body{
    
     height: 200px;}
        div{
    
     position: fixed; bottom: 0; right: 0;} */
        /* body{
    
     height: 200px;}
        #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;} */
        /* body{
    
     height: 2000px;}
        div{
    
     background: red; position: sticky; top: 100px;} */
        /* #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: -1;} */
        #parent{ width: 100px; height: 100px; border: 1px black solid; position: absolute; z-index: -2;}
        #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: -1;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div> -->
    <!-- <div id="box1">
        <div id="box2"></div>
    </div> -->
    <!-- <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 id="box1"></div>
    <div id="box2"></div> -->
    <div id="parent">
         <div id="box1"></div>
    </div>
    <div id="box2"></div>
</body>

4. Positioning to implement drop-down menu

<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>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落</p>
</body>

5. Positioning to achieve centering and decorative points

<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>

6. Add ellipsis in css

width
must have a fixed width
white-space: nowrap
Do not allow content to wrap< /span> Add ellipses< /span>text-overflow : ellipsis Hide overflow content
overflow : hidden


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

7. CSS elves and their benefits

CSS Sprite
Features
CSS Sprite, also called CSS Sprite, is a web image application processing method. It allows you to include all the scattered images involved in a page into one large image for loading.
Benefits
It can reduce the quality of images and load images on web pages quickly.
Reduce the number of image requests and speed up the loading of web pages. Open

<style>
        #box1{ width: 20px; height: 21px; background: url(./images/tianqi_1.png) no-repeat left -596px;}
        #box2{ width: 300px; height: 50px; border: 1px black solid; line-height: 50px; padding-left: 30px;
        background: url(./images/tianqi_2.jpg) no-repeat right -536px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">产品中心</div>
</body>

8. CSS rounded corner settings

border-radius
Add rounded corners to labels

<style>
        /* #box{ width: 200px; height: 200px; background: red; border-radius: 100px;} */
        /* #box{ width: 300px; height: 300px; background: red; border-radius: 50%;} */
        /* #box{ width: 300px; height: 300px; background: red; border-radius: 10px 20px 30px 40px;} */
        /* #box{ width: 300px; height: 300px; background: red; border-radius: 20px / 40px;}  */
        #box{ width: 300px; height: 150px; background: red; border-radius: 150px 150px 0 0;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>

9. Full page production of enterprise type on PC

1. Full page production of enterprise type on PC (1)

Banner: Adapt to the width of the browser
Header: Fixed a width and let the container Center
common.css (Bowen Shangmei homepage)

*{
    
     margin: 0; padding: 0;}
ul,ol{
    
     list-style: none;}
img{
    
     display: block;}
a{
    
     text-decoration: none; color: #FF646464;}
h1,h2,h3{
    
     font-size: 16px;}
border{
    
     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%;}

2. Full page production of enterprise type on PC (2)

common.css

#head{ height: 81px;}
#head .head_logo{ width: 162px; height: 44px; margin-top: 19px;}
#head .head_menu{ font-size: 14px;}
#head .head_menu li{ float: left; margin-left: 58px;}

 <link rel="stylesheet" href="./css/common.css">
</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>
</body>

3. Full page production of enterprise type on PC (3)

<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;}
    </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>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

4. Full page production of enterprise type on PC (4)

common.css

.area_title{
    
     margin-top: 60px; text-align: center;}
.area_title h2{
    
     height: 20px; line-height: 20px; font-size: 20px; color: #363636; background: 
url(../images/title_bg.png) no-repeat center 7px; }
.area_title p{
    
     color: #9F9F9F; font-size: 14px; line-height: 34px;}

 #service{ overflow: hidden; min-height: 407px;}

<div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR DERVICES</p>
        </div>
    </div>

5. Full page production of enterprise type on PC (5)

#service .service_list{ text-align: center;}
        #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;}

<div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR DERVICES</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>

6. Full page production of enterprise type on PC (6)

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


<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 website</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>

7. Full page production of enterprise type on PC (7)

#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_test{ width: 310px; margin-left: 20px;}
        #news .news_test h3{ font-size: 14px;}
        #news .news_test h3 a{ color: #3F3F3F;}
        #news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}

<div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>
                                很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页
                                ，更不用说进首页前三了。那么网站优化···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">flash网站制作的优缺点</a></h3>
                            <p>
                                虽然HTML5程序语言出现，大有逐渐代替Flash网站的趋势，但是
                                过于生硬的HTML5动画效果，始终···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">做个网站多少钱?</a></h3>
                            <p>
                               "做个网站多少钱?"很多客户打电话过来直接第一句就抛出来的问题。
                               这好比买辆车多少钱，你是要···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3>
                            <p>
                                大部分人都想让自己的网站，一夜之间出现在搜索引擎并且独占鳌头。
                                但是事实告诉我们罗马不是一···
                            </p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>

8. Full page production of enterprise type on PC (8)

#foot{ background: #66c5b4;}
        #foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}
        #foot div a{ color: white; margin: 0 10px;}

<div id="foot" class="container_fluid">
        <div class="container">
            <p class="l">Copyright 2006-2014 Bowenshangmei Culture All Rights Resered</p>
            <div class="r">
                <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> 
            </div>
        </div>
    </div>

10. Full-page production of PC game types

1. PC game type full page production (1)

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

2. PC game type full page production (2)

#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: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;}

<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 l">
                <div class="head_menu_czsh l">
                    <a href="#">成长守护平台</a>
                </div>
                <div class="head_menu_top l">
                    <a href="#">腾讯游戏排行榜</a>
                </div>
            </div>
        </div>
    </div>

3. PC game type full page production (3)

#main{ background: url(./images/mbg1216.jpg) no-repeat center 0;}
        #nav{ min-height: 236px; background:url(./images/nav_down_re.png) repeat-x, url(./images/nav.png) no-repeat center 0;
        overflow: hidden;}
        #nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}

<div id="main" class="container-fluid">
        <div id="nav" class="container-fluid">
            <div class="nav_logo">
                <a href="#">
                    <img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车">
                </a>
            </div>
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>

4. PC game type full page production (4)

#nav dl{ position: absolute; top: 0;}
        #nav dt{ height: 66px;}
        #nav dt a{ width: 100%; height: 100%; display: block; text-indent: -999px; overflow: hidden;}
        #nav dd{ line-height: 27px; font-size: 12px; text-align: center;}
        #nav dd a{ color: white; position: relative;}
        #nav dd a:hover{ color: red; text-decoration: underline;}
        #nav dd a.hot:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) 
        no-repeat 0 -12px; position: absolute; right: -15px; top: 0;}
        #nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) 
        no-repeat 0 0; position: absolute; right: -15px; top: 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;}

<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>
                <dl class="nav_index">
                    <dt>
                    <a href="#">首页</a>
                    </dt>
                </dl>
                <dl class="nav_zl">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a class="hot" href="#">官方漫画</a></dd>
                    <dd><a class="new" href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_ss">
                    <dt></dt>
                    <dd><a class="hot" href="#">SSC</a></dd>
                    <dd><a href="#">谁是车王</a></dd>
                    <dd><a href="#">全民争霸赛</a></dd>
                </dl>
                <dl class="nav_hd">
                    <dt></dt>
                    <dd><a class="hot" href="#">版本中心</a></dd>
                    <dd><a href="#">合作专区</a></dd>
                    <dd><a href="#">CDK兑奖</a></dd>
                </dl>
            </div>
        </div>

5. Full page production of PC game types (5, 6, 7)

 #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;}
        #banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat
        -253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}
        #banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}
        #banner .banner_download p:last-child{ background-position: -253px -25px;}

        /* CSS3简单的动画 */

        #banner .banner_download:hover p:first-child{ animation: .5s upMore;}
        @keyframes upMore{
    
    
            0%{
    
     transform: translateY(-40px);opacity: 0;}
            100%{
    
     transform: translateY(0);opacity: 1;}
        }
        #banner .banner_download:hover p:last-child{ animation: .5s downMore;}
        @keyframes downMore{
    
    
            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: 85px auto 0 auto; border: 2px #283257 solid;
        box-sizing: border-box; overflow: hidden;}
        #banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}
        #banner .banner_user a{ color: #34f1d0;}


<div id="banner" class="container">
            <div class="banner_left l">
                <div class="banner_download">
                    <p>下载游戏</p>
                    <p>DOWLOAD</p>
                </div>
                <div class="banner_user">
                    <div>
                    <img src="./images/56x56.jpg" alt="">
                    </div>
                    <p>欢迎<a href="#">登录</a>,进入飞车世界</p>
                </div>
            </div>
            <div class="banner_center l"></div>
            <div class="banner_right l"></div>
        </div>

6. PC game type full page production (8)

#banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 6px;}
        #banner .banner_list_ul{ width: 2000px;}
        #banner .banner_list_ul li{ width: 497px; height: 253px; float: left;}
        #banner .banner_bottomline{  height: 37px; background: rgba(0,0,0,5); border-top: 1px #514b55 solid;
        position: absolute; bottom: 0; left: 0;}
        #banner .banner_bottomline_ul{ width: 100%; 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 -299ppx;}
        #banner .banner_bottomline_ul li.active{ background-position: -581px -299px ;}

            <div class="banner_center l">
                <div class="banner_list">
                    <ul class="banner_list_ul">
                        <li>
                            <a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/194/20221118/
                            6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=
                            253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a>
                        </li><li>
                            <a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=
                            253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a>
                        </li>
                    </ul>
                    <div class="banner_bottomline">
                        <ul class="banner_bottomline_ul">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>

7. PC game type full page production (9)

#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,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;
        background: url(./images/top.png) no-repeat; position: absolute;}
        #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;}

<i class="banner-list_lt"></i>
<i class="banner-list_rt"></i>
<i class="banner-list_rb"></i>
<i class="banner-list_lb"></i>

8. PC game type full page production (10)

#banner .banner_right{ width: 209px; height: 255px; position: relative; margin: 12px 0 0 12px;}
        #banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_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: -6x; background-position: -696px -313px;}
        #banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;}


                <i class="banner_right_lt"></i>
                <i class="banner_right_rt"></i>
                <i class="banner_right_rb"></i>
                <i class="banner_right_lb"></i>

11. Home page of Bowen Shangmei

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

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

<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;}
        #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_test{ width: 310px; margin-left: 20px;}
        #news .news_test h3{ font-size: 14px;}
        #news .news_test h3 a{ color: #3F3F3F;}
        #news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}

        #foot{ background: #66c5b4;}
        #foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}
        #foot div a{ color: white; margin: 0 10px;}
    </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>
        </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 DERVICES</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 website</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>TEH LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>
                                很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页
                                ，更不用说进首页前三了。那么网站优化···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">flash网站制作的优缺点</a></h3>
                            <p>
                                虽然HTML5程序语言出现，大有逐渐代替Flash网站的趋势，但是
                                过于生硬的HTML5动画效果，始终···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test l">
                            <h3><a href="#">做个网站多少钱?</a></h3>
                            <p>
                               "做个网站多少钱?"很多客户打电话过来直接第一句就抛出来的问题。
                               这好比买辆车多少钱，你是要···
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_test 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 Resered</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>

12. QQ Speed ​​Home Page

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

#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: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;}


   <style>
        #main{ background: url(./images/mbg1216.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; position: relative;}
        #nav dd a:hover{ color: red; text-decoration: underline;}
        #nav dd a.hot:after,#nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/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;}
        #banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat
        -253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}
        #banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}
        #banner .banner_download p:last-child{ background-position: -253px -25px;}

        /* CSS3简单的动画 */

        #banner .banner_download:hover p:first-child{ animation: .5s upMore;}
        @keyframes upMore{
    
    
            0%{
    
     transform: translateY(-40px);opacity: 0;}
            100%{
    
     transform: translateY(0);opacity: 1;}
        }
        #banner .banner_download:hover p:last-child{ animation: .5s downMore;}
        @keyframes downMore{
    
    
            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: 85px auto 0 auto; border: 2px #283257 solid;
        box-sizing: border-box; overflow: hidden;}
        #banner .banner_user img{ width: 100%; height: 100%;}
        #banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}
        #banner .banner_user a{ color: #34f1d0;}

        #banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 4px; position: relative;}
        #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 -299ppx; 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,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;
        background: url(./images/top.png) no-repeat; position: absolute;}
        #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_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_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: -6x; background-position: -696px -313px;}
        #banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;}


    </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 l">
                <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>
                <dl class="nav_index">
                    <dt>
                    <a href="#">首页</a>
                    </dt>
                </dl>
                <dl class="nav_zl">
                    <dt></dt>
                    <dd><a href="#">新手指引</a></dd>
                    <dd><a class="hot" href="#">官方漫画</a></dd>
                    <dd><a class="new" href="#">飞车手游</a></dd>
                    <dd><a href="#">精美壁纸</a></dd>
                    <dd><a href="#">游戏下载</a></dd>
                </dl>
                <dl class="nav_ss">
                    <dt></dt>
                    <dd><a class="hot" href="#">SSC</a></dd>
                    <dd><a href="#">谁是车王</a></dd>
                    <dd><a href="#">全民争霸赛</a></dd>
                </dl>
                <dl class="nav_hd">
                    <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>DOWLOAD</p>
                </div>
                <div class="banner_user">
                    <div>
                    <img src="./images/56x56.jpg" alt="">
                    </div>
                    <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="https://ossweb-img.qq.com/upload/adw/image/194/20221118/
                            6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=
                            253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a>
                        </li><li>
                            <a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=
                            253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a>
                        </li>
                    </ul>
                    <div class="banner_bottomline">
                        <ul class="banner_bottomline_ul">
                            <li class="active"></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_lb"></i>
                </div>
            </div>
            <div class="banner_right l">
                <a href="#"><img src="" alt=""></a>
                <i class="banner_right_lt"></i>
                <i class="banner_right_rt"></i>
                <i class="banner_right_rb"></i>
                <i class="banner_right_lb"></i>
            </div>
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>

</body>
</html>

Guess you like

Origin blog.csdn.net/molecule_9/article/details/127930070
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com