DIV+CSS布局实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#sample{

MARGIN: 10px 10px 10px 10px;

border:blue 1px dotted;

padding:20px 10px 20px 10px;

text-align:center;

LINE-HEIGHT:150%; WIDTH:60%;

}

body,div {font-size:12px;}

#submenu {

MARGIN: 0px 8px 0px 8px;

PADDING: 4px 0px 0px 0px;

BORDER: #fff 1px solid;

BACKGROUND: #dfdfdf;

COLOR: #666;

HEIGHT:25px; }

#submenu ul {

CLEAR: left;

MARGIN: 0px;

PADDING:0px;

BORDER: 0px;

LIST-STYLE-TYPE: none;

TEXT-ALIGN: center;

DISPLAY:inline;

}

#submenu li {

FLOAT: left;

DISPLAY: block;

MARGIN: 0px;

PADDING: 0px;

TEXT-ALIGN: center}

#submenu li a {

DISPLAY: block;

PADDING:2px 3px 2px 3px;

BACKGROUND: url(attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;

FONT-WEIGHT: bold;

WIDTH: 100%;

COLOR: #444;

TEXT-DECORATION: none;

}

#submenu li a:hover {

BACKGROUND: url(attachments/month_0612/42006122221553.gif) #C61C18 no-repeat 2px 8px;

COLOR: #fff; }

#submenu ul li#one A { WIDTH: 60px}

#submenu ul li#two A { WIDTH: 80px}

#submenu ul li#three A { WIDTH: 80px}

#submenu ul li#four A { WIDTH: 90px}

#submenu ul li#five A { WIDTH: 80px}

#submenu ul li#six A { WIDTH: 80px}

#submenu ul li#seven A { WIDTH: 60px}

#submenu ul li#eight A { WIDTH: 90px}

#submenu ul li#nine A { WIDTH: 80px}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<div id="sample">DIV+CSS布局</div>

<ul>

<li id="four"><a title="标准的好处" href="http://www.yzci.com/benefits.html">标准的好处</a></li>

<li id="eight"><a title="资源及链接" href="http://www.yzci.com/resources.html">资源及链接</a></li>

</ul>

</div>

</body>

</html>

http://www.52css.com/

posted on 2008-07-18 14:19 小角色阅读(607) 评论(0) 收藏举报