CSS+DIV实现多标签页面。
2010-03-29 12:51
429 查看
学习时自娱自乐。
index.html
-----------------------
tab.css
---------------------------
index.html
-----------------------
<!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> <link href="tab.css" mce_href="tab.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="selbar"> <ul> <li class="wbottom addto"><a href="#" mce_href="#">页面1</a></li> <li><a href="index2.html" mce_href="index2.html">页面2</a></li> <li><a href="index3.html" mce_href="index3.html">页面3</a></li> <li><a href="index4.html" mce_href="index4.html">页面4</a></li> <li><a href="index5.html" mce_href="index5.html">页面5</a></li> </ul> </div> <div class="content"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> </body> </html>
tab.css
---------------------------
body{ margin:10px; } .selbar { width:364px; } .content { border-bottom:1px solid #0033FF; border-left:1px solid #0033FF; border-right:1px solid #0033FF; padding:15px; width:332px; } ul { list-style-type:none; margin:0px; padding-left:10px; padding-bottom:23px; border-bottom:1px solid #0033FF; font:bold 12px verdana, arial; } li { background-color:#99CCCC; float:left; height:22px; margin:0px 3px 0px 0px; border:1px solid #0033FF; } a:link,a:visited { text-decoration:none; display:block; padding:3.5px 10px 3.5px 10px; } a:hover { background-color:#CC0000; color:#FFFFFF; } .wbottom { border-bottom-color:#FFFFFF; background-color:#FFFFFF; } .addto a:hover { background-color:#FFFFFF; color:#0033FF; text-decoration:underline; }
相关文章推荐
- div footer标签css实现位于页面底部固定
- 简单实现div+css页面自适应
- 纯CSS+Div 的标签实现代码
- Css实现Div在页面上垂直居中显示
- Css 使div标签下沉到页面最低部
- div+css 误区 html标准标签 css建议 静态页面制作
- ps+div+css打造蓝色后台--login页面实现,ps切片,浏览器兼容
- ps+div+css打造蓝色后台--login页面实现,ps切片,浏览器兼容
- CSS在页面布局中实现div水平居中的方法总结(转)
- css实现高度不固定的div元素模块在页面中水平垂直居中
- div+css实现页面局部打印
- 为Html页面设置背景——通过设置body结构标签和CSS指定背景属性实现
- javaEE02 使用HTML的表单标签编写“注册页面”,使用DIV和CSS重写网站首页
- 实现文字由右向左一个一个的变色输出,可有css+div来控制页面输出位置
- DIV+CSS+javascript实现DIV对象显示在页面任何位置,并随滚动条移动
- div+CSS实现段落首行缩进两个字符(text-indent标签)
- Css实现tab标签效果(一)----------内容为静态的div
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)
- css 实现div在页面上的水平居中问题
- 纯js+css实现 页面弹出div