学习纵向导航菜单的制作
看到左侧导航列表了吧，自我感觉还不错，它与横向导航菜单的制作基本相似，但使用的标签不同，两种不同的标签可以达到相同的目的，这里的标题用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 />
