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

最新推荐文章于 2024-07-25 15:19:10 发布
最新推荐文章于 2024-07-25 15:19:10 发布
阅读量617 收藏 2
点赞数 1
分类专栏： web前端 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ675396947/article/details/122199234
版权

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

情绪员Tim
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端CSS基础知识---定位、装饰
m0_64371862的博客
06-12 108
一.属性名position以及属性值：1、静态定位static：标准流中的元素默认就是静态定位 注意点： 1、不能配合方位属性实现移动 2、之后说的定位，一般指的是：相对、绝对、固定2、相对定位relative 特点： 1、需要配合方位属性实现移动 2、相对于自己原来的位置进行移动 3、还占位置，没有脱标3、绝对定位absolute 特点 1、需要配合方位属性实现移动
Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx
11-17
"Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx" 本资源为Web前端设计与开发技术课程的第10章，主要介绍CSS...12. CSS定位：CSS定位可以设置元素的位置，包括absolute、relative、fixed、static和inherit等。
web前端学习-css定位装饰
qq_54422936的博客
07-23 144
web前端学习-css定位装饰
Web--CSS基础
m0_64372178的博客
06-10 1553
常见的需要掌握属性的css属性，以及利用css实现一个小卡片
Web基础01-HTML+CSS
qq_33627452的博客
02-14 1571
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Lánguage)：超文本标记语言超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言:由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML 标签都是预定义好的。例如:使用< img >展示图片W3C标准：网页主要由三部分组成结构：HTML表现：CSS行为：JavaScript学习网站：w3c，菜鸟...Atom。
web前端学习-CSS
yong_19930826的博客
03-22 1707
web前端学习-CSS1 CSS基础1.1 CSS的基础认知1.2 CSS基础选择器1.2.1标签1.2.2 类选择器1.2.3 id选择器1.2.4 通配符选择器1.3 文字和文本样式1.3.1 文字基本样式1.3.2 文字-字体1.3.3 拓展-层叠性1.3.4 font复合属性1.3.5 文本缩进1.3.6 水平对齐方式1.3.3 文本修饰线1.3.3 行高 1 CSS基础 1.1 CSS的基础认知 1.2 CSS基础选择器 1.2.1标签 1.2.2 类选择器 先定义 后使用 每个类都
css 层叠与z-index的示例代码
11-21
CSS中的层叠与`z-index`是Web设计中不可或缺的部分，它们主要用于管理页面上元素的堆叠顺序。在HTML元素的三维概念中，除了水平和垂直位置，元素还会沿着"z轴"叠加。这就引出了层叠等级（stacking context）的概念，...
css-2.0.rar_web前端开发
09-23
**CSS（层叠样式表）2.0：Web前端开发的核心技术** CSS（Cascading Style Sheets）2.0是Web页面布局与样式的基石，是前端开发人员必须掌握的关键技能之一。它允许开发者分离内容（HTML或XML）与表现（样式），从而...
day07（CSS05-定位+装饰）.rar
12-01
今天我们将深入探讨“CSS定位与装饰”这一主题，这是Web开发中不可或缺的部分。"day07（CSS05-定位+装饰）.rar"这个压缩包包含了关于这一主题的学习资料，包括讲义、大纲和代码示例，为深入理解CSS定位和装饰提供了...
css基础-梦之都教学
03-04
【CSS基础-梦之都教学】是为初学者设计的一套教程，旨在让学习者能够轻松掌握CSS的基础知识。CSS，即层叠样式表（Cascading Style Sheets），是一种用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档呈现方式...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 804
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 993
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 370
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 589
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 276
【代码】TS如何处理js模块的类型？
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
m0_71835253的博客
07-25 476
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 226
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 547
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
前端学习1——自学习梳理
qq_63125992的博客
07-24 329
【代码】前端学习1——自学习梳理。
CSS设计指南(第3版) - 网页开发必备经典
此外，书中还可能涵盖了Web字体服务、文本阴影和文本装饰等内容。 5. **页面布局**：布局是网页设计的关键，书中介绍了流式布局、网格系统、响应式布局等技术，帮助读者掌握创建适应不同屏幕尺寸的网页布局。 6. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

情绪员Tim

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

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

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

打赏作者

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

抵扣说明：

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

余额充值