导航栏是网页中常用的模块,有很多方法可以实现,下面是用css实现的方法:
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
css代码如下:
#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
/*加菜单间的竖线*/
.menuDiv {width:1px;height:28px;background:#999}
/*定义菜单链接的样式*/
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
解释一下:
<ul></ul>、<li></li>这两个HTML元素它们最主要的作用就是在HTML中以列表的形式来显示一些信息。
当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID
#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px)
display:block;line-height:28px的作用是让文字垂直居中
分享到:
相关推荐
html+jquery+CSS实现最简单的右侧导航栏效果
主要介绍了CSS3的一个简单导航栏实现,无需用到JavaScript,文章最后附有demo,需要的朋友可以参考下
非常简单非常漂亮的一个导航条 html 只用了几个css, 我觉得是最简单的了。
先创建一个div来做为容器,然后把这个导航菜单放到这个内器里.正如下面的代码,我们用无序列表来创建这个导航菜单.在这个导航菜单中Portfolio项下有一个子菜单,我用粗体表示出来,最后说一句别忘了关闭(可以看这个:css...
在标签中,首先显示了一个导航栏,其中包含四个链接:Dashboard、Users、Products和Orders。 然后,使用标签定义了页面的主要部分。在这个部分中,分别展示了以下三个部分: Dashboard部分,包含一个欢迎标题。可以...
责任导航栏 这是一个简单的响应导航栏。 使用HTML,CSS,Javascript
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8、火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧。 运行效果截图如下: 在线演示地址如下: ...
页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。 3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 4. 菜单美观、...
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以,为了避免所有的...
若你想给自己的站点做点小改变,那么在导航栏上做试验就是最有效的方式。 一个设计良好的导航栏不仅仅能使你的站点更加简介和实用,也会直接改变你全部的的网站布局设计。有很多你可以对站点导航栏进行实践的方面...
Web技术之家文章简介:HTML网页超链接标记学习教程 链接标记...根目录相对地址的书写形式也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。根路径以" / "开始,然后是根目录下的目录名。
前几天,在css森林群里收到的一道测试题,看似很简单,却发现是一道非常灵活的题目。而经过几天的思考,尝试了四五种方法实现方式,才找到 现在这个。HTML结构更清晰,代码量最少,CSS最简明。现在与大家共享。
特色简单干净利落,简约也简单,将二进制文件放置到空间根目录就可以访问,不用配置mysql数据库(自定义数据共享,远程下载和上传)首页最上方一栏可以自定义自己的网站(该部分使用共享mysql数据库)一个标签一个...
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。 虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否...
1、网址超多,你无须一年半载的积累,美化版面即可成为一个全新网站。 网址质量怎么样,用了的人才知道! 2、设有网址检查程序,轻松发现不能打开的网站即可关闭。 3、模板均附带PSD分层文件,方便修改。 4、使用...
分类只能一条一条的修改,不是一次性全部修改。 使用须知: 1.必须修改后台地址,英文字母加下划线随意组合,不支持中文。 2.请修改数据库文件名,同时请修改前台include/conn_tsdqq.asp和后台conn.asp配置...
1、网址超多,你无须一年半载的积累,美化版面即可成为一个全新网站。 网址质量怎么样,用了的人才知道! 2、设有网址检查程序,轻松发现不能打开的网站即可关闭。 3、模板均附带PSD分层文件,方便修改。 4、...
页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 所有页面相互超链接,可到三级页面,有5-10个页面组成。 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 菜单美观、醒目,二级...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...