如何学习Html5字体与初体框架【一】

道墨思冥

已于 2022-08-30 20:35:19 修改

阅读量248

点赞数 7

分类专栏：五、前端文章标签： html 前端 html5 css

于 2022-08-01 18:42:10 首次发布

CSDN-ThinkLnk/B站-道墨思

本文链接：https://blog.csdn.net/qq_39395109/article/details/126107280

版权

五、前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

诗歌和广告商品栏

编辑样式》》》

诗词Html5样式：

他们是剧中的

因为以前编辑的了

现在可以靠注释了解

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

<head>
    <meta charset="utf-8" />
    <title>诗词</title>
    <link rel="icon" href="" type="image/gif">

    <link href="../诗词/css/BeautyTeacher.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:darkgreen;">
    <div class="Main_body">
        <p>
            <h5 class="Dx"><p1 class="Deep_blue">初相遇</p1>
                &#12288
            <p2 class="earth">文/席慕容</p2>
            </h5 >

            <br>
            

            <p3 class="Purple">美</p3>
            丽的梦和美丽的诗一样，都是可遇而不可求的，常常在

            最没能料到的时刻里出现。

            <br>
            <br>
            <br>

            我喜欢那样的梦，在梦里，一切都可

            以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然

            都能重回时的狂喜与感激。

            <p4 class="Content_blue">胸怀中满溢着幸福，只因你就在我眼前</p4>

            ，对我微笑，一如当年。

            <br>
            <br>
            <br>
            <br>


            <p5 class="Green">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p5>

        </p>
    </div>

</body>

</html>

诗词css样式：

/*引入的字体*/

@font-face {
    /* 我给字体起的名字 */
    font-family:'BeautyTeacher' ;
    /* 引入字体的路径 */
    src: url(../字体/MeowScript-Regular.ttf);
}

@font-face {
    font-family:'BeautyTeacher-mua~' ;
    src: url(../字体/ZCOOLKuaiLe-Regular.ttf);
  }

/*主体*/

.Main_body{
    width: 500px;
    height: 500px;
    /* font-size: 28px; */
    font-weight: bold;
    font-family:'BeautyTeacher';
    background: rgb(159, 182, 197);
    margin: auto ;
}
.Dx{
    text-align:center
}

/*字体颜色*/

/*Deep blue*/
/*59,89,108*/
/*---------*/

.Deep_blue{
    color: rgb(59,89,108);
    font-size: 28px;
    text-shadow: 1px 1px 2px #000;
}

.earth{
    color: rgb(135,131,131);
    font-size: 18px;
    text-shadow: 1px 1px 2px #000;
}

.Purple{
    color: rgb(100,71,206);
    font-size: 26px;
    text-shadow: 2px 2px 3px rgb(75, 74, 74);
}

.Content_blue{
    color: rgb(60,79,149);
    font-size: 26px;
    font-style: italic;
}

.Green{
    color: rgb(33, 49, 38);
    font-size: 16px;
    text-decoration:underline
}

商品卡片

Html5样式：

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

<head>
    <meta charset="utf-8" />
    <title>作业3.商品卡片</title>
    <link rel="icon" href="" type="image/gif">

    <link href="../商业卡片-图/css/text.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:rgb(255, 255, 255);">
    <div class="Main_main">
        <div class="main">
            <!--设置div大小-->

            <img class="img" src="../商业卡片-图/img/彩电.jpg" alt="呆脑">
            <!--引入图片并设置图片大小防止溢出-->

            <p class="">
                <!--设置字体 大 主体-->


                <p1 class="The_first_line">
                    Pro 14 增强版 i5 独显 - Win11
                </p1>

                <br>

                <p2 class="The_second_line">
                    <!--字体特别-小-灰色-->
                    2.5K超视网膜全面屏
                </p2>

                <br>

            <h4>
                <p3 class="Third_row_number_one">
                    <!--字体特别-黄色-->
                    5299元
                </p3>


                <del>
                    <p4 class="Third_row_number_two">
                        <!--字体特别-删除符-灰色-->
                        5599元
                    </p4>
                </del>
            </h4>

            </p>
        </div>
    </div>

</body>

</html>

css样式：

/*引入我使用的字体*/

@font-face {
    font-family:'BeautyTeacher-mua~' ;
    src: url(../字体/MeowScript-Regular.ttf);
}

/**/
.Main_body{
    font-family:'BeautyTeacher-mua~';
}

/**/
.main{
    margin: auto;
    width: 36%;
    height: 670px;
    text-align:center
}

/**/
.img{
    /* margin: auto; */
    width: 360px;
    height: 450px;
}


/**/
.The_first_line{
    font-size: 28px;
}

/**/
.The_second_line{
    font-size: 24px;
    color: rgb(98,98,98);
}

/**/
.Third_row_number_one{
    font-size: 28px;
    color: rgb(173, 113, 75);
}

/**/
.Third_row_number_two{
    font-size: 28px;
    color: rgb(98,98,98);
}

/*---------------喜欢的小伙伴点个赞吧！！！--------------*/