HTML 10.25

最新推荐文章于 2024-09-16 23:05:35 发布

WGY0227

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量158

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/WGY0227/article/details/120957790

版权

HTML第六天

一标准流和脱标流

1 问题：  有人问 为什么有的标签会换行 有的标签在同一行
  因为我们的标签有分类的

  总体来分 分成  标准流 和 脱标流（脱离标准流）


标准流 就是标签自带的特性，自带的特性又有三种情况
A 块级标签
  独占一行 ，默认宽度和父标签同宽，高度取决于内容。可以通过 width和height设定内容的大小
  例如：   div    p   h系列   ol-li  ul-li 

B 行内标签
  默认的宽高取决于内容，不能通过 width和height设定大小。多个行内标签在父标签宽度允许的情况下 在同一行
  例如：   span    a

C 行内块级标签
  默认的宽高取决于内容，可以通过 width和height设定内容的大小，多个行内块标签在父标签宽度允许的情况下 在同一行
  例如:  img  input  button

2 学标准流这个知识点干什么用
  有的时候 我们需要使用 块级标签 但是有希望其能在同一行 此时我们就发现这个标签的块级特征不是我们想要的 所以需要改特征
     <style type="text/css">        
            div {
                width: 200px;
                height: 200px;
                background-color: yellow;
                display: inline-block;
            }       
        </style>
    </head>
    <body>  
        <div>123123</div>
        <div>456456</div>
    </body>
 div默认是块级标签  但是我们希望的效果 行内块才可以实现 所以我们就需要将 div的特征改成 行内块
 此时可以通过 display 属性 修改其特征 ：  block 块   inline 行内    inline-block  行内块   none  隐藏

脱标流 就是脱离标准流 不符合标准流特征  产生一种新的特征
两种方式进行脱标：   浮动  定位

二浮动

1.1 为什么要浮动

 文字环绕效果  我们使用 标准流标签 很难实现这个效果。
所以他们就创造了一个新的  属性 叫做 float  翻译成 浮动
就是为了专门解决 文字环绕 。 他们将 设定float的标签 设定了新特性  文字遇到浮动元素 会自动绕开

1.2 文字环绕

<head>
        <meta charset="utf-8" />
        <title></title> 
    
        <style type="text/css">     
            img {
                float: right;
            }   
        </style>

    </head>
    <body>
        
        <div>
            <img src="img/bdbri.png" width="200" >
            <p>
                2000年，在杨峻荣的推荐下，周杰伦开始演唱自己创作的歌曲；11月7日，发行首张个人专辑《Jay》，并包办全部歌曲的作曲、和声编写以及监制工作 [27]  ；该专辑融合了R&B、嘻哈等多种音乐风格 [28]  ，其中主打歌曲《星晴》获得第24届十大中文金曲优秀国语歌曲金奖 [29]  ，而周杰伦也凭借该专辑在华语乐坛受到关注，并于次年举办的第12届台湾金曲奖颁奖典礼上凭借该专辑获得最佳流行音乐演唱专辑奖，入围最佳制作人奖，凭借专辑中的歌曲《可爱女人》获得第12届台湾金曲奖最佳作曲人奖提名 [30-31]  。
                周杰伦
                周杰伦(24张)
                2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33]  ；该专辑发行后也让周杰伦打开东南亚市场 [32]  ，并于次年凭借该专辑获得第13届台湾金曲奖最佳专辑制作人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项，周杰伦亦凭借专辑中的歌曲《爱在西元前》获得第13届台湾金曲奖最佳作曲人奖 [34]  ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项。
                2002年参演个人首部电视剧《星情花园》；2月，在新加坡新达城国际会议展览中心举行演唱会；7月，发行专辑《八度空间》，除了包办专辑中所有歌曲的作曲外，他还担任专辑的制作人 [35]  ；该专辑以R&B曲风的歌曲为主，并获得g-music风云榜白金音乐奖十大金碟奖、华语流行乐传媒大奖十大华语唱片奖、新加坡金曲奖大奖年度最畅销男歌手专辑等奖项 [36-38]  ；9月28日，在台北体育场举行“TheOne演唱会” [39]  ；12月12日至16日，在香港红磡体育馆举行5场“THE ONE”演唱会 [40]  ；12月25日，在美国拉斯维加斯举办“THE ONE”演唱会；同年，获得第1届MTV日本音乐录影带大奖亚洲最杰出艺人奖、第2届全球华语歌曲排行榜最受欢迎创作歌手奖、第9届新加坡金曲奖亚太最受推崇男歌手奖等奖项 [41-42]  。
            </p>
            
        </div>
        
    </body>

1.3 浮动特点

1 标签设定浮动之后 就会脱离标准流 向左或者向右移动  
2 直到遇到父标签的边界或者其他浮动元素
3 连续浮动的元素在同一行 
4 标签将失去之前的特性 ：   默认宽高取决于内容 可以通过width height调整大小 （和行内快差不多）

1.4 浮动布局

HTML 布局 两个时代：

1  table布局时代 
2  div+css布局（浮动布局）

<head>
        <meta charset="utf-8" />
        <title></title>
        
    
        <style type="text/css">
             * {margin: 0;padding: 0;}
             ul {list-style: none;}
             a {text-decoration: none;}
             
             .haha {background-color: aliceblue; height: 40px;line-height: 40px;}
             .hehe { width: 1190px; margin: 0 auto;  }
             .xixi {float: left;}
             .heihei {float: right;}
             
             .hehe li {float: left;margin-right: 8px;}
        </style>
    
    
    </head>
    <body>
        <div>
            <!-- 导航条  换行 -->
            <div class="haha">
                <!-- 居中 -->
                <div class="hehe">
                    <!-- ul>li*4>a -->
                    <ul class="xixi">
                        <li><a href="">中国大陆</a></li>
                        <li><a href="">亲,请登录</a></li>
                        <li><a href="">免费注册</a></li>
                        <li><a href="">手机逛淘宝</a></li>
                    </ul>
                    <!-- ul>li*6>a -->
                    <ul class="heihei">
                        <li><a href="">我的淘宝</a></li>
                        <li><a href="">购物车</a></li>
                        <li><a href="">收藏夹</a></li>
                        <li><a href="">商品分类</a></li>
                        <li><a href="">千牛卖家中心</a></li>
                        <li><a href="">联系客服</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
    </body>

1.5 浮动坍陷和浮动清除

1 浮动塌陷 
  当一个标签 只包含浮动元素 并且没有设定高度的时候  其高度塌陷为0

2 清除浮动
  <head>
        <meta charset="utf-8" />
        <title></title> 
        <style type="text/css">
           div {background-color: red; overflow: hidden;}
           span {float: left;}
        </style>
    
    
    </head>
    <body>
        
        <div>
            <span>123</span>
            <span>123</span>
            <span>123</span>
        </div>
        
    </body>

定位

1  为什么要定位？
   其实浮动已经能解决很多问题了，但是浮动有一个局限性  只能左右  如果我想往左100
   所以又有了一个操作 叫做 定位

1.2 定位的几种方式

1 默认定位  就是标签不设定的时候 就是默认定位 值 static  称之为 静态定位  其实就是不开启

2 基于浏览器窗口定位  --- 小广告

<head>
        <meta charset="utf-8" />
        <title></title>
        
    
        <style type="text/css">
           
          div {
              width: 100px;
              padding: 10px;
              border: 2px solid red;
              
              position: fixed;
              
              bottom: 100px;
              top: 200px;
          }
           
        </style>
    
    
    </head>
    <body>
        
          <div>
              一刀999 
              <button>关闭</button>
          </div>
        
         <ul>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
            <li>你好 世界</li>
             

3 基于自己原先的位置 进行定位  并且会占据原先的位置
  应用： 经常作为其他定位的父标签定位方式使用
             
 4 基于第一个非static的父标签进行定位 
  如果所有的父标签 都是static默认值 此时以body作为定位坐标系
             
<head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            
            .a1 {border: 2px solid red; width: 500px; height: 500px; margin: 100px auto;}
            .a2 {border: 2px solid green; width: 400px; height: 400px; margin: 50px auto;}
            .a3 {border: 2px solid yellow; width: 300px; height: 300px; margin: 50px auto;}
            .a4 {border: 2px solid green; width: 50px; height: 50px; background-color: pink;}
            
            
            .a3{
                position: relative;
            }
            #hehe {
                position: absolute;
                top:0px;
                left: 50px;
                display: none;
            }
            .a3:hover  #hehe{
                display: block;
            }
        </style>
       
    
    </head>
    <body>
        
        
        <div class="a1">
            <div class="a2">
                <div class="a3">
                    <div class="a4"  id="hehe">1</div>
                    <div class="a4"  id="haha">2</div>
                    <div class="a4">3</div>
                </div>
            </div>
        </div>
        
    </body>

1.3 悬浮窗

悬浮窗
1 先把飘窗位置做好 
2 然后隐藏
3 悬浮的时候展示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            * {margin: 0;padding: 0;}
            ul{list-style: none;}
            a{text-decoration: none;}
            
            ul {
                background-color: aliceblue;
                width: 158px;
                text-align: center;
                position: relative;
            }
            li {
                padding: 5px 3px;
            }
            li:hover{
                background-color: gray;
            }
            li  div {
                position: absolute;
                top: 0px;
                left: 158px;
                display: none;
            }
            
            li:hover  div {
                display: block;
            }
        
        </style>
       
    
    </head>
    <body>
        
        
        
        <ul>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
                <div>
                    <img src="img/1%20(2).png" >
                </div>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
                <div>
                    <img src="img/2.png" >
                </div>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
                <div>
                    <img src="img/3.png" >
                </div>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
                <div>
                    <img src="img/4.png" >
                </div>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
                <div>
                    <img src="img/5.png" >
                </div>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
            </li>
            <li>
                <a href="">手机</a>/
                <a href="">运营商</a>/
                <a href="">数码</a>
            </li>
        </ul>
        
        
    </body>
</html>

页面练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <script type="text/javascript" src="js/jq.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        
        <style type="text/css">
            *{margin: 0;padding: 0;}
            ul{list-style: none;}
            body{background-color: #f4f4f4;}
            .nav-center , .head-center {
                margin: 0 auto;
                width: 1190px;
            }
            .nav-left {
                float: left;
            }
            .nav-right{
                float: right;
            }
            .nav   li {
                float: left;
            }
            .nav {
                height: 30px;
                line-height: 30px;
                background-color: #e3e4e5;
            }
            .nav  li  a {
                color: #999;
            }
            .nav-left  .glyphicon {
                color: #f10215;
            }
            .nav-left {
                position: relative;
            }
            .nav-left div {
                width: 160px;
                background-color: white;
                border: 1px solid gray;
                position: absolute;
                display: none;
            }
            .nav-left:hover  div {
                display: block;
            }
            .nav-left:hover  li{
                background-color: white;
            }
            .header {
                background-color: white;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                text-align: center;
                height: 140px;
            }
            .head-center {
                position: relative;
            }
            
            .head-center  input {
                width: 426px;
                height: 26px;
                padding: 2px 44px 2px 17px;
                border: 2px solid #e1251b;
            }
            .head-center  button{
                height: 26px;
                width: 50px;
                background-color: #e1251b;
                border: 0;
                color: white;
            }
            .c1 {
                position: absolute;
                top: 26px;
                left: 226px;
            }
            .c2 {
                position: absolute;
                top: 55px;
                left: 226px;
            }
            .c3 {
                position: absolute;
                top: 110px;
                left: 203px;
            }
            .c2  a {
                font-size: 12px;
                color: #999;
            }
            .c3  a {
                font-size: 15px;
                font-weight: 700;
                margin: 0 11px;
                color: #333;
            }
            .c3 .c3r {
                color: #e1251b;
            }
            
            .lbt {
                width: 1190px;
                margin: 0 auto;
                margin-top: 30px;
                position: relative;
            }
            .lbt  ul {
                width: 200px;
                height: 446px;
                background-color: rgba(0,0,0,0.5);
                
                position: absolute;
                top: 0;
                left: 0;
            }
            .lbt ul  li {
                padding: 11px 25px;
            }
            .lbt  ul  li  a {
                color: white;
                font-size: 15px;
                font-weight: 600;
            }
            .lbt ul  li:hover {
                background-color: #ff6a00;
            }
            #aaa {
                width: 300px;
                height: 300px;
                background: url(img/01.jpg) no-repeat center center / 100% 100%;
                transition: all 10s;
            }
            #aaa:hover{
                background: url(img/01.jpg) no-repeat center center / 150% 150%;
            }
        </style>
    </head>
    <body>
        
        <!-- 导航条 -->
        <div class="nav">
            <div class="nav-center">
                <ul class="nav-left">
                    <li>
                        <a href="">
                            <span class="glyphicon glyphicon-map-marker"></span>
                            <span>河南</span>
                        </a>
                        <div>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                            <a href="">北京</a>
                        </div>
                    </li>
                </ul>
                <ul class="nav-right">
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                    <li><a href="">我的京东</a></li>
                </ul>
            </div>
        </div>
        
        <!-- 头部 -->
        <div class="header">
            <div class="head-center">
                <div class="c1">
                        <input type="text"><button ><span class="glyphicon glyphicon-search"></span></button>
                </div>
                <div class="c2">
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                    <a href="">iPhone13</a>
                </div>
                <div class="c3">
                    <a href="" class="c3r">优惠卷</a>
                    <a href="" class="c3r">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                    <a href="">优惠卷</a>
                </div>
            </div>
        </div>
        
        <!-- 轮播图 -->
        <div class="lbt">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
              </ol>
            
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?thumb=1&w=1226&h=460" alt="...">
                </div>
                <div class="item">
                  <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1226&h=460" alt="...">
                </div>
               <div class="item">
                 <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11829e973197010c1f012f70aafde8f4.jpg?thumb=1&w=1226&h=460" alt="...">
               </div>
               <div class="item">
                 <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c2b5d308761d257483badf0bc4eca22.jpg?thumb=1&w=1226&h=460" alt="...">
               </div>
              </div>
            
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
            <ul>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
                <li><a href="">笔记本 平板</a></li>
            </ul>
        </div>
        
        
        <div id="aaa">
            
        </div>
        
        
    </body>
</html>