实验3：动态公司信息展示与个性化列表符号实践-CSDN博客

本文链接：https://blog.csdn.net/weixin_60897770/article/details/125265414

以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。

注：

图片文件建议保存到根目录下
网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。

实验3

1.题目

新建一个test3.html页面，完成如下图所示的HTML文档。

提示：在实际网页制作过程中，为了更高效地控制列表项目符号，通常通过CSS将列表的list-style属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。通过创建一个公司信息动态的案例做具体演示。

(1) 案例效果如图所示。

灵活的列表项目符号

(2)具体实现步骤如下：

可以定义一个div，用于对页面的整体控制。
使用h2标记（仔细观察边框、颜色、粗细等，盒子宽400，高80，左边padding 20px等， border-style、 border-width、border-color、padding-left等）和ul标记将页面分为标题和内容两部分。

为<li>设置背景图像。

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验3</title>
<style type="text/css">
	ul{
		list-style:none;
		list-style-image:url(images/qipao.jpg);
		line-height:30px;
	}.div1{
		border:solid;/*实线*/
		border-color: #69C #CCC #CCC #CCC;
		border-width:4px thin thin thin;
		width:440px;
		height:210px;
	}.div2{
	width: 426px;
	height: 35px;
	padding-top: 12px;
	padding-left: 15px;
	font-size: 24px;
	font-weight: bold;
	border-bottom-width: thin;
	border-bottom-color: #CCC;
	border-bottom-style: solid;
	}
</style>
</head>

<body>
<div class="div1">
    <div class="div2">公司动态</div>
        <ul>
            <li style="color:#9C0;">传智播客大型人才招聘会成功举行</li>
            <li>设计免费公开课-手机数码照片图像精修技巧</li>
            <li style="color:#69C;">花再多钱也买不来的UI面试神器免费送啦</li>
            <li>传智播客2014版全新IT入门教程光盘免费领</li>
        </ul>
</div>
</body>
</html>