前端——html百度凯发ag旗舰厅登录网址下载首页制作 -凯发ag旗舰厅登录网址下载

前些天为了学习页面布局，做了一个简易的百度凯发ag旗舰厅登录网址下载首页。做百度凯发ag旗舰厅登录网址下载首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。

仿做一个网页之前需要分析该网页的布局，下图是百度凯发ag旗舰厅登录网址下载首页。

从上图可以看出，百度凯发ag旗舰厅登录网址下载首页大概分为三个块：头部，中部，和底部。中部又可以分为logo和搜索框，地步可以分为百度二维码和底部细则。因此，总的来说百度凯发ag旗舰厅登录网址下载首页分为五个块。所以先给网页分割成五个块。

1、头部导航

头部导航很好做，因为之前将页面分割成了五个块，头部（top）中再写几个div，设置margin-left，从而使导航位于右边，当然，也可以写float-right。而因为导航是一列，所以在div中写一个float：left。这样导航中的几个div就自动漂浮。当然，如果不想设置margin-left，也可以将float-left改为float-right，这样导航就自动漂浮到右边了。之后可以通过margin-right来调整div与右边的距离。而图中“更多产品”这一块，只需要将该div的background-color改为对应的颜色即可。背景色的代码可以在百度凯发ag旗舰厅登录网址下载首页的源代码中找到。

效果如下：

 

2、百度logo

百度logo单独作为一个块，直接网上下载一张百度的logo，插入一张图片，调整图片的位置就可以。如果如下：

3、搜索框

搜索框总共有三个部分，一个是文本框，一个是照相机的小图标，还有就是“百度一下”的按钮。这个的代码比较简单，如下：

百度一下

在搜索框这个大的div中，写三个小div，分别是文本框，相机图标和“百度一下”按钮。文本框用的是input，而“百度一下”直接用的是button。将这三个部分写在一个div里面的目的是为了让这三个的相对位置固定，防止这三个部分在网页大小变化的时候移位。

至于form的使用，详情见https://blog.csdn.net/searchin_r/article/details/82819592。

4、底部

底部主要就是百度的二维码以及下面的细则。百度二维码很方便放置，直接在div中插入图片，随后调整图片位置即可，

而最底部的细则 也方便。因为点击百度凯发ag旗舰厅登录网址下载首页的部分细则，当前页面会直接跳转到另一个页面。因此，直接在文本上添加超链接就行。每一个细则是一个div，这样有利于调整他们的相对位置。

至于整个页面的一些细节方面，比如字体大小和字体颜色，或者div的背景色，这些都可以在百度凯发ag旗舰厅登录网址下载首页上查看。

制作的百度凯发ag旗舰厅登录网址下载首页的效果图如下：

 制作这个页面，最需要注意的地方float的理解和使用，如果有疑问的地方，详情见https://blog.csdn.net/searchin_r/article/details/82818788。

如果大家对页面布局有什么更好的方法，欢迎大家留言评论，大家一起学习呀。

下面附上程序源码：

 

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的前端——html百度凯发ag旗舰厅登录网址下载首页制作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。