**問題：**
說起前端其實(shí)基礎(chǔ)的東西就那么多，也不難理解，但是如果想做一個好的頁面，還是要做大量的練習(xí)，只有通過大量反復(fù)的練習(xí)，我們才能更加熟悉一些常用標(biāo)簽的使用場景和使用技巧，今天我就給大家提供一個簡單的百度首頁界面?？梢灾苯訌?fù)制代碼運(yùn)行。
**效果圖如下：**
**代碼如下：**
~~~
<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;
}
/**頂部更多產(chǎn)品樣式***/
.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:;">學(xué)術(shù)</a></li>
<li><a href="javascript:;">登錄</a></li>
<li><a href="javascript:;">設(shè)置</a></li>
<li class="more_products"><a href="javascript:;">更多產(chǎn)品</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">手機(jī)百度</p>
</div>
<ul class="friend_link">
<li><a href="javascript:;">把百度設(shè)為首頁</a></li>
<li><a href="javascript:;">關(guān)于百度</a></li>
<li><a href="javascript:;">About Baidu</a></li>
<li><a href="javascript:;">百度推廣</a></li>
</ul>
<div class="copyright">?2017 Baidu 使用百度前必讀 意見反饋 京ICP證030173號 京公網(wǎng)安備11000002000001號 </div>
</div>
</body>
</html>
~~~
附上git地址：https://github.com/zhongyushi/baidu_index
總結(jié)：如果您對我的代碼優(yōu)化有更好的建議，歡迎交流指正。
- 介紹
- 用你熟悉的語言來計算下你的年齡
- 一言不和就寫個留言板吧！
- 聊一聊那些年我們追過的二分查找算法吧
- 手機(jī)端上拉加載和下拉刷新的實(shí)現(xiàn)方式
- 如何有效的提問
- 前端練習(xí)之模仿百度首頁
- 新的博客上線
- 如何理解border-box
- 史上比較全的運(yùn)營書目清單
- 前端案例練習(xí)之模仿小米商城登錄頁面
- 前端教程大綱梳理
- 對Web開發(fā)中前端框架與前端類庫的一些思考
- JavaScript基礎(chǔ)教程——入門必看篇
- 前端入門技能梳理
- 優(yōu)質(zhì)前端資源推薦
- Linux 搭建Nodejs
- 2018鄭州FCC第一次沙龍分享
- 關(guān)于鄭州FCC以及2018年的活動計劃