基于 HTML、CSS、JavaScript 的百度首页设计（一）

1、主页面介绍

       百度首页设计的结构：总体分为三个模块，即top模块，mian模块和bottom模块。其中top模块中包含两个小模块，即网页头部的左侧与右侧。左侧有天气、皮肤和意见反馈，其中主要实现了天气预报模块，右侧有新闻、贴吧、知道、图片、视频、地图、文库、设置和更多等，其中主要实现了设置模块的下拉框功能。mian模块包含百度logo与网页主体内容table两部分。百度logo模块有logo图与搜素框组成，table模块有三个独立的模块，通过HTML与JavaScript、CSS的结合鼠标点击可以控制模块的显示与隐藏。bottom模块即网页底部的相关信息。

1.1、主要代码截图

1、主页面的部分代码截图：

            

主页面背景设置CSS样式代码截图：

          

2、百度logo，搜素框的实现：logo放入img图片，搜素框部分插入了表单一个

，标签插入文本框，相机图标作为标签的背景出现在文本框中，按钮button实现“百度一下”，HTML代码截图如下：

          

主要CSS样式：label的背景插入相机小图标，label:hover实现鼠标进入是显示不同的效果，代码截图如下：

      

3、天气预报模块的实现：用七个div分别写了12月18号及未来几天的天气状况，以下是其中两个div代码截图，其余五个div结构同截图中第二的div，只是内容不同，部分代码截图如下：

       

主要CSS样式：#weatherCtrl span:hover实现鼠标滑过时字体颜色变为棕色；#weather:hover实现鼠标进入时，全部天气字体变绿色。部分代码截图：

       

4、头部右侧，设置的下拉框功能，鼠标滑过时显示下拉框，代码截图：

CSS代码实现下拉框功能，下拉框的border设置，鼠标滑过时的显示效果，代码截图如下：

        

 

5、中间主要内容：我用一个table（包含四个div）实现网页中间主体内容。

1）第一个div代码如下：

         

2）第二个div实现“我的关注”内容，只要用几个小图片及图片文本内容组成，在最下面添加一个大图片。代码截图：

          

3）第三个div实现“推荐”部分的内容，代码截图：

          

4）第四个div实现“导航”的内容，部分代码截图：

       

      

CSS样式中对table中的一些文本内容做了字体大小、颜色等的修饰。部分代码截图：

      

以下CSS代码实现table模块的隐藏：

       

6、底部功能：页面的底部，显示相关信息。代码截图：

       

CSS代码实现a标签在被访问visited与鼠标滑过hover a标签时所显示的颜色，代码截图：

        

7、JavaScript实现天气预报模块鼠标进入出现天气预报详细信息，鼠标移出天气预报详细信息则隐藏；table模块鼠标点击哪一个id就显示该id的详细内容，其他两个id则隐藏。代码截图：

      

1.2、运行结果截图

1、百度logo及搜素框，鼠标退出时搜素框中相机小图标样式显示的效果，结果如下：

        

鼠标进入时搜素框相机小图标显示的效果如下图：

        

2、天气预报模块结果：鼠标进入“厦门：15℃-20℃｜空气质量 良好” 部分就出现如图所示天气情况：

        

鼠标进入天气部分，所有字体的颜色显示绿色，如下图：

       

鼠标滑过时字体的颜色显示棕色，如下图：

       

 

3、头部右侧，下拉框显示结果，鼠标进入时下拉框中字体背景显示蓝色，字体颜色显示绿色，显示结果如下图：

                      

鼠标滑过时字体颜色为绿色，结果显示如下：

         

4、网页中间主体内容结果，1）下图显示为table中第一个div及第二个div“我的关注”效果图：

          

2）下图显示主要是table中第三个div“推荐”效果图：

           

3）下图显示主要是table中第四个div“导航”效果图：

            

5、页面的底部结果图，图中可以看出a标签“设为首页”已被访问，颜色显示为紫色，其他两个a标签“使用百度前必读”与“意见反馈”未被访问，显示为蓝色。

       

不论a标签是否被访问过，鼠标滑过时a标签总是显示红色，结果如下图：

         

         

2、心得体会

      本次网页设计实验，百度首页的设计，更加熟练掌握对HTML的应用，及结合JavaScript与CSS语言的应用。实验中也遇到了很多问题，特别是天气预报模块的设计，下拉框功能的设计方面遇到了困难，通过自己查阅资料及同学老师的帮助得以顺利解决。特别深刻的是对页面模块位置固定的问题：每次天气预报详细信息模块浮出时logo与搜素框模块就会右移或是下移，自己也是折腾了很久没有搞定，最后在老师的帮助下得以解决，发现自己叮错了目标，没能对症解决问题。通过本次试验，对前端开发HTML有更深的认识与理解，更好的应用。

        虽然自己做的网页有一定的缺陷，但通过自己的努力很好的完成了本次设计，自己很有成就感。这里我要感谢老师的鼓励与支持，感谢几位学长的帮助，也要感谢自己的付出。

 

完整代码见（二）：https://blog.csdn.net/weixin_42312310/article/details/100142210