带来一篇用CSS打造可折叠伸缩咭片菜单
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。用CSS打造可折叠伸缩咭片菜单
现看看其CSS款式表代码：
以下是援用片断：
<styletype="text/css">
<!--
#menu{
font-size:12px;
height:380px;
margin:0;
padding:0;
width:180px;
overflow:hidden;
background:#f0f0f0;
list-style:none;
border-left:1pxsolid#cccccc;
border-right:1pxsolid#cccccc;
}
#menulia{
display:block;
text-decoration:none;
color:#00b;
margin:0;
width:100%;
}
#menuliaspan{
display:none;
color:#000;
height:120px
}
#menulia.onespan{
display:block;
margin:010px;
}
#menulia:hover{
background:#f1f1f1;
}
#menulia:hoverspan{
display:block;
margin:010px;
cursor:pointer;
}
#menu.h2{
margin:05px;
padding:0;
color:#808;
font-variant:small-caps;
border:0;
}
#menu.h3{
margin:05px;
padding:0;
color:#00b;
}
.curved{
width:180px;
margin:0auto;
}
.curved.b1,.curved.b2,.curved.b3,.curved.b4{
font-size:1px;
display:block;
background:#88c;
overflow:hidden;
}
.curved.b1,.curved.b2,.curved.b3{
height:1px;
}
.curved.b2,.curved.b3,.curved.b4{
background:#f0f0f0;
border-left:1pxsolid#cccccc;
border-right:1pxsolid#cccccc;
}
.curved.b1{
margin:04px;
background:#cccccc;
}
.curved.b2{
margin:02px;
border-width:02px;
}
.curved.b3{
margin:01px;
}
.curved.b4{
height:2px;
margin:0px;
}
-->
</style>
源代码：以下是援用片断：
<divclass="curved"><bclass="b1c1"></b><bclass="b2c2"></b><bclass="b3c3"></b><bclass="b4c4"></b><ulid="menu"><li><ahref="#nogo"><bclass="h2">网页陶吧ONE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧TWO</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧THREE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧FOUR</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><aclass="one"href="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧FIVE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li></ul><bclass="b4"></b><bclass="b3"></b><bclass="b2"></b><bclass="b1"></b></div>
<styletype="text/css"><!--#menu{font-size:12px;height:380px;margin:0;padding:0;width:180px;overflow:hidden;background:#f0f0f0;list-style:none;border-left:1pxsolid#cccccc;border-right:1pxsolid#cccccc;}#menulia{display:block;text-decoration:none;color:#00b;margin:0;width:100%;}#menuliaspan{display:none;color:#000;height:120px}#menulia.onespan{display:block;margin:010px;}#menulia:hover{background:#f1f1f1;}#menulia:hoverspan{display:block;margin:010px;cursor:pointer;}#menu.h2{margin:05px;padding:0;color:#808;font-variant:small-caps;border:0;}#menu.h3{margin:05px;padding:0;color:#00b;}.curved{width:180px;margin:0auto;}.curved.b1,.curved.b2,.curved.b3,.curved.b4{font-size:1px;display:block;background:#88c;overflow:hidden;}.curved.b1,.curved.b2,.curved.b3{height:1px;}.curved.b2,.curved.b3,.curved.b4{background:#f0f0f0;border-left:1pxsolid#cccccc;border-right:1pxsolid#cccccc;}.curved.b1{margin:04px;background:#cccccc;}.curved.b2{margin:02px;border-width:02px;}.curved.b3{margin:01px;}.curved.b4{height:2px;margin:0px;}--></style><divclass="curved"><bclass="b1c1"></b><bclass="b2c2"></b><bclass="b3c3"></b><bclass="b4c4"></b><ulid="menu"><li><ahref="#nogo"><bclass="h2">网页陶吧ONE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧TWO</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧THREE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><ahref="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧FOUR</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li><li><aclass="one"href="#nogo"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><bclass="h2">网页陶吧FIVE</b><br/><bclass="h3">http://homepage.yesky.com/</b><span>WEB尺度是布局（Structure）、体现（Presentation）和举动（Behavior）叁方面组成的尺度汇合</span></a></li></ul><bclass="b4"></b><bclass="b3"></b><bclass="b2"></b><bclass="b1"></b></div>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]