HTML/CSS 订阅所有【HTML/CSS】的日志

css让页面制作更简单

编辑:dnawo 日期:2010-06-02

字体大小: 小 中 大


一个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">
    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; /* 对齐方式 */
    }
    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的优势不仅是让页面更简洁、更直观、可维护，而且还大大简化了页面制作过程，页面制作人员更轻松了。

上一篇: 从素数问题看对象思维方式
下一篇: System.Web.HttpException: 无法使用前导 .. 在顶级目录上退出。
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 6706
发表评论
请登录后再发表评论！