web前端开发html5+css3（入门学习笔记）（day12）

涛008

已于 2022-12-17 01:22:08 修改

阅读量125

点赞数

文章标签： css3 前端 html5

于 2022-12-16 23:38:29 首次发布

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128345909

版权

元素的层级

<!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>元素的层级</title>
    <style>
        body{
            font-size: 40px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color:rgb(205,0, 0,.5);
            position: absolute;
            /* 
                开启了定位元素，可通过z-index属性来指定元素的层级
                    z-index需要一个整数作为参数，值越大元素的层级越高
                        元素的层级越高越优先显示
                    如果元素层级一样，则优先显示靠下的元素
                    祖先元素的层级再高也不会覆盖后代元素

            */
            z-index:3;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:rgb(25,0, 0,.5);
            position: absolute;
            top: 50px;
            left: 50px;

        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 75px;
            left: 75px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: rgb(48, 238, 23);
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </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>轮播图的结构部分</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        /* 设置图片的容器 */
        .img-list{
            width: 590px;
            height: 470px;
            margin: 100px auto;
            /* 为ul开启相对定位，目的使ul中的pointer可以相对于ul定位
            而不是相对于初始包含块（html）去定位 */
            position: relative;
        }
        /* 设置li */
        .img-list li{
            position: absolute;
        }
        /* 通过修改元素的层级来显示指定的图片 */
        .img-list li:nth-child(8){
            z-index: 1;
        }
        /* 设置导航点的样式 */
        .pointer{
            position: absolute;
            z-index: 666;
            bottom: 20px;
            left: 40px;
        }
        .pointer a{
            /* 设置元素相左浮动 */
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 2px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255,.3);
            background-clip: content-box;
            border: 2px solid transparent;
        }
        .pointer a.active,
        .pointer a:hover{
            background-color: #fff;
            border: 2px solid rgba(255, 255, 255,.3);
        }
    </style>
</head>
<body>
    <ul class="img-list">
        <li><a href="javascript:;"><img src="./img/1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/4.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/6.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/7.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/8.jpg" alt=""></a></li>
        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
            <a  href="javascript:;"></a>
        </div>
    </ul>
</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>字体</title>
    <style>
        /* 
        font-face可以将服务器中的字体直接提供给用户使用
            1加载速度取决于网速
            2版权
            3字体格式
        */
         @font-face{
            /* 指定字体的名字 */
            font-family: 'myfont';
            /* 服务器中字体的路径 */
            src: url(./font/COOPBL.TTF) format("truetype");
         }
        p{
            /* 字体的相关样式
                color 设置字体颜色
                font-size字体的大小
                    和font-size相关的单位
                    em相当于当前元素的一个font-size
                    rem相当于根元素的一个font-size
                font-family字体族（字体的格式）
                    可选值：
                        serif 衬线字体
                        san-serif 非衬线字体
                        monospace等宽字体
                            指定字体的类别，浏览器会自动使用该类下的字体
                    font-family可以同时指定多个字体，之间用','隔开
                        字体生效时优先使用第一个，第一个无法使用时使用第
                        二个，以此类推。
                    例：Microsoft YaHei,Heiti SC,tahoma,arial,
                    Hiragino Sans GB,"\5B8B\4F53",sans-serif;
            */
            color: red;
            font-size: 60px;
            /* font-family: monospace; */
            font-family: myfont;
            ·
            ·
            ·
        }
    </style>
</head>
<body>
    <p>你好吗?<br>how are you!</p>
</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>图标字体</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <!--
         图标字体（iconfont）
            在网页中经常需要使用一些图标，可以通过图片引入图标
            但图片内存较大，并且不灵活
            在使用图标时，可以将图标直接设置为字体
            再通过font-face的形式来对字体进行引入
            就可以通过使用字体的形式来使用图标。
        fontawesome使用步骤
            1下载https://fontawesome.com/download
            2解压
            3将css和webfonts移动到项目中
            4将all.css引入到网页中
            5使用图标字体
                直接通过类名来使用图标字体
     -->
     <i class="fas fa-bell" style="font-size: 80px; color:red;"></i>
     <i class="fas fa-bell-slash"style="font-size: 80px; color:red;"></i>
     <i class="fas fa-a" style="font-size: 80px; color:green;"></i>
     <i class="fab fa-accessible-icon"style="font-size: 80px; color:red;"></i>

</body>
</html>

图标字体2

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

<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>图标字体2</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li {
            list-style: none;
            color: blue;
        }
        li::before{
            /* 
                通过伪元素设置图标字体
                    1找到要设置图标的元素通过before或after选中
                    2在content中设置字体的编码
                    3设置字体样式
                        fab
                        font-family：‘font awesome 5 brands’；
                        fas
                        font-family：‘font awesome 5 free’；
                        font-weight：900

            */
            content: '\f1b0';
            /* font-family:'Font Awesome 6 Brands' */
            font-family: 'Font Awesome 6 Free';
            font-weight:900;
            color: red;
        }
    </style>
</head>

<body>
    <div class="a">
        <i class="fas fa-star"></i>
    </div>
    <ul>
        <li>
            <!-- <i class="fas fa-star"></i> -->
            横看成岭侧成峰
        </li>
        <li>
            <i class="fas fa-star"></i>
            远近高低各不同
        </li>
        <li>
            <i class="fas fa-star"></i>
            不识庐山真面目
        </li>
        <li>
            <i class="fas fa-star"></i>
            只缘身在此山中
        </li>

    </ul>
    <span class="fas fa-bell"></span>
    <!-- 通过实体使用图标字体
            &#x图标的编码
     -->
    <span class="fas">&#xf0f4</span>
</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>阿里的字体库</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        i.iconfont{
            font-size: 100px;
        }
        p::before{
            content:"\e627" ;
            font-family: 'iconfont';
            font-size: 100px;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe61c;</i>
   <i class="iconfont icon-zhixianghuishou"></i>
    <p>hello</p>


</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>行高</title>
    <style>
        div{
            font-size: 30px;
            /* 可以将行高设置为和高度一样的值，是单行文字在一个元素中垂直居中 */
            line-height: 100px;
            /* 行高（line height）
                    ·行高指文字占有的实际高度
                    ·可以通过line-height来设置行高
                        行高可以直接指定一个大小（px em）
                        也可以直接为行高设置一个整数
                            若是一个整数，行高即就是字体的指定的倍数
                字体框
                    字体框是字体存在的格子，设置font-size实际上就是在
                    设置字体框的高度。
                行高会在字体框的上下平均分配
            */
            border: 1px red solid;
            /* line-height: 1.3333; */
        }
    </style>
</head>
<body>
    <div>人之初，性本善，123451654651654根据用户边缘户借款hi偶奇偶以哦哦6</div>
</body>
</html>