仓酷云

标题: 来谈谈：DIV CSS列形导航一例 [打印本页]

作者: 仓酷云 时间: 2015-1-16 00:15
标题: 来谈谈：DIV CSS列形导航一例
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
先看看XHTML代码：
<divid="navcontainer">
<ulid="navlist">
<liid="active"><ahref="http://www.dw8.cn/"id="current">Itemone</a>
<ulid="subnavlist">
<liid="subactive"><ahref="http://www.dw8.cn/"id="subcurrent">Subitemone</a></li>
<li><ahref="http://www.dw8.cn/">Subitemtwo</a></li>
<li><ahref="http://www.dw8.cn/">Subitemthree</a></li>
<li><ahref="http://www.dw8.cn/">Subitemfour</a></li>
</ul>
</li>
<li><ahref="http://www.dw8.cn/">Itemtwo</a></li>
<li><ahref="http://www.dw8.cn/">Itemthree</a></li>
<li><ahref="http://www.dw8.cn/">Itemfour</a></li>
</ul>
</div>
看看CSS是怎样定久相干元素的：
#navcontainer{margin-left:30px;}
#navcontainerul
{
margin:0;
padding:0;
list-style-type:none;
font-family:verdana,arial,Helvetica,sans-serif;
}
#navcontainerli{margin:0;}
#navcontainera
{
display:block;
padding:5px10px;
width:140px;
color:#000;
background-color:#ADC1AD;
text-decoration:none;
border-top:1pxsolid#fff;
border-left:1pxsolid#fff;
border-bottom:1pxsolid#333;
border-right:1pxsolid#333;
font-weight:bold;
font-size:.8em;
background-image:url(images/vertical06.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainera:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
border-top:1pxsolid#333;
border-left:1pxsolid#333;
border-bottom:1pxsolid#fff;
border-right:1pxsolid#fff;
background-image:url(images/vertical06a.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainerululli{margin:0;}
#navcontainerulula
{
display:block;
padding:5px5px5px30px;
width:125px;
color:#000;
background-color:#C5D8C5;
text-decoration:none;
font-weight:normal;
}
#navcontainerulula:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
}
看了这么多代码，如今让我们看看运转效果吧！
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>dw8.cn</title>
<styletype="text/css">
#navcontainer{margin-left:30px;}
#navcontainerul
{
margin:0;
padding:0;
list-style-type:none;
font-family:verdana,arial,Helvetica,sans-serif;
}
#navcontainerli{margin:0;}
#navcontainera
{
display:block;
padding:5px10px;
width:140px;
color:#000;
background-color:#ADC1AD;
text-decoration:none;
border-top:1pxsolid#fff;
border-left:1pxsolid#fff;
border-bottom:1pxsolid#333;
border-right:1pxsolid#333;
font-weight:bold;
font-size:.8em;
background-image:url(images/vertical06.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainera:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
border-top:1pxsolid#333;
border-left:1pxsolid#333;
border-bottom:1pxsolid#fff;
border-right:1pxsolid#fff;
background-image:url(images/vertical06a.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainerululli{margin:0;}
#navcontainerulula
{
display:block;
padding:5px5px5px30px;
width:125px;
color:#000;
background-color:#C5D8C5;
text-decoration:none;
font-weight:normal;
}
#navcontainerulula:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
}
</style>
</head>
<body>
<divid="navcontainer">
<ulid="navlist">
<liid="active"><ahref="http://www.dw8.cn/"id="current">Itemone</a>
<ulid="subnavlist">
<liid="subactive"><ahref="http://www.dw8.cn/"id="subcurrent">Subitemone</a></li>
<li><ahref="http://www.dw8.cn/">Subitemtwo</a></li>
<li><ahref="http://www.dw8.cn/">Subitemthree</a></li>
<li><ahref="http://www.dw8.cn/">Subitemfour</a></li>
</ul>
</li>
<li><ahref="http://www.dw8.cn/">Itemtwo</a></li>
<li><ahref="http://www.dw8.cn/">Itemthree</a></li>
<li><ahref="http://www.dw8.cn/">Itemfour</a></li>
</ul>
</div>
</body>
</html>
</p>
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.

作者: 若相依 时间: 2015-1-18 05:47
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 冷月葬花魂 时间: 2015-1-24 14:08
可以使用 CSS 检查工具进行设计。

作者: 老尸 时间: 2015-2-1 17:09
可以使用 CSS 检查工具进行设计。

作者: 谁可相欹 时间: 2015-2-7 13:11
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 因胸联盟 时间: 2015-2-22 11:32
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 深爱那片海 时间: 2015-3-7 01:15
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 简单生活 时间: 2015-3-14 06:36
学Dreamweaver技术的过程其实是一个增加信心的过程。

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

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