仓酷云

标题: 来讲讲：CSS实例教程:制造网站横导游航 [打印本页]

作者: 分手快乐 时间: 2015-1-15 23:32
标题: 来讲讲：CSS实例教程:制造网站横导游航
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。
网页制造poluoluo文章简介：CSS实例教程:制造网站横导游航.
在下面一节我们讲到的是垂直的导航.可是年夜多网站用的仍是横向的导航,那末就来跟我学下横导游航是怎样完成的.
要怎样完成上面的效果.只需在列表项之间制止换行就好了,以是要把<li>转换为内联.

HTML和CSS代码以下:

=============================
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en-US">
<head>
<title>Listsasnavigation</title>
<metahttp-equiv="content-type"
content="text/html;charset=utf-8"/>
<linkrel="stylesheet"type="text/css"href="listnav_horiz.css"/>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a></li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</div>
</body>
</html>
body{
padding:1em;
}
#navigation{
font-size:90%;
}
#navigationul{
list-style:none;
margin:0;
padding:0;
padding-top:1em;
}
#navigationli{
display:inline;
}
#navigationa:link,#navigationa:visited{
padding:0.4em1em0.4em1em;
color:#FFFFFF;
background-color:#B51032;
text-decoration:none;
border:1pxsolid#711515;
}
#navigationa:hover{
color:#FFFFFF;
background-color:#711515;
}

=============================

剖析:
创立一个div容器,然后在内里增加一个列表:
================================
<divid="navigation">
<ul>
<li><ahref="#">Recipes</a></li>
<li><ahref="#">ContactUs</a></li>
<li><ahref="#">Articles</a></li>
<li><ahref="#">BuyOnline</a></li>
</ul>
</div>

==============================
在#navigation容器里增加一些基础的信息,如字体的巨细.在CSS结构中这个容器还大概会增加一些分外的信息,如:断定这个导航在页面上的地位.
===============================
#navigation{
font-size:90%;
}

=================================
接上去在<ul>工具,我们把默许的圆点扫除和扫除默许的缩进.

============================
#navigationul{
list-style:none;
margin:0;
padding:0;
padding-top:1em;
}

============================
如今是横导游航最主要的一部分,由于没有了这一步那就不叫横向了,^_^.设置<li>为内联元素,如许就制止了换行.
=========================
#navigationli{
display:inline;
}

==========================
最初再给导航增添些效果:
==========================
#navigationa:link,#navigationa:visited{
padding:0.4em1em0.4em1em;
color:#FFFFFF;
background-color:#B51032;
text-decoration:none;
border:1pxsolid#711515;
}
#navigationa:hover{
color:#FFFFFF;
background-color:#711515;
}

=========================
PS:假如你想让文本与边框的间隔年夜一点,那末你就要设置leftpadding和rightpadding.假如你想让项与项之间的间隔变年夜,那末你也要设置leftmargin和rightmargin.
</p>
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

作者: 老尸 时间: 2015-1-17 23:11
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 乐观 时间: 2015-1-24 06:28
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 海妖 时间: 2015-1-31 23:48
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 飘飘悠悠 时间: 2015-2-7 02:42
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: admin 时间: 2015-2-20 09:42
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 莫相离 时间: 2015-3-6 17:19
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 爱飞 时间: 2015-3-13 06:06
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 仓酷云 时间: 2015-3-20 14:33
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

欢迎光临仓酷云 (http://ckuyun.com/)