AI智能
改变未来

web前端:HTML+CSS实现百度首页静态显示

题外话,目前刚接触前端,刚看了HTML和CSS学习的基本内容,百度首页的静态显示作为一个简单练手项目巩固知识点。
1.如何实现一个网站页面的编写
通过一些博主的总结,主要可以分为四点:

  1. 网站类型:网站里有什么东西;
  2. 布局(排版):明确页面上每一块是什么,比如左上角的区域,右上角的区域,logo区域,下角区域等;
  3. 结构:用html架构代码,从步骤2可知,将每一块写为一个元素,在中添加内容;
  4. 细节:用CSS进行编排。

根据上面的步骤我们就可以完成一个简单的页面显示,通过HTML代码将所需要的内容添加,在用CSS修改细节和排版。下面就开始百度首页静态显示的流程吧!!!

Step1 . 百度首页-图片(这是网上截图的,不是我最后的图哈,我自己实现的界面在最后面!)
Step2. 布局(可以分为哪些块)左、右上角导航栏块,logo+搜索栏块,下角块(网站备案区域)

Step3. 结构,用html中

元素实现Step2中的各个块的内容
(1)左上角的导航栏,包含新闻,hao123,地图,视频,贴吧,学术,更多。
如下代码实现:

(2)右上角的导航栏类似,包含天气,设置,登录。

(3)logo加载,直接在百度官网页面下载原logo图片,使用元素调用,一般在源码文件夹中创建img文件夹,使用相对路径调用。(***开始没有加最先的那个点,一直未加载出图片,注意!***)

(4)搜索栏,搜索输入框+提交框,采用标签,用于为用户输入创建HTML表单,表单用于向服务器传输数据。

(5)下角区包括两部分,
左下角包括:设为首页,关于百度,About Baidu等;
右下角包括@2020Baidu版本号,经营号,备案号等。

经过步骤3,已经将百度页面简单的内容添加进去了,效果如下所示,在Step4中用CSS对样式进行排版。

Srep4. 细节,用CSS进行编排
(1)左上角导航栏
(2)右上角导航栏
(3)logo
(4)搜索栏
(5)下角两边(但是没在左右去,啊啊啊,我哭了! float属性 position属性左右对齐)



最终结果,实现界面如下

仍然有需要改进的地方,比如鼠标移动到导航栏会有显示改变等,排版格式不好
周末前完成,以结构化的

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » web前端:HTML+CSS实现百度首页静态显示