div+css学习笔记6

最新推荐文章于 2013-12-17 16:52:07 发布

Kang_Nian

最新推荐文章于 2013-12-17 16:52:07 发布

阅读量652

点赞数

分类专栏： Web开发文章标签： CSS web前端

本文链接：https://blog.csdn.net/kang_nian/article/details/17356271

版权

Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、有序列表与无序列表

无序列表

<ul>
<li><p>无序列表1</p></li>
<li><p>无序列表2</p></li>
<li><p>无序列表3</p></li>
</ul>

有序列表

<ol>
<li><p>有序列表1</p></li>
<li><p>有序列表2</p></li>
<li><p>有序列表3</p></li>
</ol>

无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的，无序列表也可以用css定义显示成有序列表

2、横向图文列表实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
	margin:0 auto;
	font-size:12px;
	font-family:Verdana;
	line-height:1.5;
}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form
{
	padding:0;
	margin:0;
}
img
{
	border:0px;
}
a
{
	color:#05a;
	text-decoration:none;
}
a:hover
{
	color:#f00;
}
#layout ul li
{
	width:240px;
	float:left;
	margin:20px 0px 0px 20px;
	display:inline;
	text-align:center;
}
#layout ul li a
{
	display:block;
}
#layout ul li a img
{
	padding:1px;
	border:1px solid #e1e1e1;
	margin-bottom:3px;
}
#layout ul li a:hover img
{
	padding:0px;
	border:2px solid #f98510;
}
</style>
</head>
<body>
<div id = "layout">
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
	<ul>
		<li>
			<a href = "#">
				<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
			</a>
		</li>
	</ul>
</div>
</body>
</html>

运行效果：

Kang_Nian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div+css学习笔记6

1、有序列表与无序列表无序列表无序列表1无序列表2无序列表3有序列表有序列表1有序列表2有序列表3无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的，无序列表也可以用css定义显示成有序列表2、横向图文列表实现Insert title here
复制链接

扫一扫

专栏目录