CSS+DIV布局赏析探究.pdf

CSS+DIV布局赏析案例 1 “上中下”布局 分析：从整体来看该页面模版是“上中下”的布局，其头部部分主要包括网站的 Logo 和导 航条等；下面是一张精美的图片，该图片在整个模版中起到了美化网页的作用，同时 该图片也是一个 DIV标签，其代码为：“div id=splash/div”；接下来是两个左右 分开的表格，用来转达网页所要表达的文字信息，同时还包括多个超级链接，这些链 接一般用于与本网站的其他网页建立联系；最下面是是网站的底栏，主要包括版权信 息和联系方式，主要功能是版权声明和听取浏览者的意见或建议。 代码：相关 CSS代码分析如下： body { margin: 20px 0; background: #FFFFFF; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 13px; color: #7F7772; } 结论：从以上分析可知这类网站的布局模式简洁明了，重点突出。文字和图片的混排相对较 少，文字内容的描述和图片展示也都比较紧凑集中，使浏览者可以明确精准的找到自 己想要搜索和寻找的信息。 2 “左框型”布局 分析：从该网页的整体布局来看，该网页属于“左框型”布局结构。这种布局结构常见于个 人博客的网页，其顶部是网站的 Logo，banner和网站的标题等，右边是相关菜单，选 择相应的菜单项，即可在其左侧显示相关内容。 代码：相关 CSS代码如下： body { background: url(images/background.jpg); color: #293331; font: 13px Georgia, Times New Roman, Times, serif; text-align: center; } 结论：由分析可知该布局的 CSS样式模版主次分明、结构明朗，是初学者最容易上手的布局 结构。 3 “左右”布局 分析：从整体结构来看该网页属于“左右型”结构布局，左边部分是以日志形式显示的报告， 右边是欢迎来到网站的话语和一些相关的超级链接，通过这些链接可以让浏览者浏览 到更多有关该网页的其他信息，最下面是是网站的底栏，主要包括版权信息和联系方 式。 代码：用于控制该页面整体元素属性的相关 CSS代码如下： body { margin: 20px 0; background: #FFFFFF; font: normal 13px Arial, Helvetica, sans-serif; color: #666666; } 结论：主页面的主体部分通过不同背景颜色的变化，能较递增缓和的体现出页面的色彩层次 感来，从而展现出该网页的主体部分的“左右型”布局结构，该结构简单易学，是初 入网页制作行业者最容易学会的一种布局模版。 4 “上下”布局 分析：从整体结构来看该网页属于“上下型”结构布局，上半部分是以个人独特个性显示的 菜单，下半部分是一些商品的图片和一些相关的超级链接，通过这些链接可以让浏览 者浏览到更多有关该商品的详细信息，最下面是是网站的底栏，主要包括版权信息和 联系方式。 代码：用于控制该页面整体元素属性的相关 CSS代码如下： body { background: url(images/bg.jpg) top repeat-x #711a43; margin: 0px; padding:0px; font: 11px arial, helvetica; color: #856674; text-align: left; } 结论：该页面的主体部分通过不同背景颜色的变化，能较递增缓和的体现出页面的色彩层次 感来，从而展现出该网页的主体部分的“上下型”布局结构，该结构简单易学，是初 入网页制作行业者最容易学会的布局模版之一。整个页面配色单纯，却不简单，是另 一种设计风格。 5 “右框型”布局 分析：从该网页的整体布局来看，该网页属于“右框型”布局结构。这种布局结构常见于个 人网页，其顶部是网站的 Logo，banner 条或网站的标题等，左边是相关菜单或链接， 选择相应的选项，即可打开相应的页面，进行信息的查看。 代码：用于控制该页面整体元素属性的相关 CSS代码如下： body { margin: 0; padding: 0; background: #FFFFFF url(images/img01.jpg) repeat-x; font-size: 13px;