简单新闻网页

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

首先我们来看看结构,一个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
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片