HTML、PHP、网页设计,求一个屏幕上方的tab按钮,类似下图

求代码和 .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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

<style type="text/css">

#container {background:#666666; float:left;}

#container ul li {list-style:none;font-weight:bold;color:#FFFFFF; cursor:pointer; float:left; margin:13px;}

#container ul li.aa{ border-bottom:3px #00CC33 solid;}

</style>

</head>


<body>

<div id="container">

<ul>

<li class="aa">Home</li>

<li>About Us</li>

<li>Our Work</li>

<li>Blog</li>

<li>Careers</li>

<li>Contant Us</li>

</ul>

</div>

</body>

</html>

差不多就这样吧。具体布局在你自己的div里面调。 我这个是一个ul来实现的 鼠标点击字体下划线变色(这个在JS中实现,估计你能明白)。字体下划线用border-bottom来实现

 

<!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=gb2312" />

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

<style type="text/css">

#container {width:100%; height:100px;background:#666666; float:left; position:relative;}

#container ul {position:absolute; right:10px; top:10px;}

#container ul li {list-style:none;font-weight:bold;color:#FFFFFF; cursor:pointer; float:left; margin:13px; }

#container ul li.aa{ border-bottom:3px #00CC33 solid;}

</style>

</head>


<body>

<div id="container">

<ul>

<li class="aa">Home</li>

<li>About Us</li>

<li>Our Work</li>

<li>Blog</li>

<li>Careers</li>

<li>Contant Us</li>

</ul>

</div>

</body>

</html>

我有改了改,

追问

。。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-04-24
去昵图网找追问

我要的是代码

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网