在布局网页的时候,我们经常要将使用无序排列和超链接。怎样布局呢。下面是将无序排列变为超链接的一段代码:
<!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>
</head>
<style type="text/css">
body{
margin:0 auto;
padding:0;
width:800px;
height:800px;
border:1px solid red;
}
#father{
margin:0x;
width:700px;
height:700px;
padding:0;
border:1px solid red;
}
#father ul{
border:1px solid red;
width:600px;
height:600px;
margin-top:50px;/*控制ul的框与父容器的上边距*/
}
#father ul li{
display:inline;
list-style:none;
width:500px;/*在li标签中设置的宽度无效果只能通过内外边距设置边线的宽高*/
padding:00px;/*设置内边距不能控制边框的大小,此步骤无效果*/
margin-right:10px;/*通过设置外边距控制链接的距离*/
margin-top:0;
border:1px solid blue;
background-color:#FF9;
}
#father ul li a{
margin:0 50px;/*黄色线和蓝色线之间的是外边距20px*/
padding:0 20px;/*上线内边距为0,黄色线的上下也为0;黄色线内是内边距控制的*/
border:1px solid yellow;
width:50px;
text-decoration:none;
background-color:#CCC;
}
</style>
<body>
<div id="father">
<ul >
<li>帮助</li>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</body>
</html>
效果如图:有兴趣的话可以自己改变其中的数字试一试: