简单新闻网页

这是一个向列表的一个网页，有点简陋，凑活着看吧

首先我们来看看结构，一个div里包含了几个p标签，当然，也可以用<ul> <li></li><ul>标签来代替，作为一个新手，适合用来练手，代码放最后了

一个网页不能只有文字，也得有修饰，所有我们可以在这些段落前加写图片

添加图片的方法也有很多，但是更快捷，更方便的方法我绝的还是使用伪元素

::before

这个伪元素的作用其实就是在前面添加一些东西，你可以在里面放些图片，这样看起来就会好看那么一点，至少看起来没有那么单调。

重要的东西都讲了，那么下面来看看完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页面</title>
    <style>
        :root{font-family: "楷体"}
        p:nth-of-type(even){
            color:red;
        }
        p:nth-of-type(odd){
            color:green;
        }
        h1::before{
            content:url("tp/laba.jpg");
        }
        p:before{
            content: url("tp/fdj.jpg");
        }

    </style>
</head>
<body>

    <h1>招聘信息</h1>
    <hr>
    <p>北京厚石人和信息科技公司招聘人才</p>
    <P>上海微甲网络科技公司招聘工程师</P>
    <p>永特三六五公司招聘网络管理员</p>
    <p>中国科学技术研究所招聘实习生</p>
    <p>Unity科学技术工厂所招聘实习生</p>
    <p>上海368网络科技公司招聘工程师</p>
    <p>杭州点点咨询公司招聘网络管理员</p>
    <hr>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END