Jemin的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">
<style>
/*
Credit: http://www.865171.cn
*/

html {
background: #fff;
}

body {
margin: 0;
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: #fff;
}

#templatemo_container {
background: url(images/templaetmo_container_bg.jpg) no-repeat top;
width: 960px;
margin: auto;
height:300px;
}

#templatemo_menu {
width: 960px;
height: 48px;
background: url(images/templatemo_menu_bg.jpg);
padding: 0 0 0 0;
}

#templatemo_menu ul {
float: right;
margin: 0px;
padding: 0 0 0 0;
width: 960px;
list-style: none;
}

#templatemo_menu ul li {
display: inline;
}

#templatemo_menu ul li a {
float: left;
padding: 16px 40px;
text-align: center;
font-size: 12px;
text-align: center;
text-decoration: none;
background: url(images/templatemo_menu_divider.png) center right no-repeat;
font-size: 15px;
outline: none;
color: #000;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #fbb100;
background: url(images/templatemo_menu_current.png) top center no-repeat;
}

</style>

<body>
<!--主要的框架，所运用到的css样式为：#templatemo_container，特别注意：须要用到background的 no-repeat top样式，及html的头文件-->
<div id="templatemo_container">
<!--菜单项，所利用到的css样式名为：#templatemo_menu，#templatemo_menu ul，#templatemo_menu ul li，#templatemo_menu ul li a ，#templatemo_menu li a:hover, #templatemo_menu li .current -->
<div id="templatemo_menu">
<ul>
<li><a href="#">asdfasdf</a></li>
<li><a href="#">asdfasdf</a></li>
<li><a href="#">asdfasdf</a></li>
<li><a href="#">asdfasdf</a></li>
</ul>
</div>
    </div>
</body>
</html>
posted @ 2010-06-29 11:15  Jamy  阅读(335)  评论(0)    收藏  举报