十天学会div css布局 第十天 div css网页标准布局实例教程(二).docVIP

十天学会div css布局 第十天 div+css网页标准布局实例教程(二) 导读：就爱阅读网友为您分享以下“第十天 div+css网页标准布局实例教程(二)”的资讯，希望对您有所帮助，感谢您对92的支持! 第十天 div+css网页标准布局实例教程（二） （接上一篇，本节教程文字较多，比较枯燥，如果前边知识学习牢固，可以直接下载源代码查看，哪个地方不明白，再回过头来看哪一部分） 五、布局页面——头部和导航 有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。 lt;div id=quot;headerquot;gt; lt;div id=quot;logoquot;gt;此处显示 id quot;logoquot; 的内容lt;/divgt; lt;div id=quot;searchquot;gt;此处显示 id quot;searchquot; 的内容lt;/divgt; lt;/divgt; 先在header里插入上两块元素。然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下： lt;div id=quot;headerquot;gt; lt;div id=quot;logoquot;gt;lt;img src=quot;images/logo.gifquot; width=quot;181quot; height=quot;45quot; /gt;lt;/divgt; lt;div id=quot;searchquot;gt; lt;form id=quot;form1quot; name=quot;form1quot; method=quot;postquot; action=quot;quot;gt; 搜索产品 lt;input type=