|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.
继上篇”碳纤维作风的拔出式导航菜单“，RichardCarpenter把菜单图片转化为CSS/HTML文档了。我们就一同接着进修吧！
检察CSS/HTML完全版，请点击这里：
布署文件
在我们入手下手切割图片之前，先在当地web服务器上布署文件，创立文件夹，在新建的文件夹中新建空缺HTML文件”index.html”，空缺CSS文件”styles.css”，styles.css放在另外一个文件夹”stylesheets”中，最初再新建文件夹”images”寄存图片。
创立HTML元素
用代码编纂器翻开html文件，在标签”BODY”内新建DIV，设置ID属性为”container”，此DIV将是一切元素的容器，代码以下：
在”container“DIV内创立别的一个DIV，ID属性为”nav”，是包括一切导航元素的容器，代码以下：
在”nav”DIV内创立一个复杂的UL无序列表，设置UL的class属性为”navigation”，每一个列表元素（LI）也设置分歧的class属性，依据class属性来设置LI的款式。代码以下：
以上是次要的HTML代码，接上去入手下手支解导航图片。
网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.
筹办导航图片
不论你相不信任，我们只必要一张年夜图片，出现一般和激活的形态，然后巧用CSS改动背景图片地位，这类手艺称为”款式表贴图定位（CSSSprites）“。
这么cool的手艺的目标就是经由过程整合图片（只需加载一次图片，在激活形态下运转也是一般的），削减对服务器的哀求次数，进步页面加载速率。全部图片巨细是80kb。图片以下：
在Photoshop中翻开PSD文件，拔取”矩形选框”工具，选中全部导航。
然后往往菜单”图象>裁剪”，裁剪后，你将注重到画布变短了，以是要增添画布高度，记着以后画布的高度，乘以2，画布高度将是以后画布的一倍。我的179px，增添一倍后是358px，往往菜单”图象>画布巨细”。以下图举行设置：
效果以下：
网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.
复制导航菜单
在复制之前，移除激活形态效果。
选择一切导航图层并举行复制，选中复制的图层，垂直往下移，位于原始图片的正下方，包管两图之间没有漏洞。以下图所示：
上方的导航是扫瞄器一加载的一般形态，下方的是鼠标激活的形态，以是要给下方的每一个按钮增添激活的效果，在此过程当中不要挪动按钮笔墨和球体。扫瞄器会由于一小点的挪动而得到原本的效果。
在保留图片之前，移除背景图层，如许两个导航的背景层是通明的，把图片”navigation.png”保留到文件夹”images”中。同时我们还要保留一张拉丝金属背景图”bg.gif”到”images”中。
网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.
CSS款式设置
翻开”styles.css”，入手下手编纂HTML元素body和containerDIV的款式，代码以下：
关于body，只是复杂的增添背景图片，偏重复呈现。关于container，设置margin为auto，是能让导航图片居中显现，宽度恰是导航图片的宽度。
接上去设置navDIV的款式，代码以下：
我们必需意想到navDIV的高度和宽度都是流动的，恰是导航图片的高度和宽度，并且文本要缩进到-9999px，如许是为了埋没文本。
接上去设置每一个无序列表LI的款式：
背景图片都是一样的，可是宽度和地位纷歧样。宽度能够在photoshop中丈量出来，以下所示：
最初设置LI元素在激活形态下的CSS款式：一样也是要调剂背景图的地位。
好了，关于代码就写在这了。固然另有别的体例来完成这类效果，必要列位多多理论！
</p>
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明. |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:15:20
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜