仓酷云

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

[DIV+CSS] 来看看:CSS实例:创立有图标的网站导航菜单

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:01:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
破洛洛文章简介:在我创立的每个互联网使用中,我都试图制止创立完整由图片构成的菜单。在我看来,菜单体系中应当利用笔墨。如许做也会让菜单变得更洁净拖拉、明晰和易读,不必思索使用程序怎样读取它,和页面缩小的时分也不会掉真等。也许这只是我的设法?可是我们不克不及创立即悦目又
在我创立的每个互联网使用中,我都试图制止创立完整由图片构成的菜单。在我看来,菜单体系中应当利用笔墨。如许做也会让菜单变得更洁净拖拉、明晰和易读,不必思索使用程序怎样读取它,和页面缩小的时分也不会掉真等。也许这只是我的设法?可是我们不克不及创立即悦目又好用的菜单吗?
上面是创立上面的有图标撑持的导航菜单的代码和款式。

点击这里检察演示(在新窗口中翻开).
基础标签

<!--navigation.html-->
<ulclass="nav">
<liclass="home"><ahref="#link">home</a></li>
<liclass="about"><ahref="#link">about</a></li>
<liclass="work"><ahref="#link">work</a></li>
</ul>
TheCSS
/*style.css*/
.nav{width:550px;height:50px;padding:0px25px;margin:0px;background:url(img/bg.gif)repeat-x;border:1pxsolid#efefef;}
.navli{float:left;width:125px;height:50px;display:inline;padding:0px;margin:0px25px0px0px;}
li.home{background:url(img/nav-home.gif)topleftno-repeat;}
li.home:hover{background:url(img/nav-homeHover.gif)topleftno-repeat;}
li.about{background:url(img/nav-about.gif)topleftno-repeat;}
li.about:hover{background:url(img/nav-aboutHover.gif)topleftno-repeat;}
li.work{background:url(img/nav-work.gif)topleftno-repeat;}
li.work:hover{background:url(img/nav-workHover.gif)topleftno-repeat;}
.navlia{display:block;padding:15px0px0px50px;color:#000;font-size:18px;font-family:arial;height:35px;text-decoration:none;}
.navlia:hover{color:#C00;}
在更精密的网站计划中,菜单会变的更多的款式来撑持。公允的说,假如你想利用一款特定的字体——现实上很少有网站同意如许做——那末你就必要利用图片、Flash或一些邪术。最初,尽量坚持易用性长短常主要的。
进修的最好体例是实习,试着吧图标挪动到笔墨的前面,大概创立一个有图标的垂直导航菜单体系。
--------------------------------------------------------------------------------
神飞以为,实在这是一个很复杂的教程,属于进门级其余,没有甚么初级的手艺,只是供应了一个制造带图标的程度导航菜单的办法。从网站的功能下去说,如许做并非很好,如今最保举的办法是CSSSprite,就是将用到的那些图片放到一个图片文件中,然后经由过程background-position来分离挪用。别的,关于利用特别笔墨的情形,如今的情形有了一点小变动,就是CSS3已入手下手撑持网站的内嵌字体了。


你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。
只想知道 该用户已被删除
沙发
发表于 2015-1-17 23:52:25 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
变相怪杰 该用户已被删除
板凳
发表于 2015-1-24 14:27:16 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
第二个灵魂 该用户已被删除
地板
发表于 2015-2-1 17:24:02 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
再见西城 该用户已被删除
5#
发表于 2015-2-7 13:52:49 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
简单生活 该用户已被删除
6#
发表于 2015-2-22 16:06:18 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
小妖女 该用户已被删除
7#
发表于 2015-3-7 01:46:45 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
透明 该用户已被删除
8#
发表于 2015-3-14 07:55:54 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
海妖 该用户已被删除
9#
发表于 2015-3-21 01:51:17 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 22:59

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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