论坛首页 → AJAX版 →

使用HTML＋CSS编写一个灵活的Tab页

浏览 71647 次
锁定老贴子 主题：使用HTML＋CSS编写一个灵活的Tab页
该帖已经被评为精华帖
作者 正文
  • kj23
  • 等级: 三星会员
  • 用户头像
  • 性别:
  • 文章: 84
  • 积分: 313
  • 来自: 上海
时间：2007-02-26
ls指教一下

不用图片以外的圆角方案?
返回顶楼
   
0 请登录后投票
  • downpour
  • 等级: 三钻会员
  • 用户头像
  • 性别:
  • 文章: 747
  • 积分: 1638
时间：2007-02-26
gougou8180 写道
不怎么样嘛 挺烂的 东西全是写死的 圆角用的图片 不是用div拼起来


只能说你还没有看懂整个帖子。

不过我倒是对你用div拼起来做圆角很感兴趣，你不妨展示一下实力。
返回顶楼
   
0 请登录后投票
  • tiger.passion
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 8
  • 来自: 上海
时间：2007-02-26
我参照着楼主做了一个简易纵向的菜单，但出现了一点小小疑惑，希望大家帮解决下。
css代码：
* {margin:0; padding:0;}
body {font-size:12px; font-family:宋体; color:#666;}
ul {list-style:none;}

img {border:none;}

/* Apply */
.hackbox {clear:both;}


.colaB {width:816px;background:#c3dbf9;}
.colaBa {width:260px; float:left; background:#e1e9f8;}
.colaBb {width:540px; float:right; background:#FFFFFF; border-right:16px solid #e1e9f8;}

/* mainfull */
#mainfull{width:816px; margin:0 auto;}

#outsidebar {height: 30px;background: url("../images/logo.gif");border-bottom: 1px #FFF solid;}
/* header */
#header {height: 70px;background: url("../images/bar.gif");}
/* body */
#mainpage {width:816px; }





.nav {width:260;  background:url(../images/menu_bg.gif) repeat-x top left;}
.nav h3 a{padding:7px 50px 5px 24px; font-size:14px;  color:#FFF; display:block;}
.nav h3 a:hover{ text-decoration:none;}
.systemNav{ margin-top:10px;}
.systemNav ul {padding:10px 20px;}
.systemNav ul li{height:25px;padding-top:10px;}
.systemNav ul li a{padding:7px 50px 5px 50px; height:25px;  background:url(../images/new.gif) no-repeat center left;}
.systemNav ul li a:hover{border:1px solid #3c6eef; text-decoration:none;}




#content{ height:400px;}

/* footer */
#footer {
	height: 25px;
	background: #C3DBF9;
	border-top: 1px #F2F7FD solid;
}


html1代码：
<!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>配角 - 人物介绍 - Tears to Tiara中文专题站</title>
<meta name="Generator" content="Notepad" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="All" name="Robots" />
<meta name="SearchTitle" content="Tears to Tiara中文专题站" />
<meta name="SearchDescription" content="Tears to Tiara的相关人物介绍。" />
<meta name="Author" content="quatrn@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="Tears to Tiara的相关人物介绍。" />
<meta name="Copyright" content="youreyes.cn" />
<meta name="DC.Date" scheme="iso8601" content="2006-12-15" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Youreyes.cn" />
<meta name="Last update" content="quatrn@163.com" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/back2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainfull">
	<div id="outsidebar"></div>
	<!--header-->
	<div id="header"></div>
	<!--mainpage-->
	<div id="mainpage">
		<div class="colaB">
			<div class="colaBa">
				<!--考勤管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理</a></h3>
					
				</div>
				<!--考勤管理子菜单-->
				<div class="systemNav">
					<ul>
						<li >
							<a href="#"><strong>当天考勤</strong></a>
						</li>
						<li >
							<a href="#"><strong>请假审批</strong></a>					
						</li>
						<li >
							<a href="#"><strong>考勤统计</strong></a>
						</li>
					</ul>
				</div>
				<!--教学管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理</a></h3>
				</div>
			
				
				<!--家校互通-->
				<div class="nav">
					<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通</a></h3>
				</div>
				
				<!--系统管理-->
				<div class="nav">
					<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理</a></h3>
				</div>
			</div>
			<div class="colaBb">
				<div id="content"></div>
			</div>
			<div class="hackbox"></div>
		</div>
	</div>
	
	<!--footer-->
	<div id="footer"></div>
	<!--footer end-->
</div>
</body>
</html>

html2代码：
<!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>配角 - 人物介绍 - Tears to Tiara中文专题站</title>
<meta name="Generator" content="Notepad" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="All" name="Robots" />
<meta name="SearchTitle" content="Tears to Tiara中文专题站" />
<meta name="SearchDescription" content="Tears to Tiara的相关人物介绍。" />
<meta name="Author" content="quatrn@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="Tears to Tiara的相关人物介绍。" />
<meta name="Copyright" content="youreyes.cn" />
<meta name="DC.Date" scheme="iso8601" content="2006-12-15" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Youreyes.cn" />
<meta name="Last update" content="quatrn@163.com" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/back2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainfull">
	<div id="outsidebar"></div>
	<!--header-->
	<div id="header"></div>
	<!--mainpage-->
	<div id="mainpage">
		<div class="colaB">
			<div class="colaBa">
				<!--考勤管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理</a></h3>
					<!--考勤管理子菜单-->
					<div class="systemNav">
					<ul>
						<li >
							<a href="#"><strong>当天考勤</strong></a>
						</li>
						<li >
							<a href="#"><strong>请假审批</strong></a>					
						</li>
						<li >
							<a href="#"><strong>考勤统计</strong></a>
						</li>
					</ul>
					</div>
				</div>
				
				<!--教学管理-->
				<div class="nav">
					<h3 ><a href="chara01.html" title="男主角" class="text666">教学管理</a></h3>
				</div>
			
				
				<!--家校互通-->
				<div class="nav">
					<h3 ><a href="chara02.html" title="女主角" class="text666">家校互通</a></h3>
				</div>
				
				<!--系统管理-->
				<div class="nav">
					<h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理</a></h3>
				</div>
			</div>
			<div class="colaBb">
				<div id="content"></div>
			</div>
			<div class="hackbox"></div>
		</div>
	</div>
	
	<!--footer-->
	<div id="footer"></div>
	<!--footer end-->
</div>
</body>
</html>

执行代码一是好的，但代码二却有问题，始终想不明白~~~
返回顶楼
   
0 请登录后投票
  • tiger.passion
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 8
  • 来自: 上海
时间：2007-02-26
效果如图：
返回顶楼
   
0 请登录后投票
  • tiger.passion
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 9
  • 积分: 8
  • 来自: 上海
时间：2007-02-26
代码2效果如图：
返回顶楼
   
0 请登录后投票
  • gao277
  • 等级: 初级会员
  • 用户头像
  • 文章: 21
  • 积分: 88
时间：2007-02-27
不错的好东西，收藏一下
返回顶楼
   
0 请登录后投票
  • jerry_shen
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 61
  • 积分: 94
  • 来自: 上海
时间：2007-02-27
各位，麻烦问问示例的登入用户名和密码，在代码里好像找不到吗。
返回顶楼
   
0 请登录后投票
  • godson_2003
  • 等级: 初级会员
  • 用户头像
  • 文章: 120
  • 积分: 0
时间：2007-02-28
效果很好啊

楼主能不能再发一些关于表单 列表的demo?
返回顶楼
   
0 请登录后投票
  • netfishx
  • 等级: 五星会员
  • 用户头像
  • 文章: 847
  • 积分: 569
  • 来自: 北京
时间：2007-02-28
gougou8180 写道
不怎么样嘛 挺烂的 东西全是写死的 圆角用的图片 不是用div拼起来

圆角效果如果不用css3，还真不知道怎么写出来。请指教一下
返回顶楼
   
0 请登录后投票
  • Readonly
  • 等级: 资深会员资深会员
  • 用户头像
  • 性别:
  • 文章: 1266
  • 积分: 3268
时间：2007-02-28
netfishx 写道
圆角效果如果不用css3，还真不知道怎么写出来。请指教一下

please google it:

http://www.spiffycorners.com/
返回顶楼
   
0 请登录后投票
论坛首页 → AJAX版

跳转论坛:
JavaEye推荐