X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Dreamweaver中CS5:大厦从列表中的一个导航菜单
翻译谷歌翻译

当建立一个最佳实践网站,你应该建立您的导航​​菜单使用列表,如果可能的话。吗更有语义准确(菜单毕竟是一个列表)和CSS使他们很容易的风格。让我们看看如何导航列表引擎盖下。生病在代码视图中使用Dreamweaver中,但随时遵循一条直线的文本编辑器,如果你想。

步骤1 - 建立一个列表

这部分很简单:创建一个新的HTML文件,没有模板,只需键入您的菜单项目。括每个列表项

您应该结束了,像这样: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

但是,你要确保每个项目环节的东西,它会变得非常重要,因为我们建立的CSS。所以,添加链接的#字符,创建这样的:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

第2步 - 链接到一个外部CSS文件

在CSS面板底部的面板(加符号文件),按新的CSS规则“按钮。创建一个名为的编号navlist navlist,并选择“创建一个新的样式表文件。在出现的对话框中,将文件命名为style.css 。它始终是最好的使用外部样式表,即使试验。

我们不需要定义任何使用旁边出现的对话框,所以只需按确定。你会创建一个基本的,空白的样式定义样式表。点击略高于您的文档的style.css,突出显示的文字源代码。

步骤3 - 添加一些基本的CSS规则

我们需要指定该列表编号navlist,使我们可以针对它。在HTML中,添加id=navlist

现在,我们可以得到的CSS。你会可能要调整背景颜色,宽度,边界和利润上手,你会要思考如何构建的CSS选择器。如果您使用#navlist li ,您访问导航列表中的列表项。更妙的是,目标#navlist li a的目标您的名单内的链接。添加填充,以使一个更大的目标,同时加入填充列表项不会。尝试:

#navlist {

列表式类型:无;

保证金:0;

填充:0;

宽度:200像素;

}

#navlist李{

保证金:5px;

}

#navlist李一{

背景颜色:#222;

颜色:#EEE;

填充:10px;

文本装饰:无;

显示:块;

}


#navlist li

最后,

第4步 - 添加一些悬停的CSS规则

为了使列表中更加被动,添加一个悬停规则:

#navlist李答:悬停{

背景颜色:#444;

颜色:#EE2;

}

第5步 - 标记活动页面

在这些类型的网页共同标记一个可移动的类样式的活动页面,例如类=活跃,这是当前页面上放置。但是,这意味着,在每一页上是不同的菜单块。更方便每一个环节,在一个不同的类的HTML标签,然后添加一个页面特定类的body标签,赶上一个CSS规则。事情是这样的:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

匹配CSS:

#bodypage1第1 A,#bodypage2页第2 Å,bodypage3页第3页第一个,bodypage4页第4页第一个,bodypage5 5页第一个{

背景颜色:#555;

颜色:#EE2;

}

这样,你只需要改变身体上的每一页上标签的类。偷偷摸摸的,但它的作品。

有很多很多的技巧,但多数民众赞成现在所有的。正如你可能已经看到在探索的CSS视频教程,使列表水平,所有你需要的display: inlineli李元素,所以探索,如果你想。下一次,以及在一些特殊的选项。

成品product.png

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link