0基础学web----CSS定位装饰

01-定位-作用和使用步骤

02-定位-相对relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        .one{
            background-color: red;
        }
        .tow{
            /* 相对定位 relative */
            position: relative;
            /* 相对定位的方向 */
            top: 100px;
            left: 100px;
            background-color:black;
        }
        .three{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="tow"></div>
    <div class="three"></div>
</body>
</html>

 

 位置发生了位移,但是他原来的位置依然空着不被占用

03-了解-定位-注意事项

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

    <style>
        /* 如果有left和right都有,以left为准  如果有top和bottom都有,那就以top为准 */
        /* 书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */
        .box{
            position: relative;
            left: 100px;
            top: 200px;

            /* 无效 */
            right: 500px;
            


            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box"></div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

        /* 如果有left和right都有,以left为准  如果有top和bottom都有,那就以top为准 */

        /* 书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */

04-定位-绝对absolut-参照浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        .one{
            position: absolute;
            left: 0;
            top: 0;

            background-color: blue;
        }
     
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="one"></div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

 绝对定位:

先找到已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位;

有父级,但父级没有定位,以浏览器窗口为进行定位

1.脱标,不占位

2.改变标签的显示模式特点:具体行内块的特点(在一行共存,宽高生效)

05-定位-子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        .yeye{
          

            width: 500px;
            height: 500px;
            background-color:paleturquoise;
        }
        .baba{
            position:relative;

            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .erzi{
            position: absolute;
            right: 150px;
            bottom: 100px;

            width: 300px;
            height: 300px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="baba">
            <div class="erzi">

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

子绝父相的意思是,当父类用相对定位时,子类的绝对定位以父类的位置进行参照定位。 

06-案例-学成在线-hot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f4f5f9;
    }

    .box {
        /*相对定位*/
        position: relative;
      /* 1、宽高 */
      width: 228px;
      height: 270px;
      /* 2、背景颜色 */
      background-color: #fff;
      margin: 100px auto;
    }

    .box .product {
      /* width: 228px; */
      width: 100%;
    }

    .box h3 {
      height: 52px;
      padding-left: 24px;
      padding-right: 20px;
      margin-top: 25px;
      font-size: 14px;
      font-weight: 400;
    }

    .box p {
      margin-left: 24px;
      font-size: 12px;
      color: #929292;
    }

    .box p span {
      color: #f77321;
    }

    /*hot设置*/
    .hot{
        /* 绝对定位 */
        position: absolute;
        top: 4px;
        right: -4px;
    }

  </style>
</head>
<body>
  <!-- 布局流程:从上往下、从外往内 -->
  <div class="box">
    <img src="./images/product.png" alt="" class="product">
    <img src="./images/hot.png" alt="" class="hot">
    <h3>Android网络图片加载框架详解</h3>
    <p><span>高级</span> • 1125人在学习</p>
  </div>
</body>
</html>

07-定位-居中

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /*相对定位*/
            position: relative;
            width: 1000px;
            height: 500px;
            background-color: pink;
        }
        .opo{
            /* 绝对定位 */
            position: absolute;
              /* 2、让子盒子往右移动父盒子的一半 */
            left: 50%;
             /* 3、让子盒子往左移动自己的一半 */
             /* 方法一: */
             /* margin-left: -100px; */
             /* 方法二: */
            transform: translate(-50%);


            width: 200px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="opo"></div>
    </div>
</body>
</html>

   /* 2、让子盒子往右移动父盒子的一半 */
            left: 50%;
             /* 3、让子盒子往左移动自己的一半 */
             /* 方法一: */
             /* margin-left: -100px; */
             /* 方法二: */
            transform: translate(-50%);

08-定位-位移居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /*相对定位*/
            position: relative;
            width: 1000px;
            height: 500px;
            background-color: pink;
        }
        .opo{
            /* 绝对定位 */
            position: absolute;
              /* 2、让子盒子往右移动父盒子的一半 */
            left: 50%;
            top: 50%;
             /* 3、让子盒子往左移动自己的一半 */
             /* 方法一: */
             /* margin-left: -100px; */
             /* 方法二: */
             /* transform: translate(水平,垂直); */
            transform: translate(-50%,-50%);


            width: 200px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="opo"></div>
    </div>
</body>
</html>

 

  /* 2、让子盒子往右移动父盒子的一半 */

            left: 50%;

            top: 50%;

             /* 3、让子盒子往左移动自己的一半 */

             /* 方法一: */

             /* margin-left: -100px; */

             /* 方法二: */

             /* transform: translate(水平,垂直); */

            transform: translate(-50%,-50%);

09-案例-二维码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏:占满一行的边框,所以需要有一个通栏:占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部,所以设置ul为宽度固定并且水平居中的效果(后面项目中所用到的版心) */
    ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      /* 自动内减 */
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素,宽高由内容撑开,并且无法设置宽高,此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素,此时可以设置宽高,会让a标签范围更大,用户可以点击调整的区域也越大 */
      display: block;
      /* 宽度不设置块元素会默认占满一行 */
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    
    ul li a {
        position: relative;
    }
    .code{
        position:absolute;
   
        left: 50%;
        transform: translatex(-50%);
        /* transform: translate(-50%,-50%); */
        top: 41px;
    }

  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转,所以证明img也是在a的范围内,因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

10-案例-banner

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            position: relative;

            margin: 0 auto;

            width: 1226px;
            height:600px ;
        
        }
       .tow{
           position: absolute;
           bottom: 0;


           width: 1226px;
           height: 150px;
           background: black;
           /* 透明度设置 */
           opacity:0.5;
       }
    </style>
</head>
<body>
    <div class="one"> 
        <img src="./images/bg.jpg" alt="">
        <div class="tow"></div>
    </div>
</body>
</html>

 /* 透明度设置 */

           opacity:0.5;

11-定位-固定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .floor1{
            position: fixed;
            right: 50px;
            top: 100px;
        }
    </style>
</head>

<body>
    <img src="./images/floor1.jpg" alt="" class="floor1">
    大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~大家吼,我系大帅哥~
</body>

</html>

通过 position: fixed;的定位固定,无论页面如何滑动都不会改变其固定位置


小结:

12-定位-显示层级

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height: 300px;
        }
        .one{
            position:relative;
            top: 0;
            left: 0;
            /* 添加等级 */
            z-index: 1;

            background-color: blue;
        }
        .two{
            position:absolute;
            top: 100px;
            left: 100px;

            background-color: red;
        }
        .three{
            position: fixed;
            top: 200px;
            left: 200px;

            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

未添加等级前

添加等级 z-index后

 

13-vertical-align-01和14-vertical-align-02

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      /*底部对齐*/
     vertical-align: bottom;
    }
  </style>
</head>
<body>
  <img src="./images/1.jpg" alt=""><input type="text">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      height: 50px;
        /* 自动内减 ,去掉其他多余距离*/
      box-sizing: border-box;
      /*方法一:底部对齐*/
      vertical-align: bottom;

      /* 方法二:设置浮动 */
      /* float: left; */
 
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    /*顶部对齐*/
    input {
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>

 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 解决方法一:改变img标签的垂直对齐方式不为baseline即可 */
      /* vertical-align: bottom; */

      /* 解决方法二:设置img转换成块级元素 */
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>

 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
    }

    img{
      vertical-align:middle;
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="./images/1.jpg" alt="">
  </div>
</body>
</html>


15-光标类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: coral;
            cursor: move;
        }
        .one{
            cursor: pointer;
        }
        .tow{
            cursor: text;
        }
    </style>
</head>
<body>
    <div class="box">我这里是十字型鼠标</div>
    <p class="one">我这里是手型鼠标</p>
    <p class="tow">我这里是工字型鼠标</p>
</body>
</html>

 鼠标悬停在字体,就会出现相对于的鼠标类型。

16-圆角边框-基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /*四个角都取值30px*/
            /* border-radius: 30px; */

            /* border-radius: 左上角10px 右上角20px 右下角30px 左下角40px;*/
            /* 左上角开始顺时针绕一圈 */
            /* border-radius: 10px 20px 30px 40px; */

            /* border-radius: 左上角10px 右上角40px; */
            /* 没有值的取对角值 */
            border-radius: 10px 40px;

            width: 300px;
            height: 300px;
            background-color: coral;


        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

/*四个角都取值30px*/

            /* border-radius: 30px; */

            /* border-radius: 左上角10px 右上角20px 右下角30px 左下角40px;*/

            /* 左上角开始顺时针绕一圈 */

            /* border-radius: 10px 20px 30px 40px; */

            /* border-radius: 左上角10px 右上角40px; */

            /* 没有值的取对角值 */

            border-radius: 10px 40px;

17-圆角边框-工作场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* border-radius:盒子宽高的一半; */
            border-radius: 50%;


            width: 500px;
            height: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 border-radius:盒子宽高的一半;

18-溢出显示效果-overflow

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height:300px;
            background-color: coral;

            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    </div>
</body>

</html>


 overflow: visible;      默认值,溢出来部分可见


 overflow: hidden;      溢出来部隐藏


  overflow: scroll;      无论是否溢出,都显示滚动条


overflow: auto;      根据溢出位置,显示滚动条

19-显示隐藏-基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        .one{
            background-color: coral;
        }
        .two{
            /* visibility: hidden; */

            display: none;

            background-color: cornflowerblue;
        }
        .three{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>


visibility: hidden;  隐藏元素本身,但保留了其位置


  display: none;  隐藏元素本身,同时不保留其位置

20-案例-二维码显示隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 因为有通栏:占满一行的边框,所以需要有一个通栏:占满一行的盒子 */
        .nav {
            height: 40px;
            border-bottom: 1px solid #ccc;
        }

        /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部,所以设置ul为宽度固定并且水平居中的效果(后面项目中所用到的版心) */
        ul {
            list-style: none;
            width: 1200px;
            margin: 0 auto;
        }

        ul li {
            float: left;
            width: 20%;
            height: 40px;
            border-right: 1px solid #ccc;
            /* 自动内减 */
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
        }

        ul .last {
            border-right: none;
        }

        ul li a {
            /* a标签默认是行内元素,宽高由内容撑开,并且无法设置宽高,此时默认情况用户只能点击文字区域才能调整 */
            /* 如果把a标签转换成块级元素,此时可以设置宽高,会让a标签范围更大,用户可以点击调整的区域也越大 */
            display: block;
            /* 宽度不设置块元素会默认占满一行 */
            height: 40px;
            text-decoration: none;
            color: #000;
        }


        ul li a {
            position: relative;
        }

        ul li .app .code {


            position: absolute;

            left: 50%;
            transform: translatex(-50%);
            /* transform: translate(-50%,-50%); */
            top: 41px;

            /*隐藏元素本身*/
            display: none;

        }
    /* 当app这个a标签被hover之后,让code显示 */
        ul li .app:hover .code {
            /*显示元素本身*/
            display: block;
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li><a href="#">我要投资</a></li>
            <li><a href="#">平台介绍</a></li>
            <li><a href="#">新手专区</a></li>
            <!-- 因为用户鼠标放在二维码图片上也能跳转,所以证明img也是在a的范围内,因此把img写在a标签的内部 -->
            <li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li>
            <li class="last"><a href="#">个人中心</a></li>
        </ul>
    </div>

</body>

</html>

运用 display: none;隐藏其本身,再使用:hover方法添加 display: block;显示其本身

21-透明属性opacity

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: red ;
      /* 元素整体透明度 */
      /* opacity: 1; */
      /* opacity: 0; */
      opacity: .5;
    }

  </style>
</head>
<body>
  <div>
    <img src="./images/1.jpg" alt="">
    我是内容
  </div>
</body>
</html>

 想要视频教学?

请点击下方链接吧!

黑马程序员web前端开发入门教程,前端零基础html5+css3+前端项目视频教程_哔哩哔哩_bilibili

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

情绪员Tim

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值