来看看：CSS网页实例：斜角滑动门导航条

只看该作者 · 发表于 2015-1-16 00:10:46

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

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

x

样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
斜角导航条看上往平面感对照强，但完成起来对照贫苦；这是头几天写的一个测试代码，完成时，原本想用复杂的图片加正数来完成；但GIF图片对半通明的效果没法有很好的撑持；以是一边写代码，一边在改图，图片改的对照乱，CSS也没有优化；但效果出来了；写出来和人人分享一下；
起首说一下，要完成的方针：

滑动门，要兼容每一个TAB大概呈现的宽度（字数）不一致的成绩；
背景程序完成起来复杂，次要是标志TAB是不是被选中；
扫瞄器的兼容和放在较粗拙的代码情况中，有很好的体现；

入手下手作了，我先用FW画了一个有点平面感的导航条，基础就是要完成的方针

登录/注册后可看大图

从后向前写结构
<ulclass="tab">
<liclass="one"><ahref="index.php"class="on">乡村首页</a></li>
<li><ahref="kAAE.php">衡宇租售</a></li>
<li><ahref="kAAI.php">雇用求职</a></li>
<li><ahref="kAAk.php">同城举动</a></li>
<li><ahref="kAAU.php">家政服务</a></li>
<li><ahref="kAAt.php">同城寻缘</a></li>
<li><ahref="kAAs.php">二手市场</a></li>
<li><ahref="kAAh.php">车辆交易</a></li>
<li><ahref="kAAO.php">进修培训</a></li>
</ul>
class=one部分作为第一个TAB的特别处置；
class=on作为选中形态；
开写CSS部分：
因为对照复杂，我就不写正文了；
<style>
.tab{float:left;font-size:12px;line-height:1.8}
.tabli{display:inline;}
.tablia{background:url(/articleimg/2008/07/5969/02.gif)no-repeat;float:left;text-decoration:none;}
.tabliaspan{display:block;background:url(/articleimg/2008/07/5969/02.gif)no-repeat;padding:5px10px5px20px;}
.taba:link,.taba:visited{background-position:right-51px;text-decoration:none}
.taba:hover,.taba:active,.taba.on,.taba.on:link,.taba.on:visited{background-position:right-162px;}
.taba:linkspan,.taba:visitedspan{background-position:00;color:#FFF;text-decoration:none}
.taba:hoverspan,.taba:activespan,.taba.onspan,.taba.on:linkspan,.taba.on:visitedspan{background-position:0-107px;color:#000;}
.tab.onea:linkspan,.tab.onea:visitedspan{background-position:left-262px;padding-left:30px;}
.tab.onea:hoverspan,.tab.onea:activespan,.tab.one.on:linkspan,.tab.one.on:visitedspan{background-position:left-212px;padding-left:30px;color:#000}
</style>
用到的图片：

登录/注册后可看大图

效果：
运转代码框
<!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"/><title>http://www.poluoluo.com</title><style>.tab{float:left;font-size:12px;line-height:1.8}.tabli{display:inline;}.tablia{background:url(/jzxy/UploadFiles_333/200809/2008092517144966.gif)no-repeat;float:left;text-decoration:none;}.tabliaspan{display:block;background:url(/jzxy/UploadFiles_333/200809/2008092517144966.gif)no-repeat;padding:5px10px5px20px;}.taba:link,.taba:visited{background-position:right-51px;text-decoration:none}.taba:hover,.taba:active,.taba.on,.taba.on:link,.taba.on:visited{background-position:right-162px;}.taba:linkspan,.taba:visitedspan{background-position:00;color:#FFF;text-decoration:none}.taba:hoverspan,.taba:activespan,.taba.onspan,.taba.on:linkspan,.taba.on:visitedspan{background-position:0-107px;color:#000;}.tab.onea:linkspan,.tab.onea:visitedspan{background-position:left-262px;padding-left:30px;}.tab.onea:hoverspan,.tab.onea:activespan,.tab.one.on:linkspan,.tab.one.on:visitedspan{background-position:left-212px;padding-left:30px;color:#000}</style></head><body><ulclass="tab"><liclass="one"><ahref="http://www.poluoluo.com"target="_blank"class="on">乡村首页</a></li><li><ahref="kAAE.php">衡宇租售</a></li><li><ahref="http://www.poluoluo.com"target="_blank">雇用求职</a></li><li><ahref="http://www.poluoluo.com"target="_blank">同城举动</a></li><li><ahref="http://www.poluoluo.com"target="_blank">家政服务</a></li><li><ahref="http://www.poluoluo.com"target="_blank">同城寻缘</a></li><li><ahref="http://www.poluoluo.com"target="_blank">二手市场</a></li><li><ahref="http://www.poluoluo.com/"target="_blank">车辆交易</a></li><li><ahref="http://www.poluoluo.com/"target="_blank">进修培训</a></li></ul><divstyle="font-size:12px;margin:50px;clear:both"></a></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

只看该作者 · 发表于 2015-1-18 05:30:23

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-1-22 20:46:18

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-31 14:24:38

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-2-6 20:20:06

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-18 15:23:37

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-6 08:45:26

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-13 00:07:20

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-13 00:07:19

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-20 06:51:49

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

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

[DIV+CSS] 来看看：CSS网页实例：斜角滑动门导航条

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

相关帖子