仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 663|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 带来一篇纯CSS制造简便的垂直导航

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-16 00:22:31 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

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

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

x
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS代码
  1. 以下是援用片断:/*commonstyling*//*setuptheoverallwidthofthemenudiv,thefontandthemargins*/.menu{font-family:arial,sans-serif;width:750px;margin:0;margin:50px0;}/*removethebulletsandsetthemarginandpaddingtozerofortheunorderedlist*/.menuul{padding:0;margin:0;list-style-type:none;}/*浮动列表,因而可让items在一行上,而且他们的绝对定位可让上面的列表显现在准确的地位上*/.menuulli{float:left;position:relative;}/*stylethelinkstobe104pxwideby30pxhighwithatopandrightborder1pxsolidwhite.Setthebackgroundcolorandthefontsize.*/.menuullia,.menuullia:visited{display:block;text-align:center;text-decoration:none;width:104px;height:30px;color:#000;border:1pxsolid#fff;border-width:1px1px00;background:#c9c9a7;line-height:30px;font-size:11px;}/*makethedropdownulinvisible*/.menuulliul{display:none;}/*specifictononIEbrowsers*//*setthebackgroundandforegroundcolorofthemainmenulionhover*/.menuulli:hovera{color:#fff;background:#b3ab79;}/*makethesubmenuulvisibleandpositionitbeneaththemainmenulistitem*/.menuulli:hoverul{display:block;position:absolute;top:31px;left:0;width:105px;}/*stylethebackgroundandforegroundcolorofthesubmenulinks*/.menuulli:hoverullia{display:block;background:#faeec7;color:#000;}/*stylethebackgroundandforgroundcolorsofthelinksonhover*/.menuulli:hoverullia:hover{background:#dfc184;color:#000;}
复制代码
  1. 12下一页
复制代码
XHTML代码
  1. 以下是援用片断:<divclass="menu"><ul><li><aclass="hide"href="../menu/index.html">DEMOS</a><!--[iflteIE6]><ahref="../menu/index.html">DEMOS<table><tr><td><![endif]--><ul><li><ahref="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollars</a></li><li><ahref="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtext</a></li><li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li><li><ahref="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a></li><li><ahref="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a></li><li><ahref="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemap</a></li><li><ahref="../menu/bodies.html"title="funwithbackgroundimages">funbackgrounds</a></li><li><ahref="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a></li><li><ahref="../menu/em_images.html"title="emsizeimagescompared">emsizedimages</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li><li><aclass="hide"href="index.html">MENUS</a><!--[iflteIE6]><ahref="index.html">MENUS<table><tr><td><![endif]--><ul><li><ahref="spies.html"title="acodedlistofspies">spiesmenu</a></li><li><ahref="vertical.html"title="ahorizontalverticalmenu">verticalmenu</a></li><li><ahref="expand.html"title="anenlargingunorderedlist">enlarginglist</a></li><li><ahref="enlarge.html"title="anunorderedlistwithlinkimages">linkimages</a></li><li><ahref="cross.html"title="non-rectangularlinks">non-rectangular</a></li><li><ahref="jigsaw.html"title="jigsawlinks">jigsawlinks</a></li><li><ahref="circles.html"title="circularlinks">circularlinks</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li><li><aclass="hide"href="../layouts/index.html">LAYOUTS</a><!--[iflteIE6]><ahref="../layouts/index.html">LAYOUTS<table><tr><td><![endif]--><ul><li><ahref="../layouts/bodyfix.html"title="Crossbrowserfixedlayout">Fixed1</a></li><li><ahref="../layouts/body2.html"title="Crossbrowserfixedlayout">Fixed2</a></li><li><ahref="../layouts/body4.html"title="Crossbrowserfixedlayout">Fixed3</a></li><li><ahref="../layouts/body5.html"title="Crossbrowserfixedlayout">Fixed4</a></li><li><ahref="../layouts/minimum.html"title="Asimpleminimumwidthlayout">minimumwidth</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li><li><aclass="hide"href="../boxes/index.html">BOXES</a><!--[iflteIE6]><ahref="../boxes/index.html">BOXES<table><tr><td><![endif]--><ul><li><ahref="spies.html"title="acodedlistofspies">spiesmenu</a></li><li><ahref="vertical.html"title="ahorizontalverticalmenu">verticalmenu</a></li><li><ahref="expand.html"title="anenlargingunorderedlist">enlarginglist</a></li><li><ahref="enlarge.html"title="anunorderedlistwithlinkimages">linkimages</a></li><li><ahref="cross.html"title="non-rectangularlinks">non-rectangular</a></li><li><ahref="jigsaw.html"title="jigsawlinks">jigsawlinks</a></li><li><ahref="circles.html"title="circularlinks">circularlinks</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li><li><aclass="hide"href="../mozilla/index.html">MOZILLA</a><!--[iflteIE6]><ahref="../mozilla/index.html">MOZILLA<table><tr><td><![endif]--><ul><li><ahref="../mozilla/dropdown.html"title="Adropdownmenu">dropdownmenu</a></li><li><ahref="../mozilla/cascade.html"title="Acascadingmenu">cascadingmenu</a></li><li><ahref="../mozilla/content.html"title="Usingcontent:">content:</a></li><li><ahref="../mozilla/moxbox.html"title=":hoverappliedtoadiv">mozziebox</a></li><li><ahref="../mozilla/rainbow.html"title="Icanbuildarainbow">rainbowbox</a></li><li><ahref="../mozilla/snooker.html"title="Snookercue">snookercue</a></li><li><ahref="../mozilla/target.html"title="TargetPractise">targetpractise</a></li><li><ahref="../mozilla/splittext.html"title="Twotoneheadings">twotoneheadings</a></li><li><ahref="../mozilla/shadow_text.html"title="Shadowtext">shadowtext</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li><li><aclass="hide"href="../ie/index.html">EXPLORER</a><!--[iflteIE6]><ahref="../ie/index.html">EXPLORER<table><tr><td><![endif]--><ul><li><ahref="../ie/exampleone.html"title="Exampleone">exampleone</a></li><li><ahref="../ie/weft.html"title="Weftfonts">weftfonts</a></li><li><ahref="../ie/exampletwo.html"title="Verticalalign">verticalalign</a></li></ul><!--[iflteIE6]></td></tr></table></a><![endif]--></li></ul><divclass="clear"></div></div>
复制代码
上一页12</p>
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
小妖女 该用户已被删除
8#
发表于 2015-3-20 09:45:53 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
再现理想 该用户已被删除
7#
发表于 2015-3-20 09:45:53 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
分手快乐 该用户已被删除
6#
 楼主| 发表于 2015-3-13 01:09:39 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
爱飞 该用户已被删除
5#
发表于 2015-2-19 00:36:50 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
简单生活 该用户已被删除
地板
发表于 2015-2-6 21:56:51 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
冷月葬花魂 该用户已被删除
板凳
发表于 2015-1-31 16:01:55 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
蒙在股里 该用户已被删除
沙发
发表于 2015-1-23 10:56:21 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
admin 该用户已被删除
楼主
发表于 2015-1-18 06:19:55 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表