以下是引用片段:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">
<head>
<title>欢迎进入新《网页设计师》:web标准教程及推广</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<metacontent="all"name="robots"/>
<metaname="author"content="ajie(at)netease.com,阿捷"/>
<metaname="Copyright"content="www.w3cn.org,自由版权,任意转载"/>
<metaname="description"content="新网页设计师,web标准的教程站点,推动web标准在中国的应用."/>
<metacontent="web标准,教程,web,standards,xhtml,css,usability,accessibility"name="keywords"/>
<linkrel="icon"href="/favicon.ico"type="image/x-icon"/>
<linkrel="shortcuticon"href="http://www.w3cn.org/favicon.ico"type="image/x-icon"/>
<linkrel="stylesheet"rev="stylesheet"href="css/style01.css"type="text/css"media="all"/>
</head>
<body>
<divid="left">页面左列</div>
<divid="middle">页面中列</div>
<divid="right">页面右列</div>
</body>
</html>
这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
4.100%自适应高度?
第11天:不用表格的菜单
布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:
样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
页面代码:<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。
接下来是定义菜单。
1.不用表格的菜单(纵向)
我们先来看菜单的最终效果:演示页面
通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:
以下是引用片段:
<divid="menu">
<ul>
<li><atitle="网站标准"href="web_standards.html">什么是网站标准</a></li>
<li><atitle="标准的好处"href="web_standards_value.html">使用标准的好处</a></li>
<li><atitle="怎样过渡"href="../../templates/index.html">网页模板下载</a></li>
<li><atitle="相关教程"href="../index.html">WEB标准相关教程</a></li>
<li><atitle="工具"href="http://websoft.jianzhan8.cn">网页制作软件</a></li>
<li><atitle="资源及链接"href="../../help/index.html">使用帮助</a></li>










