来一发Float菜单程度居中复杂办法
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。网页制造poluoluo文章简介:今天用ucweb看到了goos发的一篇帖子:谁说Float菜单不成以程度居中,出来看了看,以为办法有点烦琐了,用到了负边距,position:relativel;和很少的一点hack。
今天用ucweb看到了goos发的一篇帖子:谁说Float菜单不成以程度居中,出来看了看,以为办法有点烦琐了,用到了负边距,position:relativel;和很少的一点hack。
我这里另有更复杂的举措,先展现:
实在我表面应当再套一个div,但为了削减碳排放,舍弃。
运转代码框
<!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=utf-8"/><styletype="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120pxauto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;border:solid1pxred;padding:20px;}#navigationli{height:30px;float:left;}#navigationlia{float:left;height:30px;line-height:30px;padding:023px;background:#97C099;}#navigationlia:hover{background:#59c099;color:#fff;}</style><!--><styletype="text/css">#navigation{display:inline;}</style><!--><title>float菜单局中一法</title></head><body><ulid="navigation"><li><ahref="#">Home</a></li><li><ahref="#">News</a></li><li><ahref="#">Store</a></li><li><ahref="#">Group</a></li><li><ahref="#">Community</a></li><li><ahref="#">Help</a></li></ul></body></html>
个中最为关头的是这一句:
<!--><styletype="text/css">#navigation{display:inline;}</style><!-->
为了照应较低版本IE,这里利用了前提正文,感到在IE7以下中,display:inline;的感化就相称于inline-block;。
依据下面代码退化而来的滑动门导航:
运转代码框
<!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=utf-8"/><styletype="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120pxauto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;padding:20px;border:solid1pxred;}#navigationli{height:30px;float:left;}#navigationlia{float:left;background:#97C099url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif)lefttopno-repeat;padding-left:27px;height:30px;overflow:hidden;}#navigationliaspan{height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif)right-352pxno-repeat;padding-right:27px;line-height:33px;cursor:hand;}#navigationlia:hover,#navigationli.currenta{background-position:left-176px;color:#009;background-color:#8597B5;}#navigationlia:hoverspan,#navigationli.currentaspan{background-position:right-528px;}#navigationli.currenta{font-weight:bold;}</style><!--><styletype="text/css">#navigation{display:inline;}</style><!--><title>依据下面代码晋级为滑动门款式</title></head><body><ulid="navigation"><li><ahref="#"><span>Home</span></a></li><li><ahref="#"><span>News</span></a></li><liclass="current"><ahref="#"><span>Store</span></a></li><li><ahref="#"><span>Group</span></a></li><li><ahref="#"><span>Community</span></a></li><li><ahref="#"><span>Help</span></a></li></ul></body></html>
个中,这两句有需要申明一下,以避免被以为是过剩的:
#navigationlia{overflow:hidden;}/*埋没失落IE5.5、6多失落的那3px,不是3pxbug哈!由于height:30px;line-height:33px;在IE5.5、6中高度就是33px了。*/
#navigationliaspan{cursor:hand;}/*照应IE5.5、6、7鼠标放在span下面不呈手型的bug。别的,IE5.5不撑持cursor:pointer;但IE全版本都熟悉cursor:hand;*/
竣工了,弱点就是,写那一行前提正文,关于有xhtml洁癖的人来讲,就像眼里的沙子,想撤除,那就利用hack也不妨!呵呵!
在safari4,chorme,opera10,ie5.5、5、6、7,ff3中均暂未发明成绩。
</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。 还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。 在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。 Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
页:
[1]