HTML5（css定义招聘网页样式案例）

理邮

于 2021-11-27 23:55:05 发布

阅读量1.8k

点赞数

文章标签： css html5 css3

本文链接：https://blog.youkuaiyun.com/qq_52638405/article/details/121585797

版权

这是一份招聘信息的展示，包括多个工作职位描述。每个职位描述简短且不具具体细节，如‘北京第三方加删除不是的’、‘各供热公司打工故事梗概各位’等。页面使用了楷体字体，并在文本前添加了图标，奇数行文本呈蓝色，偶数行文本为浅绿色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    :root{font-family:"楷体"；}
			h3:before{content: url(img/密码框小眼睛.png);}
			p:nth-of-type(odd){color: #29D3F8;}
			p:nth-of-type(even){color: aquamarine;}
			p:before{content: url(img/密码框小眼睛.png);}
		</style>
	</head>
	<body>
		<h3>招聘信息</h3>
		<hr />
		<p>北京第三方加删除不是的</p>
		<p>发货时间的腹背受敌vds</p>
		<p>诶喔是SV搜VN滴哦打或过热</p>
		<p>肥大佛的费uesovc费欧派</p>
		<p>各供热公司打工故事梗概各位</p>
		<p>发的发的顺丰认同个人不是的</p>
		<p>过生日给人家收费的</p>
		<hr />
	</body>
</html>

代码中，“:root”用于定义页面所有元素样式，“:before”用于添加文本前面的图标，“:nth-of-type(odd)”用于设置奇数行文本样式，“nth-of-type(even)”用于设置偶数行的文本样式，效果图如下：