|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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已入手下手撑持网站的内嵌字体了。
你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。 |
|