前端入门篇之模仿百度首页
郑州/设计爱好者/7年前/576浏览
版权
前端入门篇之模仿百度首页
前端系列入门教程之模仿写一个百度首页
问题：
说起前端其实基础的东西就那么多，也不难理解，但是如果想做一个好的页面，还是要做大量的练习，只有通过大量反复的练习，我们才能更加熟悉一些常用标签的使用场景和使用技巧，今天我就给大家提供一个简单的百度首页界面。可以直接复制代码运行。
效果图如下：
代码如下：
<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="javas cript:;">新闻</a></li>
<li><a href="javas cript:;">hao123</a></li>
<li><a href="javas cript:;">地图</a></li>
<li><a href="javas cript:;">视频</a></li>
<li><a href="javas cript:;">贴吧</a></li>
<li><a href="javas cript:;">学术</a></li>
<li><a href="javas cript:;">登录</a></li>
<li><a href="javas cript:;">设置</a></li>
<li class="more_products"><a href="javas cript:;">更多产品</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="javas cript:;">把百度设为首页</a></li>
<li><a href="javas cript:;">关于百度</a></li>
<li><a href="javas cript:;">About Baidu</a></li>
<li><a href="javas cript:;">百度推广</a></li>
</ul>
<div class="copyright">©2017 Baidu 使用百度前必读 意见反馈 京ICP证030173号 京公网安备11000002000001号 </div>
</div>
</body>
</html>
附上git地址：https://github.com/zhongyushi/baidu_index
总结：如果您对我的代码优化有更好的建议，欢迎交流指正。
4
Report
声明
3
Share
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
Log in
4Log in and synchronize recommended records
3Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share