您的位置：首页 > 其它

无序列表效果

2015-10-22 11:13 363 查看

无序列表效果

<!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=gb2312" />

<title>3.1页面头部制作练习题</title>

<style type="text/css">

/*在此定义相关样式，控制列表的显示形式*/

.body1 li{

float:left;

width:50px;

height:30px;

list-style-type:none;

text-align: center;

line-height:30px;

}

.body1 a:link,.body1 a:visited{

display:block;

color: #000;

text-decoration: none;

}

.body1 a:hover,.body1 a:active{

display:block;

color: #FFF;

text-decoration: none;

background:#BE3948;

}

</style>

</head>

<body>

<h3>课程难度</h3>



<div class="body1">

<ul>

<li><a href="#">全部</a></li>

<li><a href="#">全部</a></li>

<li><a href="#">全部</a></li>

<li><a href="#">全部</a></li>

</ul>

</div>

</body>
</html>

TOP排行新闻列表

<!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=gb2312" />

<title>3.10新闻中心制作评测题</title>

<style type="text/css">

/*在此定义相关CSS样式*/

*{padding:0;margin:0;font-size:12px;}

a{text-decoration:none;color:#000;}

.topList{

width:300px;

height:180px;

border:1px solid #E8E8E8;

margin-top:10px;}

.topList ul{

padding:5px;

}

.topList li{

list-style-type:none;

padding:5px;

font-family: cursive;

}

.top em{

background:url('http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg') 16px 0px;

background-position:16px 0;

color:#FFF;

}

em{

width:20px;

height:16px;

text-align: center;

font-style:normal;

color:#333;

background:url('http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg')0px 16px;

background-position:0px 16px;

float:left;

}

</style>

</head>

<body>

<div class="topList">

<ul>

<li class="top"><em>01</em>

<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>

</li>

<li class="top"><em>02</em>

<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>

</li>

<li class="top"><em>03</em>

<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>

</li>

<li><em>04</em>

<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>

</li>

<li><em>05</em>

<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>

</li>

<li><em>06</em>

<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>

</li>

</ul>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航