CSS中的无序排列转为超链接的形式

来源：互联网发布：jst java 编辑：程序博客网时间：2024/05/19 17:22

在布局网页的时候，我们经常要将使用无序排列和超链接。怎样布局呢。下面是将无序排列变为超链接的一段代码：

<!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>

效果如图：有兴趣的话可以自己改变其中的数字试一试：

1 0