学习下CSS网页结构进门教程12：纵导游航菜单

只看该作者 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以说Div+CSS代表的是网络世界发展的方向。它是网站标准中常用术语之一

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
纵导游航菜单也是网站使用中的一种主要情势，所谓纵导游航菜单是指安排在网页左边或右边的从上至下分列的一种导航情势。先看一下效果吧！

登录/注册后可看大图

如图所示的效果，我们先看一下代码布局：

<divid="nav">
<h1>CSS</h1>
<h2><ahref="#">css进门</a></h2>
<h2><ahref="#">css进阶</a></h2>
<h2><ahref="#">css初级</a></h2>
<h1>webUI</h1>
<h2><ahref="#">实际常识</a></h2>
<h2><ahref="#">实战使用</a></h2>
<h2><ahref="#">初级技能</a></h2>
<h1>DOM</h1>
<h2><ahref="#">DOM进门</a></h2>
<h2><ahref="#">DOM使用</a></h2>
<h2><ahref="#">DOM与扫瞄器</a></h2>
<h1>XHTML</h1>
<h2><ahref="#">参考手册</a></h2>
<h2><ahref="#">交换论坛</a></h2>
</div>

从以上能够看出，此次的XHTML部分的代码横向代码略有分歧，我们没有持续利用ul和li标签，实在持续利用ul元素也能无缺的完成纵导游航体系，可是在这光景点我们但愿更多的供应分歧路子来展示css罢了计划的天真与便利性以便于举一反三，开辟更多的计划头脑。
这一次接纳的是div+h1+h2的情势。我们利用div标签设定了一个导航的布局地区。在这个地区中我们利用了h1来作二级分类的题目，h2来做二级分类上面的细节内容。在XHTML的讲法意义中，h1,h2,h3这些标签自己就具有效于对文本举行层级分别的意义，间接利用h1,h2来暗示层级干系，相对在标签中到场id或class来做层级的标志更加复杂和直不雅，在这里利用h1,h2来标志分歧级其余分类称号也其实是再符合不外了。我们来看一看css代码的计划：

#nav{width:100px;border-color:#c5c6c4;border-style:solid;border-width:0px1px1px1px;}
#navh1{margin:0px;padding:4px;font-size:12px;font-weight:bold;font-family:Verdana;border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}
#navh2{margin:0px;padding:4px;font-size:12px;font-family:Verdana;font-weight:normal;}
#navh2a{color:#666666;text-decoration:none;}
#navh2a:hover{color:#999999;text-decoration:underline;}

本css代码部分接纳了简化写法，假如哪句意义看不懂，您能够在Dreamweaver中翻开选择编纂款式表便可检察详细是哪一项了，信任经由如许几回实习，这些代码您已能完整看懂了，申明您离妙手又近了一步了。
人人大概已注重到了，#nav的边框本例中只设置了摆布下和一像素，而没有上，而在h1的款式里设置了上部的上像素？这是为何呢？由于h1的款式上部都有一条横线，假如nav上部再有一条横线的话发展两条了，了局显现出来就是两像素的高度了。
好了，完全的效果能够预览一下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>纵导游航菜单</title><style>#nav{width:100px;border-color:#c5c6c4;border-style:solid;border-width:0px1px1px1px;}#navh1{margin:0px;padding:4px;font-size:12px;font-weight:bold;font-family:Verdana;border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}#navh2{margin:0px;padding:4px;font-size:12px;font-family:Verdana;font-weight:normal;}#navh2a{color:#666666;text-decoration:none;}#navh2a:hover{color:#999999;text-decoration:underline;}</style></head><body><divid="nav"><h1>CSS</h1><h2><ahref="#">css进门</a></h2><h2><ahref="#">css进阶</a></h2><h2><ahref="#">css初级</a></h2><h1>webUI</h1><h2><ahref="#">实际常识</a></h2><h2><ahref="#">实战使用</a></h2><h2><ahref="#">初级技能</a></h2><h1>DOM</h1><h2><ahref="#">DOM进门</a></h2><h2><ahref="#">DOM使用</a></h2><h2><ahref="#">DOM与扫瞄器</a></h2><h1>XHTML</h1><h2><ahref="#">参考手册</a></h2><h2><ahref="#">交换论坛</a></h2></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
通常把清除浮动写成单独的
放在所有浮动div的最下方。

只看该作者 · 发表于 2015-1-18 07:44:46

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-1-26 19:46:53

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-2-4 21:05:49

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-10 11:10:21

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-1 13:01:40

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-17 10:10:41

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-24 07:30:40

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 学习下CSS网页结构进门教程12：纵导游航菜单

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子