您的位置：首页 > Web前端 > CSS

[Web前端技术教学]CSS列表样式范例练习-无序列表-1

2016-11-21 09:20 711 查看

[Web前端技术教学]CSS列表样式范例练习-无序列表-1

练习目标:

每项带有小图标及点下画线的无序列表的制作,这是一种练习.

相关代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
li {
height: 40px;
width: 600px;
line-height: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left:30px;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: 1px;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
margin-top: 4px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
ul {
list-style-image: url(BgPic/bg22.png);
list-style-type: none;
}
li:hover{
background-color: #FF0000;
color:#FFFFFF
}
-->
</style>
</head>
<body>
<ul>
<li>楼市重点调控名单再增4城 新一轮调控风暴即将来袭</li>
<li>人民币击穿“铁底” 一大波上市公司损失过亿</li>
<li>证监会新轮人事调整 稽查局长罗子发兼任稽查队长</li>
<li>直播:创业板狂攻2200 手游概念第四把火</li>
<li>恒大高位接盘万科玄机:或与深圳市政府达桌底协定</li>
</ul>
</body>
</html>

图片说明:

其中用到的CSS背景图片为 bg22.png 如下所示 ,可以右击另存下载:



效果如下:



实效测试:

点击此处 http://www.cnblogs.com/exesoft/p/6160756.html 密码为:exesoft
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航