前端小白训练营DAY2

最新推荐文章于 2024-09-18 10:06:00 发布

1four

最新推荐文章于 2024-09-18 10:06:00 发布

阅读量861

点赞数

分类专栏： html 前端 html-css 文章标签： html 前端

本文链接：https://blog.csdn.net/WahLokMa/article/details/70195907

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html-css

4 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

前端小白训练营第二天，学习用HTML创作诗歌《春雪》。通过HTML文档声明、CSS布局和样式调整，实现了诗的展示。重点讲解了HTML的结构布局，以及CSS中清除默认margin和padding、css3样式、列表样式和margin属性的使用。

摘要由CSDN通过智能技术生成

前端小白训练营DAY2

用html写一首诗（春雪）

先布好局
html文档声明格式是HTML5.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>春雪</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    body{
        background-color: #FAF3E1
    }
    </style>
</head>
<body>
    <div>
        <h1>春雪</h1>
        <p>-韩愈</p>
        <ul>
            <li>新年都未有芳华，</li>
            <li>二月初惊见草芽。</li>
            <li>白雪却嫌春色晚，</li>
            <li>故穿庭树作飞花。</li>
        </ul>
    </div>
</body>
</html>

示意图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>春雪</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    body{
        background-color: #FAF3E1;
        font-family:Arial;
    }
    div.content{
    width: 8rem;
    height: 15rem;
    margin: auto;
    overflow: hidden;
    list-style: none;
    }
    div.content h2{
        margin-left: 2rem;
    }
    div.content p{
        color:#FE3044;
        margin-left: 4rem;
        margin-top: 0.5rem;
    }
    div.content li{
        margin-top: 0.5rem;
    }
    </style>
</head>
<body>
    <div class="content">
        <h2>春&nbsp;雪</h2>
        <p>—韩&nbsp;愈</p>
        <ul>
            <li>新年都未有芳华，</li>
            <li>二月初惊见草芽。</li>
            <li>白雪却嫌春色晚，</li>
            <li>故穿庭树作飞花。</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
经过大表哥指导有更好的实现方法（效果不变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>春雪</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
      }
    body{
        background-color: #FAF3E1;
        font:Arial;
        text-align:center;
        margin: auto;
        }
    p{
        line-height: 1.5rem;
    }
    span{
       color:#FE3044;
       margin-left: 4rem;
        }
    </style>
</head>
<body>
        <h2>春&nbsp;雪</h2>
        <span>—韩&nbsp;愈</span>
        <p>新年都未有芳华，</p>
        <p>二月初惊见草芽。</p>
        <p>白雪却嫌春色晚，</p>
        <p>故穿庭树作飞花。</p>  
</body>
</html>

代码解读

*代表所有元素
*{margin: 0;padding: 0;}把所有元素的margin、padding先设置为0，以后根据需要再单独设置某一项的margin和padding数值。
代码中涉及到css3的样式
在html中空格用来表示
css选择器
 csslist-style属性
 cssmargin属性
宽高大小用了rem来替代了px在移动设备上看也不会变形