Day0711页面书写及超出隐藏

最新推荐文章于 2024-09-13 17:21:46 发布

goto_w

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量91

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_52696618/article/details/125818892

版权

01色块页面书写

1.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>
        /* @import url(css/sekuai.css); */
    </style>
    <!--外部样式引入-->
    <link rel="stylesheet" href="css/sekuai.css">
</head>

<body>
    <!--导航-->
    <div class="daohang">
        <div class="daohang1">首页</div>
        <div class="daohang2">首页</div>
        <div class="daohang1">首页</div>
        <div class="daohang2">首页</div>
        <div class="daohang1">首页</div>
        <div class="daohang2">首页</div>
        <div class="daohang1">首页</div>
        <div class="daohang2">首页</div>
        <div class="daohang1">首页</div>
        <div class="daohang2">首页</div>
    </div>

    <!--新闻区-->
    <div class="news">
        <div class="news1">1</div>
        <div class="news2">2</div>
        <div class="news3">3</div>
        <div class="news4">4</div>
    </div>

    <!--活动区-->
    <div class="huodong">
        <div class="huodong1"></div>
        <div class="huodong2">
            <div class="huodong2_1"></div>
            <div class="huodong2_2"></div>
            <div class="huodong2_3"></div>
            <div class="huodong2_4"></div>
        </div>
    </div>

    <!--商品区-->
    <div class="goods">
        <!--左-->
        <div class="goods1">
            <div class="goods1_1"></div>
            <div class="goods1_2"></div>
        </div>
        <!--右-->
        <div class="goods2">
            <div class="goods2_1">1</div>
            <div class="goods2_2">1</div>
            <div class="goods2_3">1</div>
            <div class="goods2_4">1</div>
            <div class="goods2_5">1</div>
            <div class="goods2_6">1</div>
            <div class="goods2_7">1</div>
            <div class="goods2_8">1</div>
        </div>
    </div>
</body>

</html>

2.css代码：

/*********直接写css样式********/
*{
    margin: 0;
    padding: 0;
}
/*导航开始*/
.daohang{
    width: 1000px;
    height: 52px;
    background: red;
}
.daohang1,.daohang2{
    width: 100px;
    height: 52px;
    float: left;
    text-align: center;
    line-height: 52px;
}
.daohang1{
    /* width: 100px;
    height: 52px; */
    background: pink;
}
.daohang2{
    /* width: 100px;
    height: 52px; */
    background: green;
}
/*导航结束*/

/*新闻区开始*/
.news{
    width: 1000px;
    height: 246px;
    background: orangered;
    overflow: hidden;
}
.news1,.news2,.news3,.news4{
    width: 229px;
    height: 195px;
    background: greenyellow;
    float: left;
    margin-top: 25px;
}
.news1,.news2,.news3{
    margin-right: 28px;
}
/*新闻区结束*/

/*活动开始*/
.huodong{
    width: 1000px;
    height: 404px;
    background: blue;
}
.huodong1,.huodong2{
    width: 450px;
    height: 404px;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
}
.huodong1{
    background: yellow;
}
.huodong2{
    background: orange;
}
.huodong2_1,.huodong2_2,.huodong2_3,.huodong2_4{
    width: 200px;
    height: 180px;
    background: pink;
    float: left;
}
.huodong2_1,.huodong2_3{
    margin-right: 50px;
}
.huodong2_1,.huodong2_2{
    margin-bottom: 44px;
}
/*活动结束*/

/*商品开始*/
.goods{
    width: 1000px;
    height: 352px;
    background: purple;
}
.goods1{
    width: 170px;
    height: 352px;
    background: paleturquoise;
    float: left;
}
.goods1_1{
    width: 170px;
    height: 250px;
    background: pink;
}
.goods1_2{
    width: 170px;
    height: 102px;
    background: deeppink;
}
.goods2{
    width: 830px;
    height: 352px;
    background: deepskyblue;
    float: left;
}
.goods2 div{
    width: 200px;
    height: 170px;
    background: palegoldenrod;
    float: left;
}
.goods2_1,.goods2_2,.goods2_3,.goods2_5,.goods2_6,.goods2_7{
    margin-right: 10px;
}
.goods2_1,.goods2_2,.goods2_3,.goods2_4{
    margin-bottom: 12px;
}
/*商品结束*/

02样式引入的三种方式

<!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>
</head>
<body>
    <!--样式引入的三种方式
    1.内部样式   <style></style>     一般用于写案例使用
    2.外部样式   
        <link rel="stylesheet" href="css/sekuai.css">   推荐使用，一般用于画页面
        <style> @import url(css/sekuai.css); </style>   了解
    3.内联样式(行内样式)     <div style="color:red;"></div>  使用很少，一般js添加
    -->
</body>
</html>

03css权重问题

<!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{} */
        /* .p1{
            color: red;
        }
        .p2{
            color: red;
        }
        .p3{
            color: red;
        }
        .p4{
            color: red;
        } */
        /* .p1,.p2,.p3,.p4{
            color: red;
        } */
        .div1{
            color: red;
            width: 100px;
            height: 200px;
            background: green;
        }
        div{
            color: yellow;
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- <p>我是文字</p>-->
    <div id="box" class="div1" style="background: orange;">我是盒子</div>
    <!--作用于div身上的样式有：
        color:blue;width:300px;height:200px;background:orange;text-align:center;
    -->
   <!-- <p class="p1">我是文本</p>
    <p class="p2">我是文本</p>
    <p class="p3">我是文本</p>
    <p class="p4">我是文本</p> -->
    <!--
        css选择器权重问题   (谁的css权重高，谁的样式就生效)
        1.标签选择器  div,span,li,a         1
        2.class选择器   .box          10
        3.id选择器   #boss        100
        4.包含选择器    .box h2{}    #boss .box{}   所有选择器权重之和
        5.群组选择器    .p1,#p2,div,.p4{}    是各自选择器自己的权重 
        6.内联样式     1000

        内联样式1000 > id选择器100 > class选择器10 > 标签选择器1
    -->
</body>
</html>

04web模板页面

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>
    <link rel="stylesheet" href="css/web.css">
</head>
<body>
    <!--头部-->
    <div class="toubu com">
        <div class="toubu1">
            <a href="#">
                <img class="logo" src="img/small1_03.jpg" alt="">
            </a>
        </div>
        <div class="toubu2">
            <ul>
                <li class="li1">
                    <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 class="li9">
                    <a href="#">产品介绍</a>
                </li>
            </ul>
        </div>
    </div>
    <!--广告-->
    <div class="banner com">
        <img src="img/small1_10.jpg" alt="">
    </div>
    <!--信息-->
    <div class="msg com">
        <div class="msg1">
            <img src="img/small1_13.jpg" alt="">
            <h2>移动产业</h2>
            <h5>我是小标题内容</h5>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
        </div>
        <div class="msg2">
            <img src="img/small1_13.jpg" alt="">
            <h2>移动产业</h2>
            <h5>我是小标题内容</h5>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
        </div>
        <div class="msg3">
            <img src="img/small1_13.jpg" alt="">
            <h2>移动产业</h2>
            <h5>我是小标题内容</h5>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
        </div>
        <div class="msg4">
            <img src="img/small1_13.jpg" alt="">
            <h2>移动产业</h2>
            <h5>我是小标题内容</h5>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
            <p>我是三行文本</p>
        </div>
    </div>
    <!--新闻-->
    <div class="news com">
        <div class="news1">
            <img src="img/small1_17.jpg" alt="">
        </div>
        <div class="news2">
            <h2>动态新闻</h2>
            <h3>我们一起努力，创造美好的未来</h3>
            <p>我们一起努力，创造美好的未来,我们一起努力，创造美好的未来我们一起努力，创造美好的未来</p>
            <ul>
                <li>
                    <a href="#">要讲究卫生，饭前饭后要洗手,要讲究卫生，饭前饭后要洗手</a>
                </li>
                <li>
                    <a href="#">要讲究卫生，饭前饭后要洗手</a>
                </li>
                <li>
                    <a href="#">要讲究卫生，饭前饭后要洗手</a>
                </li>
                <li>
                    <a href="#">要讲究卫生，饭前饭后要洗手</a>
                </li>
            </ul>
        </div>
        <div class="news3">
            <div class="news3_div">
                <h2>与我们洽谈</h2>
                <img src="img/small1_20.jpg" alt="">
                <h3>400-100-200</h3>
                <p>旭旭：617539979</p>
                <p>旭旭：617539979</p>
                <p>旭旭：617539979</p>
                <p>旭旭：617539979</p>
            </div>
        </div>
    </div>
    <!--地图-->
    <div class="map com">
        <div class="map1">
            <ul>
                <li class="map1_li1">产品介绍</li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
            </ul>
            <ul>
                <li class="map1_li1">产品介绍</li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
            </ul>
            <ul>
                <li class="map1_li1">产品介绍</li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
            </ul>
            <ul>
                <li class="map1_li1">产品介绍</li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
            </ul>
            <ul>
                <li class="map1_li1">产品介绍</li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
            </ul>
        </div>
        <div class="map2">
            <img src="img/small1_29.jpg" alt="">
        </div>
        <div class="map3">
            <div class="map3_div">
                <img src="img/small1_31.jpg" alt="">
                <p>扫描加好友</p>
                <p>公众号</p>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="footer com">公司注公司注册内容公司注册内容册内容</div>
</body>
</html>

css代码：

/*初始化样式*/
/*去掉所有标签自带的内外间距*/
*{
    margin: 0;
    padding: 0;
}
/*去掉列表的小黑点或者数字*/
li{
    list-style: none;
}
/*去掉超链接的下划线*/
a{
    text-decoration: none;
}
/*class选择器允许有重名，也允许有多个名字，多个名字之间用空格隔开
<div class="a1 b1 c1 d1"></div>
*/
.com{
   margin: 0 auto; 
}

/*头部开始*/
.toubu{
    width: 1108px;
    height: 71px;
    background: #232323;
}
.toubu1{
    width: 283px;
    height: 71px;
    /* background: pink; */
    float: left;
}
.toubu1 a{
    overflow: hidden;
}
.logo{
    width: 181px;
    height: 48px;
    margin-left: 11px;
    margin-top: 12px;
}
.toubu2{
    width: 825px;
    height: 71px;
    /* background: deeppink; */
    float: left;
}
.toubu2 ul{
    width: 825px;
    height: 71px;
}
/*第一个li  宽度65px
第2--9个li  宽度95px
*/
.toubu2 li{
    width: 95px;
    height: 71px;
    float: left;
    text-align: center;
    line-height: 71px;
    font-size: 12px;
    background: url(../img/small1_06.jpg) no-repeat right center;
}
.toubu2 .li1{
    width: 65px;
    background: #f15a23;/*去掉背景*/
}
.toubu2 li a{
    color: #fff;  /*字体颜色遇到超链接，必须给超链接*/
}
.toubu2 .li9{
    background: none;
}
.toubu2 li:hover{
    background: #f15a23;
}
/*头部结束*/

/*广告开始*/
.banner{
    width: 1108px;
    height: 466px;
    background: skyblue;
}
.banner img{
    width: 1108px;
    height: 465px;
    border-bottom: 1px solid #d5dddb;
}
/*广告结束*/

/*信息开始*/
.msg{
    width: 1108px;
    height: 388px;
    background: #f5f5f5;
}
.msg1,.msg2,.msg3,.msg4{
    width: 277px;
    height: 388px;
    float: left;
    overflow: hidden;
    text-align: center;
}
/* .msg1,.msg3{
    background: orangered;
}
.msg2,.msg4{
    background: olivedrab;
} */
.msg img{
    width: 151px;
    height: 108px;
    margin-left: 62px;
    margin-top: 56px;
    display: block;/*去掉图片的bug间距*/
}
.msg h2{
    font-size: 24px;
    color: #171829;
    font-weight: 500;
    margin-top: 9px;
    margin-bottom: 9px;
}
.msg h5{
    font-size: 12px;
    color: #334f7a;
    margin-bottom: 11px;
}
.msg p{
    font-size: 16px;
    color: #98b5c7;
    line-height: 21px;
}
.msg1,.msg2,.msg3{
    background: url(../img/line_03.jpg) no-repeat right center;
}

/*信息结束*/

/*新闻开始*/
.news{
    width: 1108px;
    height: 343px;
    background: #fff;
}
.news1{
    width: 333px;
    height: 343px;
    /* background: pink; */
    float: left;
    overflow: hidden;
}
.news1 img{
    width: 328px;
    height: 248px;
    border: 1px solid red;
    padding: 1px;
    background: #eff5f9;
    margin-top: 44px;
}
.news2{
    width: 356px;
    height: 343px;
    /* background: deeppink; */
    float: left;
    padding-left: 16px;
    padding-right: 20px;
    overflow: hidden;
}
.news2 h2{
    font-size: 22px;
    color: #0f2125;
    font-weight: 500;
    margin-top: 44px;
    margin-bottom: 11px;
}
.news2 h3{
    font-size: 18px;
    color: #2f2126;
    font-weight: 500;
    margin-bottom: 10px;
}
.news2 p{
    font-size: 12px;
    color: #a29597;
    /*首行缩进2个字符，可以取负值*/
    text-indent: 2em;/*当前字体大小的倍数*/
    line-height: 20px;
    border-bottom: 1px dashed green;
    padding-bottom: 12px;
}
.news2 ul{
    margin-top: 15px;
}
.news2 li{
    font-size: 16px;
    line-height: 28px;
    background: url(../img/small1_24.jpg) no-repeat left center;
    padding-left: 11px;
    width: 345px;/*添加宽度*/
    white-space: nowrap;/*一行显示*/
    overflow: hidden;/*超出隐藏*/
    text-overflow: ellipsis;/*添加省略号*/
}
.news2 li a{
    color: #564751;
}
.news3{
    width: 383px;
    height: 343px;
    /* background: pink; */
    float: left;
    /* padding-left: 16px; */
    overflow: hidden;
}
.news3_div{
    padding-left: 16px;
    border-left: 1px solid blue;
}
.news3 h2{
    font-size: 22px;
    color: #0f2125;
    font-weight: 500;
    margin-top: 44px;
    margin-bottom: 12px;
}
.news3 img{
    width: 157px;
    height: 30px;
    display: block;
    margin-bottom: 21px;
}
.news3 h3{
    font-size: 20px;
    color: #41423a;
    margin-bottom: 23px;
}
.news3 p{
    font-size: 12px;
    color: #7d6981;
    line-height: 26px;
}
/*新闻结束*/

/*地图开始*/
.map{
    width: 1108px;
    height: 240px;
    background: #222222;
}
.map1{
    width: 533px;
    height: 240px;
    /* background: green; */
    float: left;
    padding-left: 12px;
}
.map1 li{
    font-size: 14px;
}
.map1 li a{
    color: #809399;
    line-height: 26px;
}
.map1 ul{
    overflow: hidden;
    float: left;
    margin-right: 44px;
}
.map1 .map1_li1{
    color: #fff;
    margin-top: 51px;
    margin-bottom: 15px;
}
.map2{
    width: 353px;
    height: 240px;
    /* background: greenyellow; */
    float: left;
    overflow: hidden;
}
.map2 img{
    width: 268px;
    height: 210px;
    margin-left: 37px;
    margin-top: 23px;
}
.map3{
    width: 210px;
    height: 240px;
    /* background: green; */
    float: left;
}
.map3_div{
    width: 192px;
    height: 240px;
    /* background: yellow; */
    margin-left: 18px;
    overflow: hidden;
}
.map3_div img{
    width: 163px;
    height: 163px;
    margin-left: 15px;
    margin-top: 20px;
    display: block;
}
.map3_div p{
    font-size: 12px;
    color: #484644;
    line-height: 21px;
    text-align: center;
}
.map1,.map2{
    background: url(../img/small1_34.jpg) no-repeat right center;
}
/*地图结束*/
.footer{
    width: 1108px;
    height: 50px;
    background: #101010;
    font-size: 12px;
    color: #70706e;
    text-align: center;
    line-height: 50px;
}

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>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <img src="img/small1_10.jpg" alt="">
    <span>我是有变动额文字</span>
</body>
</html>

06单行文本超出显示省略号效果

<!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;
        }
        .box{
            width: 200px;/*添加宽度*/
            height: 200px;
            background: orange;
            white-space: nowrap;/*不换行，让文本一行显示*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow: ellipsis;/*添加省略号*/
        }
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

07overflow属性学习

<!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;
        }
        div{
            width: 200px;
            height: 200px;
            float: left;
            margin: 20px;
        }
        .box1{
            background: green;
            overflow: hidden;
            /* overflow-x: hidden;
            overflow-y: hidden; */
        }
        .box2{
            background: pink;
            overflow: scroll;/*横向和纵向滚动条查看剩余内容*/
        }
        .box3{
            background: gold;
            overflow: auto;/*内容超出方位显示滚动条*/
        }
        .box4{
            background: skyblue;
            overflow: auto;
        }
        .box4 p{
            width: 100px;
            height: 100px;
            background: pink;
            /* overflow: inherit; */
        }
    </style>
</head>
<body>
    <div class="box1">我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，</div>
    <div class="box2">我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，</div>
    <div class="box3">我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，</div>
    <div class="box4">我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，<p>我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，我是盒子</p>的内容，我是盒子的内容，我是盒子的内容，我是盒子的内容，</div>
</body>
</html>

08css属性的继承

<!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: 200px;
            height: 200px;
            background: green;
            color:red;
            font-size: 30px;
            line-height: 40px;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是列表</li>
    </ul>
    <div class="box">
        <span>盒子</span>
    </div>
    <!--css继承:给父元素或者祖宗元素添加某个属性，子元素自动就继承了
    1.文本属性   都可以被继承，color遇到a只能给a
    2.列表属性   可以被继承
    3.背景属性   不可以被继承
    4.其他类型属性  width,height,float,margin,padding,border,overflow等  不可以被继承
    
    请写出你知道可以被继承的属性有哪些？至少10个。
    color,font-size,font-weight,line-height,text-align,text-indent,text-decoration,font-style,font-family,letter-spacing,text-transform,list-style
    -->
</body>
</html>

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;
        }
        .p1{
            font-family: "黑体","微软雅黑";/*字体*/
            font-weight: bold;
            font-style: italic;/*倾斜*/
        }
        .p3{
            font-family: "times new roman";
        }
        .p4{
            /*当前字体大小的倍数*/
            /* line-height: 32px; */
            /* line-height: 2; */
            line-height: 200%;
        }

        .p5{
            font: italic bold 20px/30px "黑体";
            /*font:font-style font-weight font-size/line-height font-family;*/
            letter-spacing: 8px;/*字间距*/
        }
        .p6{
            /*大写*/
            /* text-transform: uppercase; */

            /*小写*/
            /* text-transform: lowercase; */

            /*首字母大写*/
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <p class="p1">我是文本1</p>
    <p class="p2">我是文本1</p>
    <p class="p3">My name is YangXu.</p>
    <p class="p4">我是文本1</p>
    <p class="p5">我是文本1</p>

    <p class="p6">Huawei Wi-Fi 6 train-to-Ground
    </p>
</body>
</html>