HTML5学习：第一阶段08

最新推荐文章于 2023-03-04 19:55:21 发布

诺卡先生

最新推荐文章于 2023-03-04 19:55:21 发布

阅读量142

点赞数

分类专栏： HTM5

本文链接：https://blog.csdn.net/weixin_44202489/article/details/110233223

版权

HTM5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、照片墙实现

<!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:0;
            padding:0;
        }
        #box{
            width:600px;
            height:600px;
            margin:100px auto;
            background:#eee;
        }
        #box div{
            width:180px;
            height:180px;
            border:1px solid #666;
            float:left;
            margin:9px;
            /* 参照物 */
            position:relative;
        }
        img{
            display:block;
            width:180px;
            height:180px;
            
        }
        img:hover{
            position:absolute;
            width:220px;
            height:220px;
            top:50%;
            left:50%;
            margin-top:-110px;
            margin-left:-110px;
            z-index:1;
        }
    </style>
</head>
<body>
    <div id="box">
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
        <div><img src="../images/a.jpg" alt=""></div>
    </div>
</body>
</html>

2、高度自适应

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            /* 全屏页面 */
            html,body{
                height:100%;
            }
            div{
                height:100%;
                background:pink;
            }
        </style>
    </head>
    <body>
       <div></div>
    </body>
</html>

<!-- 
    一、宽度自适应：
        当块级元素没有设置宽度 或者 宽度为100%
        当前元素跟随父元素发生变化

    二、高度自适应：
        1.高度不设置 或者 height:auto;
        2.最小高度的设置：min-height:100px;
            现代高版本浏览器（不包括ie8以下）：
            如果一个元素设置了了min-height,让当前元素保持一个最小的高度，
            如果内容足够少，显示的高度就为min-height设置的值，
            如果内容足够多，显示的高度就由内容去撑开

        3.全屏页面：
            让子元素去跟随父元素的高度进行变化
            父元素必须要有高度
            html,body{
                height:100%;
            }
 -->

3、高度塌陷

<!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:0;
            padding:0;
        }
        div{
            background:darkblue;
            /* height:130px; */
            overflow:hidden;
            position:relative;
        }
        p{
            width:200px;
            /* height:130px; */
            background:orange;
            float:left;
        }
        h1{
            width:200px;
            height:200px;
            background:tomato;
            position:absolute;
            bottom:0;
            left:0;
        }
    </style>
</head>
<body>
    <div>
        <p>lore</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, porro. Quibusdam dolore ipsum maiores! Quas in quidem nihil, nesciunt vel tenetur aliquam. Ea saepe totam unde iste odio, est nam.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, quisquam atque. Distinctio assumenda labore magni porro corrupti, consequuntur provident sit laborum cupiditate id molestiae quaerat. Inventore doloremque ab eos nihil!  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus natus ipsa veniam perspiciatis voluptate dicta dolores quasi. Explicabo sint facere non suscipit veniam, temporibus ipsam laborum vitae autem sequi. Exercitationem?</p>
        <h1></h1>
    </div>
</body>
</html>

<!-- 
    高度塌陷出现的场景：
        子元素都设置了浮动，父元素没有设置固定高度的时候就会出现

    解决方案：
         1.给父元素固定高度
             不好，不灵活

         2.给高度塌陷的父盒子设置：overflow:hidden;
             原理：overflow:hidden;触发了bfc
                   bfc:计算bfc高度时候，浮动元素也要参与计算
             弊端：本意就是溢出隐藏,会隐藏定位元素

         3.在浮动元素后面加一个空标签，然后给他设置  clear:both/left/right
             弊端：有很多无意义的空标签，造成代码冗余

         4.万能清除法
             高度塌陷的元素:after{
                 content:'';
                 display:block;
                 clear:both;
                 height:0;
                 overflow:hidden;
                 visiblity:hidden;
             }
 -->

4、clear-both

<!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:0;
            padding:0;
        }
        .box{
            background:yellow;
        }
        p{
            width:200px;
            background:#666;
            float:left;
        }
        .clear{
            clear:both;
            height:2px;
            background:red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>1213123</p>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id maiores aliquid architecto inventore modi odio, officiis vel, autem cumque amet laborum suscipit enim est facere eligendi dolore harum. Natus, eaLorem ipsum dolor sit amet consectetur adipisicing elit. Id maiores aliquid architecto inventore modi odio, officiis vel, autem cumque amet laborum suscipit enim est facere eligendi dolore harum. Natus, ea?Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <div class="clear"></div>
    </div>
</body>
</html>

5、伪对象选择器

<!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:0;
            padding:0;
        }
        /* p:after{
            content:"帅呆了";
            content:url(../images/a.jpg);
            font-size:20px;
            color:yellowgreen;
            display:block;
            width:10px;
            height:10px;
        } */
        /* p:before{
            content:"玻璃球 欧巴";
            font-size:30px;
            color:yellowgreen;
        } */
        p{
            width:100px;
        }
        p:first-line{
            
           color:pink;
           font-size:30px; 
        }
    </style>
</head>
<body>
    <p>哈哈哈Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis maiores labore ullam dolores tempora, facilis doloribus laboriosam itaque ex iusto fugiat officia totam hic nihil nostrum consectetur sint exercitationem quos.</p>
</body>
</html>

<!-- 
    :after{}
        在元素后面追加内容  必须搭配content属性使用

    :before{}
        在元素前面追加内容  必须搭配content属性使用


    :first-letter{}
         控制第一个字符

    :first-line{}
         找到对象的第一行
 -->

伪对象使用技巧

<!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:0;
            padding:0;
        }
        h2{
            height:40px;
            line-height:40px;
            text-align:center;
            background:yellowgreen;
            /* 参照物 */
            position:relative;
        }
        h2::before{
            content:"";
            display:block;
            width:50px;
            height:2px;
            background:hotpink;
            /* 定位 */
            position:absolute;
            left:650px;
            top:20px;
        }
        h2::after{
            content:"";
            display:block;
            width:50px;
            height:2px;
            background:hotpink;
            /* 定位 */
            position:absolute;
            right:650px;
            top:20px;
        }
    </style>
</head>
<body>
    <h2>我是标题</h2>
</body>
</html>

6、visibility-hidden

<!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:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
            background:hotpink;
            /* 隐藏 */
            /* display:none; */
            visibility:hidden;
        }
    </style>
</head>
<body>
    <div></div>
    <p>哈哈哈哈</p>
</body>
</html>
<!-- 
    visibility:hidden;   隐藏，占据空间

    display:none;      完全隐藏，不占据空间
 -->

7、表单补充

<!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:0;
            padding:0;
        }
        textarea{
            resize:none;
        }
    </style>
</head>
<body>
    <form action="" method="">
        男:<input type="radio" name="gender" disabled>
        女:<input type="radio" name="gender" checked>

        吃饭<input type="checkbox" name="hobby">
        睡觉<input type="checkbox" name="hobby">
        打豆豆<input type="checkbox" name="hobby">


        <select name="" id="">
            <option value="" >-请选择-</option>
            <option value="" selected>-泸州-</option>
            <option value="">-南充-</option>
            <option value="">-江油-</option>
        </select>


        <textarea cols="" rows=""></textarea>

        <input type="file">

        <input type="submit">
    </form>
</body>
</html>

<!--
    <form action="" method=""></form> 
    <input>
        type="text/password/submit/reset/button"

    控件的补充：
        1.单选按钮
            <input type="radio">
            每一组单选按钮的name属性值必须保持一致

        2.多选按钮
            <input type="checkbox">

        3.下拉列表
            <select>
                <option></option>
            </select>

        4.多行文本域
            <textarea></textarea>
            css属性：resize:none;    禁止拖拽
            html属性：cols    rows  控制宽高（以字符为单位）

        5.上传文件
            <input type="file">

    属性补充：
            默认选中checked="checked"        简写：checked
            禁止选中disabled="disabled"     简写:disabled
            下拉列表的默认选中  selected


     
 -->

8、表单标签补充

<!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:0;
            padding:0;
        }
        fieldset{
            border:0;
            border-top:1px solid red;
        }
    </style>
</head>
<body>
    <form action="" method="">
        <!-- <fieldset>
            <legend>请输入姓名</legend>
            <input type="text">
        </fieldset>     -->

        <label for="boy">男：</label><input type="radio" name="gender" id="boy">
        <label for="girl">女：</label> <input type="radio" name="gender" id="girl">
    </form>
</body>
</html>

<!-- 
    1.表单字段集 :给表单分组
          <fieldset></fieldset>
          fieldset可以嵌套fieldset

    2.表单字段集标题：
         <legend></legend>
    
    ***3.提示标签
         <label for=""></label>
         
 -->