css学习

最新推荐文章于 2024-05-14 18:04:32 发布
最新推荐文章于 2024-05-14 18:04:32 发布
阅读量187 收藏
点赞数
文章标签： css 学习 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ling_Ye_/article/details/127913207
版权

第一部分

1.CSS定位

position :
static（默认）
relative
absolute
fixed
sticky

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

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{ width:100px; height:100px; background:red;}
    #box2{ width:100px; height:100px; background:blue; position: relative; left:100px; top:100px;}
    #box3{ width:100px; height:100px; background:yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

效果演示
在这里插入图片描述
absolute：
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;} */
   /*  #box1{ width:300px; height:300px; border:1px black solid; margin:200px; position: relative;}
    #box2{ width:100px; height:100px; background:red; position: absolute; left:0; top: 0;} */
    /* 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 id="box1"></div>
    <div id="box2"></div> -->

    <!-- <span>这是一个内联的</span> -->
    <!-- <div>这是一个块</div> -->

    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

效果演示
在这里插入图片描述
fixed：
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

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

z-index定位层级。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* body{ height:2000px;}
    div{ background:red; position: sticky; top:0;} */

  /*   #box1{ width:100px; height:100px; background:red; position: absolute; z-index:0;}
    #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:0;}
    #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> -->
    
   <!--  <div id="box1"></div>
    <div id="box2"></div> -->

    <div id="parent">
        <div id="box1"></div>
    </div>
    <div id="box2"></div>
</body>
</html>

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

2.定位实现下拉菜单

代码演示

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

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

在这里插入图片描述
在这里插入图片描述

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

代码演示

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

效果演示
在这里插入图片描述
代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{ margin : 0; padding: 0;}
    ul{ list-style: none;}
    img{ display: block;}
    a{ text-decoration: none; color:#666666;}
    h1,h2,h3,h4,h5,h6{ font-size:16px; font-weight: normal;}

    #main{ margin:20px auto; width:238px; border:1px solid #d9e0ee; border-top:3px #ff8400 solid;}
    #main h2{ height:35px; border-bottom:1px solid #d9e0ee; line-height: 35px; padding-left:11px;}
    #main h2 a{ color:black;}
    #main h2 a:hover{ color:#ff8400;}
    #main div img{ margin:8px auto 3px auto;}
    #main ul{ font-size:12px; line-height: 24px; margin-bottom: 8px;}
    #main ul li{ padding-left:18px; position: relative;}
    #main ul li:before{ content: ""; display: block; width:3px; height:3px; background:red; position: absolute; left:8px; top:50%; margin-top:-2px;}
    #main ul li.first-line{ border-bottom:1px solid #d9e0ee; padding-bottom:3px; margin-bottom:8px;}
    #main ul a{}
    #main ul a:hover{ color:#ff8400; text-decoration: underline;}
    </style>
</head>
<body>
    <div id="main">
        <h2>
            <a href="#">探索趣图</a>
        </h2>
        <div>
            <a href="#">
                <img src="./img/img.png" alt="">
            </a>
        </div>
        <ul>
            <li class="first-line">
                <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
            <li>
                <a href="#">测试文字测试文字测试文字</a>
            </li>
        </ul>
    </div>
</body>
</html>

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

4.css添加省略号

代码演示

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

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

5.css精灵以及好处

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{ width:20px; height:21px; background:url(./sprite_icon.png) no-repeat left -596px;}
    #box2{ width: 300px; height:50px; border:1px black solid; line-height: 50px; padding-left: 30px; background:url(./sprite_icon.png) no-repeat right -516px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">产品中心</div>
</body>
</html>

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

6.css圆角设置

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

 /*  #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>
</html>

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

7.博文尚美首页

PC端的布局？
通栏 : 自适应浏览器的宽度。
版心 : 固定一个宽度，并且让容器居中。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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; le
    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; 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>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_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                                首页，更不用说进首页前三了。那么网站优...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.pc游戏端首页

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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; 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; 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:1s upMove;}    
    @keyframes upMove{
        0%{ transform : translateY(-40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1; }
    }
    #banner .banner_download:hover p:last-child{ animation:1s downMove;}    
    @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{ width:100%; height:100%;}
    #banner .banner_user p{ text-align: center; font-size:12px; color:white; margin-top: 25px;}
    #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 -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,#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_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>
                <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>DOWNLOAD</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="http://ossweb-img.qq.com/upload/adw/image/20190510/6ae827443c667576e26fa4d48d93e199-80.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190508/178c724ac47ee0f74e32b4a386dd5808-80.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190513/f7aa08a33c9ee8f1d66d543b10cba86b-80.jpg" 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="./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_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>
    </div>
</body>
</html>

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

Ling_Ye_
关注
CSS学习总结
09-24
本文是小编日常整理了关于css学习总结相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
CSS学习心得
weixin_47223561的博客
03-30 1686
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML+CSS学习总结
weixin_53351919的博客
06-26 2658
html+css学习总结
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 1983
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记
Curry_On的博客
10-26 2221
CSS学习笔记 本文根据B站pink老师视频整理，供复习参考 笔记内容（更新中）：
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
css学习文档
09-03
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
三月和九月的博客
05-11 948
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
css超出部分省略（单行、多行，多种方法实现）
阿乐的博客
05-14 393
缺点:使用了私有属性。
CSS文字描边，文字间隔，div自定义形状切割
m0_61604012的博客
05-10 147
CSS文字描边，文字间隔，div自定义形状切割
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 299
TailwindCSS在vite项目中的安装与使用
Sass详解：颠覆CSS开发的新时代
q_913246828的博客
05-11 294
本文深入探讨了Sass作为CSS的扩展语言的各项特性、优势以及应用场景。Sass提供了诸如变量、嵌套、Mixin等功能，帮助开发者提高开发效率和样式代码的可维护性。同时，Sass在大型项目和团队协作中有着广泛的应用，成为提升前端开发效率和质量的重要工具。
css 案例 横向滚动渐变
weixin_38982591的博客
05-11 234
【代码】css 案例 横向滚动渐变。
在 CSS 中使用 text-emphasis 来增强文本的趣味性
最新发布
前端全栈开发者
05-14 323
您可以更改颜色、大小、字体，甚至添加阴影和轮廓等效果。但最近，我了解到一个我以前没有听说过的时尚 CSS 属性，它非常棒！属性是一种有趣的方式，可以增加对文本的强调，并可用于为您的设计增添趣味。大多数现代浏览器都支持它，因此您可以立即开始使用它来使您的文本脱颖而出！属性组合的简称，可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本，例如在文本上方或下方添加点、圆、双圆或文本。您甚至可以使用表情符号来强调文本。您也可以使用字母来强调文本。这将在文本顶部添加一个点，如下所示。
css 子元素 圆 均匀分布 展开动画
qq_36287830的博客
05-10 628
scss 实现 圆均匀分布 展开动画
常用CSS和XPATH元素定位方法
m0_61722509的博客
05-11 183
表示id. 表示class空格 表示tag, 表示或(,的优先级比较低，注意加括号):nth-child(n),表示父节点的第n个子节点:nth-last-child(n),表示父节点的倒数第n个子节点Span:nth-of-type(n)，表示父节点的第n个类型为span的元素Span:nth-last-of-type(n)，表示父节点的倒数第n个类型为span的元素元素1 + 元素2 表示元素2是元素1后面紧跟的兄弟。
htmlcss学习感悟
06-07
作为一个 AI，我并没有学习过 HTML 和 CSS，但可以通过分析用户的使用情况和搜索历史来得出一些结论和建议。 首先，学习 HTML 和 CSS 是非常有用的，因为这是构建网站和应用程序的基础。HTML 是用于创建网页内容的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值