分散对齐,iframe,漂亮的标签页

jojo_java

浏览: 96465 次
性别:
来自: 南京

最近访客更多访客>>

noo_nyy

罗严塔尔

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webkit XHTML CSS HTML

分散对齐：

iframe：

标签页：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<style type="text/css">
body, div, ul, li {
margin:0;
padding:0;
}
.tabs {
background-color:#fad78d;
height:28px;
position:relative;
border:1px solid #ffae00;
padding:0 3px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.tabs ul {
position:absolute;
height:29px;
top:0px;
}
.tabs li {
float:left;
list-style-type:none;
margin:0 3px 0 0;
}
.tabs li a, .tabs li a:hover {
text-decoration:none;
font-size:12px;
font-weight:bold;
}
.tabs li a {
background-color:#f6f6f6;
color:#3f3f3f;
border:1px solid #ffae00;
height:23px;
line-height:23px;
padding:0 5px;
margin-top:4px;
display:block;
float:left;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
}
.tabs li a.selected, .tabs li a:focus {
background:#fff;
color:#e6820e;
cursor:default;
border-bottom-color:#fff;
}
.tabs li a:hover {
background:#fff4d6 url(/images/bg_li_tabs_hover.gif) repeat-x 50% 50%;
color:#3f3f3f;
outline:none;
}
.tabs li a.selected:focus, .tabs li a.selected:hover {
background:#fff;
color:#e6820e;
}
</style>
</head>
<body style="margin:100px;">
<div class="tabs">
<ul class="clearfix">
    <li><a href="#">菜单一</a></li>
    <li><a href="#" class="selected">菜单二</a></li>
    <li><a href="#">菜单三</a></li>
    <li><a href="#">菜单四</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
</ul>
</div>
</body>
</html>

分享到：

滚动图片，滚动文字，滚动任何东西 | Linux-CentOS 5 中文乱码解决

2009-10-28 16:13
浏览 2006
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论