1、主页面介绍
百度首页设计的结构:总体分为三个模块,即top模块,mian模块和bottom模块。其中top模块中包含两个小模块,即网页头部的左侧与右侧。左侧有天气、皮肤和意见反馈,其中主要实现了天气预报模块,右侧有新闻、贴吧、知道、图片、视频、地图、文库、设置和更多等,其中主要实现了设置模块的下拉框功能。mian模块包含百度logo与网页主体内容table两部分。百度logo模块有logo图与搜素框组成,table模块有三个独立的模块,通过HTML与JavaScript、CSS的结合鼠标点击可以控制模块的显示与隐藏。bottom模块即网页底部的相关信息。
1.1、主要代码截图
1、主页面的<head>部分代码截图:
主页面背景设置CSS样式代码截图:
2、百度logo,搜素框的实现:logo放入img图片,搜素框部分插入了表单一个<form></form>,<input>标签插入文本框,相机图标作为标签<label>的背景出现在文本框中,按钮button实现“百度一下”,HTML代码截图如下:
主要CSS样式:label的背景插入相机小图标,label:hover实现鼠标进入是显示不同的效果,代码截图如下:
3、天气预报模块的实现:用七个div分别写了12月18号及未来几天的天气状况,以下是其中两个div代码截图,其余五个div结构同截图中第二的div,只是内容不同,部分代码截图如下: