标题: css让页面制作更简单

作者: dnawo

日期: 2010-06-02 11:50 AM

分类: HTML/CSS

内容:
一个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的优势不仅是让页面更简洁、更直观、可维护，而且还大大简化了页面制作过程，页面制作人员更轻松了。

+ 查看当前日志评论 (0)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: css让页面制作更简单

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms