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

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

2016-05-15 10:57 519 查看

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

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

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

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

标签：

相关文章推荐

新的分享

章节导航