CSS+DIV布局赏析分解.pdf

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
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; } 结论:主页面的主体部分通过不同背景颜色的变化,能较递增缓和的体现出页面的色彩层次 感来,从而

文档评论(0)

1112111 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档