第11天:不用表格的菜单

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表： #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;} 页面代码： div id=logoa title=网页设计师 href=# img height=80 alt=链接到

布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表：

#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
页面代码：

<div id="logo"><a title="网页设计师" href="#" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。
接下来是定义菜单。

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>不用表格的菜单</title><style type="text/css"><!--#menu {border-right:#fff 2px solid;border-top:#fff 2px solid;background:#dfdfdf;border-left:#fff 2px solid;width:160px;color:#666;border-bottom:#fff 2px solid;margin:15px 20px 0 15px;padding:15px;}#menu ul {border-right:medium none;border-top:medium none;display:inline;border-left:medium none;line-height:normal;border-bottom:medium none;list-style-type:none;margin:0;padding:0;}#menu li {border-top:#fff 1px solid;margin:0;}#menu li a {display:block;font-weight:700;background:url(http://www.w3cn.org/article/step/2004/images/icon_dot_lmenu.gif) no-repeat 2px 8px;width:100%;color:#444;text-decoration:none;padding:5px 0 5px 15px;}#menu li a:hover {background:url(http://www.w3cn.org/article/step/2004/images/icon_dot_lmenu2.gif) #c61c18 no-repeat 2px 8px;color:#fff;}--></style></head><body><div id="menu">  <ul>    <li><a title="网站标准" href="#">什么是网站标准</a> </li>    <li><a title="标准的好处" href="#">使用标准的好处</a> </li>    <li><a title="怎样过渡" href="#">怎样过渡</a> </li>    <li><a title="相关教程" href="#">相关教程</a> </li>    <li><a title="工具" href="#">工具</a> </li>    <li><a title="资源及链接" href="#">资源及链接</a> </li>  </ul></div></body></html>

第 1 2 3 页

上一篇：IE中background-image在链接转行后未显示的现象
下一篇：DIV+CSS布局中的居中问题

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

第11天:不用表格的菜单

1.不用表格的菜单(纵向)

热门标签

赞助商链接