首页 > 其他分享 >第四周

第四周

时间：2022-11-18 20:01:52浏览次数：36  
标签：margin height width background position 四周 banner

@

目录

3.9css定位

position特性
css position 属性用于指定一个元素在文档中的定位方式。top、right、bottom、left

position取值
static(默认）：没有/静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky:粘性定位
（用margin设置会影响下面的块，很麻烦)

  1. relative 相对定位
    （原来的相对于现在的位置偏哪，偏多少）

  • 如果没有定位偏移量，对元素本身没有任何影响。 #box1{width: 100px;height: 100px;background: red;position:relative;}

  • 不使元素脱离文档流（原来所在的位置依然存在，所以下面的块不会被影响）

  • 不影响其他元素布局

  • left、top、right、bottom是相对于当前元素自身进行偏移的。

#box2{width: 100px;height: 100px;background: blue;position: relative; left: 100px;top: 100px;}
  1. absolute绝对定位
    每个方向指该条边与容器的距离，如left：150px;只左边距容器左边为100px

  • 使元素脱离文档流（类似浮动）
    如 #box1{width: 100px;height: 100px;background: red;position: absolute;}
    在这里插入图片描述

  • 使内联元素支持宽高（让内联具备块特性）

  • 使块元素默认宽根据内容决定（让块元素具备内联的特性）
    在这里插入图片描述

  • 如果有定位（相对或绝对或固定）祖先元素（随便一个祖先） 相对于 有定位的祖先元素（除去边框）发生偏移，没有定位祖先元素相对于整个文档发生偏移，在可视范围内，与滚动条无关（绝对、相对、固定）
    如 ：祖先元素无定位

#box1{width: 300px;height: 300px;border: 1px black solid;margin: 200px;}
        #box2{width: 100px;height: 100px;background: red;position: absolute;left: 0px;bottom: 0px;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <span>这是一个内联</span> -->
    <div id="box1">
        <div id="box2">
        </div>
    </div>

在这里插入图片描述

祖先元素有定位

 #box1{width: 300px;height: 300px;border: 1px black solid;margin: 200px;position: relative;}
        #box2{width: 100px;height: 100px;background: red;position: absolute;left: 0px;bottom: 0px;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <span>这是一个内联</span> -->
    <div id="box1">
        <div id="box2">
        </div>
    </div>
</body>

在这里插入图片描述

  1. fixed固定定位
  • 使元素完全脱离文档流，
  • 使内联元素支持宽高（让内联具备块特性）
  • 使块元素默认宽根据内容（让块具备内联特性）
  • 相对于整个 浏览器窗口进行偏移（无论是否有祖先容器），不受浏览器滚动条的影响，不论滚动条都固定在一个位置
  1. sticky粘性定位
  • 不加位置时没有任何效果
  • 在指定位置进行粘性操作（跟着滚动条走到固定位置后不再动）
  1. z-index定位层级
  • 默认层级为0，可以是复数
  • 嵌套时候的层级问题:父容器有定位时，按父容器来，不管里面的，没有时才按里面的来
  • 默认后写的层级高
#box1{.........position:absolute;z-index:-1/0/1/2....}

（1）定位的下拉菜单练习

<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;}
    p{text-align: center;}
    #menu:hover ul{display: block;}
    #menu ul li:hover{background: gray;}
<!--移动至每个列表项时显示灰色-->
</style>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落</p>
</body>

（2）定位实现居中练习

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

（3）定位实现修饰
可以节省图片

<style>
        ul{list-style: none;}
        #main{width: 300px;height: 300px;border: 1px solid black;}
        #main ul li{position: relative;}
        #main ul li::after{content:"";display: block;width: 3px;height: 3px;background: red;position: absolute;left:-4px;top: 50%;} 
    </style>
</head>
<body>
    <div id="main">
        <ul>我是一个表格
            <li>hahaah</li>
            <li>hahahha</li>
            <li>hahaha1</li>
            <li>hahahah</li>
        </ul>
    </div>

在这里插入图片描述

3.10CSS中的一些小操作

  1. CSS单行添加省略号
    width:必须有一个固定的宽
    white-space：nowrap：不让内容折行（设置的长度不够时会折行）
    overflow:hidden：隐藏溢出的内容
    text-overflow:ellipisis：添加省略号
    <style>
        #content{width: 200px;border: 1px black solid;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>
<body>
    <div id="content">
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>
</body>

在这里插入图片描述

  1. CSSprime
    在这里插入图片描述
  2. CSS圆角、圆形
    border-radius:..px;
    <style>
        #box{width: 200px;height: 200px;background: red;border-radius: 5px;}
    </style>
</head>
<body>
    <div id="box">

    </div>

在这里插入图片描述

  • 值的意义：与角相切的圆的半径
  • 半径为容器的一半时是正圆px/50%
 <style>
        #box{width: 200px;height: 200px;background: red;border-radius:50%;}
    </style>

在这里插入图片描述

  • 后面是两个值时为左上角和右下角border-radius:.. ...;
  • 后面是四个值时为左上、右上、右下、左下
  • 做椭圆的相切
    在这里插入图片描述
<style>
        #box{width: 200px;height: 200px;background: red;border-radius:40px/60px;}
    </style>

在这里插入图片描述

  • 半圆
 <style>
        #box{width:100px;height: 200px;background: red;border-radius:0px 100px 100px 0px;}
    </style>

在这里插入图片描述

3.11 练习

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中
两者可以嵌套

  1. pc端企业完整页面
  • common.css
*{margin: 0px;padding: 0px;}   /*去掉所有元素的默认边距**/
ul,ol{list-style: none;}  /*去掉表格前的点**/
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-fulid{width: 100%;}  /*通栏设置**/
#service{overflow: hidden;}



#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:50px;}
#head .head_menu li:hover a{color: darkgrey;}    /*移上之后的字体颜色**/

#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;min-height:407px;text-align: center;}
 .area_title h2{height:20px;line-height: 20px;font-size: 20px;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;opacity: 0;z-index: index 1;position:absolute;left: 0;top: 0;}
     #banner .banner_list li.active{opacity:1;z-index: 10;}
     #banner .banner_list a{width:100%;height:100%;}
     #banner .banner_btn{display: block; width: 100%; position: absolute;bottom:19px;z-index:20;text-align: center;font-size: 0;}
     #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-color: white;} 


     #service{overflow: hidden;min-height:470px;}
     #service .service_list{text-align: center;margin-top:-350px;}
     #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 h3{font-size: 18px;color: #434343;line-height:36px;margin-top:35px;}
     #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:-300px;}
     #case .case_list li{width:340px; float:left;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:-80px;}
     #case .case_btn a{display:block;height:100%;width:100%;color:white;}

    #news{min-height:450px;overflow: hidden;}
    #news .area_title{margin-top:65px;}
    #news dl{margin-top:-320px;}
    #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:71px; 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="">PROTFOUO</a>
          </li>  
          <li>
            <a href="">PROTFOUO</a>
          </li>    
          <li>
            <a href="">SEAMCE</a>
          </li>    
          <li>
            <a href="">NEWS</a>
          </li>    
          <li><a href="">NEWS</a>
            <a href="">CONTACT</a>
        </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)">
          <li style="background-image:url(./images/banner.png)">
            <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 SEVICE</p>
      </div>
      <ul class="service_list">
        <li>
          <div>
            <a href="">
              <img src="./images/web1.png" alt="">
            </a>
          </div>
          <h3>1.WEB DESIN</h3>
          <p>
            企业品牌网页设计/手机网站制作
            <br>
            动画网站创意设计
          </p>
        </li>
        <li>
          <div>
            <a href="">
              <img src="./images/e-bussiness1.png" alt="">
            </a>
          </div>
          <h3>2.GRAPHIC DESIGN</h3>
          <p>
            标志LOGO设计/产品宣传册设计
            <br>
            企业广告/海报设计
          </p>
        </li>
        <li>
          <div>
            <a href="">
              <img src="./images/graphic1.png" alt="">
            </a>
          </div>
          <h3>3.DUSINESS PLAN</h3>
          <p>
            淘宝/天猫装修设计及运营推广
            <br>
            企业微博、微信营销
          </p>
        </li>
        <li>
          <div>
            <a href="">
              <img src="./images/mail1.png" alt="">
            </a>
          </div>
          <h3>4.MAILBOXAGENTS</h3>
          <p>
            腾讯网易品牌邮箱企业代理
            <br>
            个性化邮箱定制开发
          </p>
        </li>
      </ul>
    </div>
    <div id="case" class="container-fluig">
      <div class="container">
        <div class="area_title">
            <h2>{客户案例}</h2>
            <p>with the best professional technology,to design the best innovate web site</p>
          </div>
          <ul class="case_list clear" >
            <li>
              <a href="">
                <img src="./images/20141121095528549.png" alt="">
              </a>
            </li>
            <li>
              <a href="">
                <img src="./images/20141121095216750.png" alt="">
              </a>
            </li>
            <li>
              <a href="">
                <img src="./images/20141121105856226.png" alt="">
              </a>
            </li>
          </ul>
        </div>
        <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>08</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>07</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>06</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="contain-fulid">
      <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>

在这里插入图片描述

在这里插入图片描述

2. pc游戏端页面练习

  • 通用
*{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() repeat-x;}
#head .container{height: 41px;}
#head .head_logo{width: 220px;height: 41px;background: url() 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() 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;}
  • 页面
 <link rel="stylesheet" href="./css/common.css">
    <style>
        #main{background: url() no-repeat center 0;}
        #nav{background: url() repeat-x,url() no-repeat center 0;overflow: hidden;}
        #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{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() no-repeat 0 -12px;position: absolute;right: -15px;top: 0;}
        #nav dd a.new:after{content: "";display: block;width: 12px;height: 12px;background: url() 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;}

        #link{height: 175px;}
        #link a{width: 463px; height: 100%;display: block;margin: 0 auto;}

        #banner{height: 276px;background: url() no-repeat;margin-top: 20px;}
        #banner .banner_left{width: 240px;height: 310px;background: url() no-repeat;margin: -20px 0 0 7px;}
        #banner .banner_download p{width: 91px;height: 25px;background: url() 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;}



        #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;}
        }
  
        #banner .banner_user div{width:56px;height:56px;border-radius: 50%;margin: 80px auto 0 auto;border: 4px #283257 solid;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() no-repeat -603px -299px;cursor: pointer;}
        #banner .banner_bottomline_ul li.active{background-position: -581px -299px;}
        #banner .banner_bottomline_leftbtn{width: 12px;height: 22px;position: absolute;left: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;}
        #banner .banner_bottomline_rightbtn{width: 12px;height: 22px;position: absolute;right: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;}
        #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;top: -5px;background-position: -634px -312px;}
        #banner .banner_list_lb{left: -2px;top: -4px;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() 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: -696313px -298px;}
        #banner .banner_right_rb{right:-4px;bottom: -6696313px;background-position: -696313px -313px;}
        #banner .banner_right_lb{left:-4px;bottom: -6696313px;background-position: -681px -313px;}
    </style>left: -4px;top: -4px;background-position: -681px -298px;
————————————————
版权声明：本文为CSDN博主「SHniangJiu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明
原文链接：https://blog.csdn.net/SHniangJiu/article/details/12783672
</head>
<body>
    <div id="head" class="container-fluid">
        <div class="constainer">
            <div class="head_logo l">
                <a href="#">腾讯游戏</a>
            </div>
            <div class="head_ad l">
                <a href="#">
                    <img src="" alt="">
                </a>
            </div>
            <div class="head_menu r">
                <div class="head_menu_czsh l">
                    <a href="#">成长守护平台</a>
                </div>
            </div>
            <div class="head_menu r">
                <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" alt="QQ飞车" title="QQ飞车">
                    </a>
                </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_ss">
                    <dt></dt>
                    <dd><a class="hot" href="#">新手指引</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="#">飞车手游</a></dd>
                </dl>
            </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>
      
    </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" 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="." alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="." alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="." 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" 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>
————————————————
版权声明：本文为CSDN博主「SHniangJiu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/SHniangJiu/article/details/12783672
</body>

标签：margin,height,width,background,position,四周,banner
From： https://www.cnblogs.com/bujiatangaa/p/16904756.html

相关文章

  • 第四周学习总结（11.6-11.13）
    两层全连接神经网络的内容要比想象中的多很多，代码量也很多，在cs231n只用了15分钟讲解的东西我用了一周半的时间才完全的消化理解，这周终于完成了全连接神经网络博客的书写htt......
  • python第四周
    importdatetime#导入日期时间类#定义一个列表mot=["今天星期一:\n坚持下去不是因为我很坚强，而是因为我别无选择。","今天星期二:\n含泪播种......
  • 第四周总结
    周总结异常常见类型SyntaxErrorNameErrorIndexErrorKeyErrorIndentationError......异常处理语法结构1.基本语法结构try：待检测的代码except错误类型：......
  • python学习第四周总结
    异常常见类型异常处理语法结构异常补充处理异常处理实战应用生成器对象自定义生成器range()功能yield冷门用法生成器表达式模块简介模块的分......
  • 第四周自我回顾自我回顾
    目录一、异常的捕获与处理异常的错误类型异常处理的语法结构和讲解主动抛出异常异常处理应用举例二、生成器什么是生成器生成器的两种形式1、生成器表达式2、自定义生成器......
  • 第四周总结复习
    一周总结异常处理异常常见类型AttributeError#访问的对象属性不存在ImportError#无法导入模块或者对象，主要是路径有误或名称错误SyntaxError#pytho......
  • 第四周总结
    第四周总结目录第四周总结异常处理异常常见类型异常处理语法结构异常处理补充异常处理实战应用生成器生成器对象yield冷门用法生成器表达式自定义生成器range索引取值与迭......
  • 第四周总结
    第四周总结异常处理语法结构1.基本语法结构try:待监测的代码except错误类型:针对上述错误制定的方案2.查看错误信息try:......
  • 第四周总结
    目录异常处理语法结构异常处理语法结构可迭代对象、迭代器和生成器异常处理语法结构异常处理语法结构基本语法结构try:待监测的代码except错误类型：针对上......
  • 第四周
    多态的好处：1.可替换性。多态对已存在代码具有可替换性。例如，多态对圆Circle类工作，对其他任何圆形几何体，如圆环，也同样工作。2.可扩充性。多态对代码具有可扩充性。增加新......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99