《实例解析：使用DVCSS网页布局实现Google首页.docVIP

实例解析：使用DIV CSS网页布局实现Google首页 DIV CSS网页布局有很多值得我们学习的地方，本文向大家介绍一下如何使用DIV CSS网页布局实现Google首页，希望你会感兴趣。 本文和大家重点讨论一下用DIV CSS网页布局之Google首页实现，Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。 用DIV CSS网页布局之Google首页实现 今天我们来学习用Web标准的方法来制作Google首页（中文）。Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。 第一部分、DIV CSS网页布局之HTML的构建（基于XHTMLTransitional） 从设计稿上看到的内容，去揣摩结构。因为整个页面内容较少，容易理解，但也碰到了我们的第一个问题：是用 标签还是 ？各自代表着paragraph和division，原则上说，这个页面上没有任何的段落存在，所以不应该用 。但这里涉及到一个问题，抛开样式表显示的话，用 更加的清晰，因为默认 的margin和padding值都为零。好吧，用 还是用 是一个个人喜好问题，但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写HTML： divstrongjunchenwu@/ spanstrong|ahrefahref=ig个性化主页 ? ? / spana|ahrefahref=MyAccount我的帐户/ spana|ahrefahref=logout退出/ spana/ spandiv? divimgsrcimgsrc=/intl/zh-CN_ALL/images/logo.gifalt=Google// spandiv? 这包括头部的登陆状态和中间的大Logo。我们先不增加任何样式id和class。 然后我们看到中间有“网页图片资讯论坛更多?”这些链接。怎么做？一般就两种写法，看个人喜好。把这几个链接写一行里面或者写在一个ul里面，如下： divstrong网页/ spanstrongahrefahref=pic图片/ spanaahrefahref=info? ? 资讯/ spanaahrefahref=group论坛/ spanaahrefahref=more? ? strong更多?/ spanstrong/ spana/ spandiv? 或者： ul? listrong网页/ spanstrong/ spanli? liahrefahref=pic图片/ spana/ spanli? liahrefahref=info资讯/ spana/ spanli? liahrefahref=group论坛/ spana/ spanli? liahrefahref=morestrong更多?/ spanstrong/ spana/ spanli? / spanul? 这两种写法各有什么优缺点呢？这里一共有5项，第一项是加粗的文字，其余4项是链接。如果使用第一种写法对于样式的控制就显得力不从心，比如控制这5项之间的间距；如果使用第二种写法，那么在脱离样式的情况下，分了5行显示。这里我把缺点都写出来，根据本例情况，我们还是选择第一种写法，这样要控制样式就需要在每一项前后增加无意义的。 我们先继续往下写，遇到了有哪些信誉好的足球投注网站表单以及边上的高级有哪些信誉好的足球投注网站等三个链接。先写哪一个？看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下： formactionformaction=method=post? divinputtypeinputtype=textsize=55title=Google有哪些信誉好的足球投注网站// spandiv? divbuttontypebuttontype=submitGoogle有哪些信誉好的足球投注网站/ spanbuttonbutton手气不错/ spanbutton/ spandiv? divlabelinputtypeinputtype=radioname=tchecked=checked/? ? 有哪些信誉好的足球投注网站所有网页/ spanlabellabelinputtypeinputtype=radioname=t/? ? 中文网页/ spanlabellabelinputtypeinputtype=radioname=t/简体中文网页/ spanlabel/ spandiv? / spanform? 注意给每一项radiobutton添加一个label，具体的效果大家可以自行测试一下。