返回
实例解析：使用div css网页布局实现google首页

实例解析：使用div css网页布局实现google首页

ID：19309976

大小：90.00 KB

页数：8页

时间：2018-09-30

实例解析：使用div css网页布局实现google首页_第1页
实例解析：使用div css网页布局实现google首页_第2页
实例解析：使用div css网页布局实现google首页_第3页
实例解析：使用div css网页布局实现google首页_第4页
实例解析：使用div css网页布局实现google首页_第5页
资源描述：

《实例解析：使用div css网页布局实现google首页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、·实例解析：使用DIVCSS网页布局实现Google首页DIVCSS网页布局有很多值得我们学习的地方，本文向大家介绍一下如何使用DIVCSS网页布局实现Google首页，希望你会感兴趣。本文和大家重点讨论一下用DIVCSS网页布局之Google首页实现，Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。用DIVCSS网页布局之Google首页实现今天我们来学习用Web标准的方法来制作Google首页（中文）

2、。Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。第一部分、DIVCSS网页布局之HTML的构建（基于XHTMLTransitional）从设计稿上看到的内容，去揣摩结构。因为整个页面内容较少，容易理解，但也碰到了我们的第一个问题：是用标签还是？各自代表着paragraph和division，原则上说，这个页面上没有任何的段落存在，所以不应该用。但这里涉及到一个问题，抛开样式表显示的话，用更加的清晰，因为

3、默认的margin和padding值都为零。好吧，用还是用是一个个人喜好问题，但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写HTML：1.

junchenwu@gmail.comstrong>

4、个性化主页 2. 3.a>

5、我的帐户a>

6、退出a>div> 4.

7、://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div> 这包括头部的登陆状态和中间的大Logo。我们先不增加任何样式id和class。然后我们看到中间有“网页图片资讯论坛更多»”这些链接。怎么做？一般就两种写法，看个人喜好。把这几个链接写一行里面或者写在一个ul里面，如下：1.

网页strong>图片a> 2. 3.资讯

8、a>论坛a> 4. 5.更多»strong>a>div> 或者：6.

     7.
  • 网页strong>li> 8.
  • 图片a>li> 9.
  • 资讯a>li> 10.

  • 9、fahref="group">论坛a>li> 11.

  • 更多»strong>a>li> 12.ul> 这两种写法各有什么优缺点呢？这里一共有5项，第一项是加粗的文字，其余4项是链接。如果使用第一种写法对于样式的控制就显得力不从心，比如控制这5项之间的间距；如果使用第二种写法，那么在脱离样式的情况下，分了5行显示。这里我把缺点都写出来，根据本例情况，我们还是选择第一种写法，这样要控制样式就需要在每

    10、一项前后增加无意义的。我们先继续往下写，遇到了搜索表单以及边上的高级搜索等三个链接。先写哪一个？看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下：13. 14.

    div> 15.
    Google搜索button>

    此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。