木子屋 Dnawo's BLOG

css让页面制作更简单

👤 dnawo 📅 2010-06-02 👁 7481 👍 0 💬 0 🔄 来源:本站原创
图片

一个div加css即可完成上边的效果:

<!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>
    <title>css</title>
    <style type="text/css">
    [color=Red]div 
    {
    	border-top:1px solid #6B90DA; background-color:#EBEFF9; width:200px; height:22px; /* 外观:长,宽,边框 */
    	font-size:15px; font-weight:bold; /* 文本样式 */
    	padding-left:3px; line-height:22px; /* 对齐方式 */
    }[/color]
    ul
    {
    	list-style-type:none;
    	margin:0;
    }
    </style>
</head>
<body>
<div>酷站导航</div>
<ul>
<li>1.<a href="http://www.mzwu.com/">木子屋</a></li>
<li>2.<a href="http://www.163.com/">网易</a></li>
<li>3.<a href="http://www.baidu.com/">百度</a></li>
</ul>
</body>
</html>

相比之下,用table来实现同样的效果则麻烦许多。div+css的优势不仅是让页面更简洁、更直观、可维护,而且还大大简化了页面制作过程,页面制作人员更轻松了。

评论(0)

暂无评论。

验证码
评论需审核通过后显示
← 上一篇 从素数问题看对象思维方式 下一篇 → System.Web.HttpException: 无法使用前导…