**問題：**
說起前端其實基礎的東西就那么多，也不難理解，但是如果想做一個好的頁面，還是要做大量的練習，只有通過大量反復的練習，我們才能更加熟悉一些常用標簽的使用場景和使用技巧，今天我就給大家提供一個簡單的百度首頁界面。可以直接復制代碼運行。
**效果圖如下：**
**代碼如下：**
~~~
<html>
<head>
<title>百度</title>
<style>
a{color:#333;font-weight: 700;font-size:13px;}
/*浮動樣式**/
.f_r{float:right;}
.clear{clear: both;}
/*居中樣式**/
.center{
margin:0 auto;
text-align: center;
}
ul li{
list-style: none;
float:left;
margin-right: 10px;
}
/**頂部更多產品樣式***/
.more_products{
width:60px;
text-align: center;
background:#38f;
}
.more_products a{
color: #fff;
}
/**搜索框頂部圖片***/
.search_img {
clear: both;
text-align: center;
margin: 0 auto;
}
.search_img img{
height: 160px;
}
/*搜索框樣式**/
.search_form {
text-align: center;
margin: 0 auto;
min-height: 200px;
}
.search_form input[type="text"]{
width:500px;
height:40px;
font-size:14px;
}
.search_form input[type="button"]{
width:100px;
height:40px;
background: #3385FF;
color:#fff;
border-bottom: 1px solid #2d78f4;
-webkit-appearance: none;
-webkit-border-radius:0;
outline: medium;
margin-left:-6px;
}
/*底部樣式**/
.footer{
color:#999;
}
.friend_link{
width:400px;
margin-bottom:20px;
list-style: none;
margin:0 auto;
text-align: center;
margin-bottom: 15px;
}
.friend_link li a{
color: #999;
}
.footer .mobile_link{
color: #666;
font-size: 14px;
font-weight: 700;
}
.copyright{
display: block;
padding-top:20px;
margin-top: 20px;
}
</style>
</head>
<body>
<ul class="f_r">
<li><a href="javascript:;">新聞</a></li>
<li><a href="javascript:;">hao123</a></li>
<li><a href="javascript:;">地圖</a></li>
<li><a href="javascript:;">視頻</a></li>
<li><a href="javascript:;">貼吧</a></li>
<li><a href="javascript:;">學術</a></li>
<li><a href="javascript:;">登錄</a></li>
<li><a href="javascript:;">設置</a></li>
<li class="more_products"><a href="javascript:;">更多產品</a></li>
</ul>
<div class="search_img">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/yunying/Turing2017PC/common/doodle-2/66.jpg">
</div>
<div class="search_form">
<form>
<input type="text" name="keyword">
<input type="button" value="百度一下">
</form>
</div>
<div class="footer center">
<div>
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_x2_9d645d9.png" width="60px" height="60px">
<p class="mobile_link">手機百度</p>
</div>
<ul class="friend_link">
<li><a href="javascript:;">把百度設為首頁</a></li>
<li><a href="javascript:;">關于百度</a></li>
<li><a href="javascript:;">About Baidu</a></li>
<li><a href="javascript:;">百度推廣</a></li>
</ul>
<div class="copyright">?2017 Baidu 使用百度前必讀 意見反饋 京ICP證030173號 京公網安備11000002000001號 </div>
</div>
</body>
</html>
~~~
附上git地址：https://github.com/zhongyushi/baidu_index
總結：如果您對我的代碼優化有更好的建議，歡迎交流指正。
