1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容:
2、此时对应效果如图:
3、接下来准备相关的导航按钮图片(可以事先利用PS制作好)。
4、然后将以下CSS代码加入到
之间:body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
5、在加入CSS代码之间,网页此时的效果如图:
1、 文字导航
国内网站的面向用户大部分是国内网民,因而用文字完成导航功用对错常有必要的,假如你用英语,尽管看起来很巨大上,但小编觉得许多人都看不懂,这有含义吗?当然,咱们在文字导航中尽量运用较为一般的HTML文字导航,防止运用图片作为导航连接,更不要运用JavaScript主动生成导航系统,又或许运用Flash做导航都是不可取的。
2.系统具有近来的点击间隔
主页简直是一切站点投入优化的要点页面,权重天然也是较高的,所以离主页越近的页面被点击的可能性也会更高一些,当然要想完成这么的功用,站长在连接结构规划上必定要让网站尽量向扁平化的视点开展。
3.运用带锚文本的关键字
可以用div+css做的