从宏观角度来审视页面结构,整个页面显示为Tab选项卡。从HTML结构层分析,所有HTML代码都包含在<div id="show">包含框中,其下又嵌套多个子框。
另外,根据网站动态布景设计需要,又添加了一个布景蒙版层<div id="mask"></div>。基本结构代码的具体说明如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>快乐家庭日志</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/onload.js"></script> <script type="text/javascript" src="js/public.js"></script> <script type="text/javascript" src="js/init.js"></script> <script type="text/javascript" src="js/writeform.js"></script> <script type="text/javascript" src="js/writerecord.js"></script> <script type="text/javascript" src="js/queryrecord.js"></script> <script type="text/javascript" src="js/showrecord.js"></script> <script type="text/javascript" src="js/style.js"></script> <script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript" src="js/jquery.uitablefilter.js"></script> <script type="text/javascript" src="js/jquery.elastic.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <script type="text/javascript"> $(function(){}) </script> <style type="text/css"></style> <!--[if lte IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if gt IE 7]> <link href="css/ie8.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="show"> <h1 title="快乐家庭日志">家庭日志<span title="点击进入快乐家庭日志">快乐请进</span></h1> <div id="showmenubox"> <ul id="menu"> <li>家庭支出</li> <li>家庭收入</li> <li>家庭日志</li> <li>快速查账</li> <li>自定义查询</li> <li>分类管理</li> </ul> </div> <div id="showformbox"></div> <div id="showinfobox"></div> <div id="showtablebox"></div> <div id="showdetailbox"></div> <div id="showsubdetailbox"></div> </div> <div id="mask"></div> </body> </html>
在构建基本结构时,读者应该注意两个问题。
问题一,结构应简洁、明晰。避免任意使用id和class属性,如果借助包含选择器能够实现样式控制的,就不要定义id属性。class属性作为类样式专用属性一般也不要乱用,除非页面中有两个或更多的元素拥有相同的样式,才可以考虑使用类样式来设计,否则就不要使用。
问题二,使用结构标签一定要注意语义性。基本结构一般使用div元素即可,但是如果内容的语义性比较明确,不妨选用对应的元素,如标题、列表、数据表格和段落文本等。