- 浏览: 282453 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
alan.hee:
不错
网站开发的流程 -
crabboy:
这是好东西啊
表格样式的应用——对程序员比较有用(二) -
linkaisheng:
IE6下有相应的解决方法的
position:fixed -
ph4nut:
what a good stuff!
可供选择CSS框架 -
ailiceromatic:
请问piwik的效率怎么样,如果pv是百万级的网站,速度会不 ...
piwik 不容小视的开源网页访问统计系统
参照以上样式做了个简易的纵向菜单
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:rightright; 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;
- }
html代码1
- <body>
- <div id="mainfull">
- <div id="outsidebar"><!---->div>
- <!---->
- <div id="header"><!---->div>
- <!---->
- <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>
- <!---->
- <div id="footer"><!---->div>
- <!---->
- <!---->div>
- <!---->body>
- <!---->html>
效果如下:
当布局位置不同时 存在不小的区别:
第一 主菜单的第一项的宽度难于控制;
第二 主菜单文字内容消失;
html代码2
- <body>
- <div id="mainfull">
- <div id="outsidebar"><!---->div>
- <!---->
- <div id="header"><!---->div>
- <!---->
- <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>
- <!---->
- <div id="footer"><!---->div>
- <!---->
- <!---->div>
- <!---->body>
- <!---->html>
评论
5 楼
nathan.wu
2008-01-24
这个是ie的bug关于li的
解决方法是
生成的
code应该是
</li><li>
<a></a>
</li><li>
解决方法是
生成的
code应该是
</li><li>
<a></a>
</li><li>
4 楼
liujx2005
2007-05-21
很好的,我大力支持
3 楼
tiger.passion
2007-02-27
引用
colaB,colaBa,colaBb
布局用的。
其实代码没有什么变化,我就是把
代码
1. # <!--考勤管理子菜单--> 2. # <div class="systemNav"> 3. # <ul> 4. # <li > 5. # <a href="#"><strong>当天考勤</strong></a> 6. # </li> 7. # <li > 8. # <a href="#"><strong>请假审批</strong></a> 9. # </li> 10. # <li > 11. # <a href="#"><strong>考勤统计</strong></a> 12. # </li> 13. # </ul> 14. # </div> 15. # </div>
这个位置变化了下,嵌在主菜单里就有问题,与主菜单并列放着就没问题。
2 楼
kj23
2007-02-27
字没有的原因无外乎,你的a float了之后不占文档流位置后,被其它元素遮盖了。
不要急,用排除法
不要急,用排除法
1 楼
downpour
2007-02-27
用Firebug调试一下,看看哪些CSS被应用了。
你的HTML代码稍微有点乱,colaB,colaBa,colaBb不清楚是用于做什么的。麻烦解释一下。
你的HTML代码稍微有点乱,colaB,colaBa,colaBb不清楚是用于做什么的。麻烦解释一下。
发表评论
-
Price组件
2012-03-12 23:20 755<span class="price" ... -
HTML5 postMessage
2011-06-30 17:57 2974在HTML5中新增了postMessage方法,p ... -
使用html5和css3开发的3D版俄罗斯方块和机器猫
2010-10-17 22:32 21523D版俄罗斯方块: 这是一款新颖的俄罗斯方块,跟传统的俄 ... -
ie6 背景图片出不来
2009-11-25 21:01 3578在IE6 下,隐藏的浮层在重新显示后,部分区域背景图片显示不 ... -
通过ifame的方式来实现加载Google Doc
2009-06-22 14:52 1178通过iframe在自己网页中加载Google Doc非常简单, ... -
在网页中加载Google Map
2009-06-22 14:34 1974其实想要在自己的网页中加载Google Map很简单 ... -
Firefox特有css扩展样式列表
2009-05-13 16:23 2495Mozilla浏览器支持一些扩展的CSS是以-moz开头的。这 ... -
css hacks中的最小属性选择器
2009-05-13 12:16 1108<!DOCTYPE HTML PUBLIC " ... -
css hacks 中的 if注释
2009-05-13 11:35 868if条件是css hacks中经常会使用到一种hack, ... -
MIME类型导致css在Firefox下无效
2009-05-05 11:32 4268最近十分郁闷,原因是F ... -
图片阴影效果实现
2009-05-05 10:22 2072图片或边框的阴影效果在web app中经常会意见,以下是归纳的 ... -
在Web 中嵌入图表
2009-05-05 10:00 1762可以通过使用 JavaScript 库,CSS,Flash,S ... -
可供选择CSS框架
2009-05-05 09:50 1216在这里你有一个很酷的框架,收集创建的CSS布局。 如果你不 ... -
XHTML 简史及XHTML V2 背后的设计理念
2009-04-13 17:32 838XHTML 简史 理解 XHTML V2 背后隐藏的设计理念 ... -
HTML 5 新增元素
2009-04-13 17:07 1171万维网联盟(W3C)把重点转向将 HTML 的底层语法从标准通 ... -
符合web标准的flash调用方法,解决了浏览器对flash的影响
2009-03-10 14:32 1134SWFObject是一个用于在HTML中方面插入Adobe F ... -
表格样式的应用——对程序员比较有用(三)
2009-03-03 13:56 1423基于表格样式的应用的扩展,有时我们也可以通过 unorder ... -
表格样式的应用——对程序员比较有用(二)
2009-03-03 11:51 1819前一篇文章主要列出了table所有的HTML Tag和CSS ... -
表格样式的应用——对程序员比较有用(一)
2009-03-03 11:25 1763table 所有的HTML Tag <table&g ... -
wmode属性介绍
2008-12-11 14:34 2141wmode 属性 参数值有 Window | Opaqu ...
相关推荐
在CSS(层叠样式表)中,我们可以使用多种技术来实现纵向菜单样式。CSS 是一种用于定义网页外观和格式的语言,允许开发者通过分离内容和表现来控制网页的呈现效果。以下是一些创建纵向菜单样式的常用CSS知识点: 1....
5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式...
102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...
9. **动态tab滑动**:通过tabwSlide可以实现列表项切换内容区域的动画效果,提供了滑动tab的交互体验。 10. **Coda-Slider**:Coda-Slider是一个强大的jQuery滑动门插件,提供平滑的滑动效果和上下翻页控制,适用于...
5.3 使用Intent创建Tab页面 211 5.4 本章小结 212 第6章 Android应用的资源 213 6.1 资源的类型及存储方式 214 6.1.1 资源的类型以及存储方式 214 6.1.2 使用资源 216 6.2 使用字符串、颜色、 尺寸...
//改变列的选定,实现全选或全不选。 CheckBox chkExport ; if( CheckAll.Checked) { foreach(DataGridItem oDataGridItem in MyDataGrid.Items) { chkExport = (CheckBox)oDataGridItem.FindControl("chkExport"); ...
//改变列的选定,实现全选或全不选。 CheckBox chkExport ; if( CheckAll.Checked) { foreach(DataGridItem oDataGridItem in MyDataGrid.Items) { chkExport = (CheckBox)oDataGridItem.FindControl...