百度网页设计
我们都用过百度，也见过百度的首页是什么样子？
我们试着做一下？（简单的百度搜索页面）
图｜做完最后的模板图（div用背景颜色填充了）
我们先看一下大概的轮廓，百度页面分为三部分：上中下三部分；确定之后我们大一下代码：
<body>
<!-- 上 -->
<div></div>
<!-- 中 -->
<div></div>
<!-- 下 -->
<div></div>
</body>
新建一个css，全局清除!
body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
/* 全局控制 */
body{
font-family: Arial, Helvetica, sans-serif,"宋体";
font-size: 12px;
}
a{
text-decoration: none;/* 去除超链接下面的横线 */
}
我们先做一下上面的部分
<!-- 上 -->
<div class="header">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">直播</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">更多</a>
<a href="#">设置</a>
<a href="#">登录</a>
</div>
css如下：
.header{
background-color: #3385FF;
}
.header a{
margin-top: 20px;
padding: 20px;
font-size: 14px;
text-align: center;
line-height: 50px;
color: black;
}
.header a:hover{
color: cornflowerblue;
font-size: 14px;
font-weight: bold;
}
大概的效果我们看一下：
图｜上面导航栏设置完成
上面做完之后，我们看中间部分有图片，有搜索栏，有新闻（我们用table表格来完成）
<!-- 中 -->
<div class="middle">
<img src="./img/result@2.png" title="点我了解更多" />
<!--输入框和按钮-->
<div class="input">
<!--输入框--> <!--按钮-->
<input type="text" class="input_text"/><input type="button" value="百度一下"/ class="input_button">
</div>
<div class="xinwen">
<a href="#" class="resou">热搜>></a>
<a href="#" class="huan">换一换</a>
<table class="table">
<tr>
<td><a href="#"><span class="span1">1 </span>钟南山称全球群体免疫需两至三年</a></td>
<td><a href="#"><span class="span2">2 </span>2021胡润全球富豪榜</a></td>
</tr>
<tr>
<td><a href="#"><span class="span3">3 </span>钟南山称全球群体免疫需两至三年</a></td>
<td><a href="#"><span class="span4">4 </span>2021胡润全球富豪榜</a></td>
</tr>
<tr>
<td><a href="#"><span class="span5">5 </span>钟南山称全球群体免疫需两至三年</a></td>
<td><a href="#"><span class="span6">6 </span>2021胡润全球富豪榜</a></td>
</tr>
</table>
</div>
</div>
css样式如下：
.middle{
/*上间距*/
margin-top: 138px;
/*内容居中*/
text-align: center;
background-color: #B6B6B6;
}
.middle img{
width: 200px;
}
.input{
/*上间距*/
margin-top: 25px;
background-color: aqua;
}
/*输入框*/
.input_text{
width: 532px;
height: 34px;
border: 1px solid #b6b6b6;
/*去掉右边框 - 将右边框宽度设置为0*/
/*border-right-width: 0;*/
border-right: none;
/*左填充*/
padding-left: 7px;
}
/*按钮*/
.input_button{
width: 100px;
height: 36px;
background-color: #3385ff;
color: white;
border: 1px solid #3385ff;
/*垂直对齐方式*/
vertical-align: top;
}
.xinwen{
width: 644px;
height: 250px;
background-color: brown;
margin: 0 auto;
}
.resou{
font-size: 16px;
float: left;
display: block;
background-color: #00FFFF;
margin-top: 15px;
}
.huan{
float: right;
font-size: 16px;
display: block;
background-color: black;
margin-top: 15px;
}
.table{
width: 644px;
height: 150px;
}
.table a{
display: block;
font-size: 20px;
}
我们看一下效果：
图｜中间部分
中间部分也制作完成了
最后的尾部我们看一下代码：
<!-- 下 -->
<div class="footer">
<span>百度版权所有2000-2016京ICP备08001421号 京公网安备110108007702</span>
</div>
css样式如下：
.footer{
width: 100%;
height: 330px;
background-color: blueviolet;
margin: 0 auto;
text-align: center;
}
.footer span{
font-size: 20px;
line-height: 330px;
}
最后看一下效果：
图｜尾部部分
我们把所有的div背景色彩去除，看一下效果：
图｜最终的网页
