你现在的位置:首页》
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!

学习纵向导航菜单的制作

    看到左侧导航列表了吧,自我感觉还不错,它与横向导航菜单的制作基本相似,但使用的标签不同,两种不同的标签可以达到相同的目的,这里的标题用h1,内容项用h2:

1.文件--新建,创建一个新文件;

2.为新文件取名,保存;

3.先在photoshop软件里,完成“导航栏目、标题”等2个背景图片和栏目小标签的制作;

   

4.先完成XHTML部分的结构:给导航菜单设置一个DIV,名称:left,里面的标题项用<h1></h1>,内容项用<h2></h2>进行构架,再为每个内容项做好空连接,<body></body>之间的内容如下:

<div id="left">
<h1>实例教程</h1>
<h2><a href="#">图片处理</a></h2>
<h2><a href="#">图片合成</a></h2>
<h2><a href="#">抠图方法</a></h2>
<h2><a href="#">溶图方法</a></h2>
<h2><a href="#">调色方法</a></h2>
<h2><a href="#">视频实例</a></h2>
<h2><a href="#">鼠绘实例</a></h2>
<h2><a href="#">鼠绘人物</a></h2>
<h2><a href="#">鼠绘国画</a></h2>
<h2><a href="#">文字实例</a></h2>
<h2><a href="#">动画实例</a></h2>
<h1>学习资料</h1>
<h2><a href="#">视频教材</a></h2>
<h2><a href="#">文字教材</a></h2>
<h2><a href="#">工具使用</a></h2>
<h2><a href="#">学习技巧</a></h2>
<h2><a href="#">作品欣赏</a></h2>
<h1>素材中心</h1>
<h2><a href="#">PSD模板</a></h2>
<h2><a href="#">笔刷</a></h2>
<h2><a href="#">字体</a></h2>
<h2><a href="#">样式</a></h2>
<h1>学习站点</h1>
<h2><a href="#">大师之路</a></h2>
<h2><a href="#">PS在线</a></h2>
<h2><a href="#"> 照片处理网</a></h2>
<h2><a href="#">PS联盟</a></h2>
<h2><a href="#">中国教程网</a></h2>
<h2><a href="#">图像谷</a></h2>
<h2><a href="#">VICNC艺术设计 </a></h2>
</div>

5.下面是CSS代码的样式编写:

#left{         /* 包含导航内容的块元素样式 */
width:150px;   /* 设置宽度 */
float: left;   /* 向左浮动 */
padding:55px 0px 40px 0px;   /* 上面留出55像素是为了插入“拦目导航”背景图 */
background-image: url(images/090206/bg1.jpg);  /*“拦目导航”背景图 */
background-repeat: no-repeat;   /*背景图不重复 */
}

#left h1{  /* 设置标题样式 */
margin:0px;  /* 上下左右边界为0 */
font-family: "宋体";  /* 字体 */
font-size: 9pt;  /* 字体大小 */
background-image: url(images/090206/bg2.jpg);  /* 背景图片 */
padding-top: 3px; /* 上边距 */
padding-left: 40px; /* 左边距 */
padding-bottom: 3px; /* 下边距 */
color: #003366;  /* 文字颜色 */
}

#left h2{ /* 设置内容项样式 */
margin:0px;
padding:4px;
border-bottom:1px dashed #999999; /* 1像素虚线灰色的下边线 */
font-family: "宋体";
font-weight:normal;  /* 文字粗细正常 */
font-size: 9pt;
text-indent: 20px;  /* 文字缩进20像素 */
}

#left h2 a {  /* 设置连接文字样式*/
color:#003366;  /* 文字颜色 */
text-decoration:none;  /* 文字无修饰 */

}

#left h2 a:hover{ /* 设置鼠标经过时的样式*/
color:#0066FF;  /* 文字颜色 */
}

img {border:0;}/* 图片边框为0 */

   我做好的内容项目前面那个小标签图片,放到网页上,都是有方框的,着实让我头疼了半天,原来图片标签都有默认边框,添加这个样式后,就能取消默认边框。

2009年2月16日

* 内容项目最下面的虚线与下面标题之间需要有空隙,就加个<br />