百度首页模仿制作（html）详解 - 好文

相信大姐学习html这一门语言的第一步一般都是做一个百度首页或者菜鸟教程首页（菜鸟教程首页模仿戳这里
<https://blog.csdn.net/qq_39429962/article/details/82867074>
）什么的吧，下面就来分享一下我所写的百度首页的模仿过程：

1、分析布局，这里我将他的布局分为三大块，上中下各一个div块

2、往div块中添加详细内容，设置样式等等

效果图：

源代码：
<!DOCTYPR html> <html> <head> <title>百度一下，你就知道</title> <style type="text/css">
body{ height:100%; width:100%; margin:0; padding:0; } .main{ width:100%;
height:100%; margin:0; padding:0; } .menu{ text-align:right; } a{
text-decoration:none; } .middle{ text-align:center; width:100%; height:100px;
margin-top:130px; } .input{ border: 1px solid #b6b6b6; width:474px;
height:36px; font-size:20px; } .img{ align:middle; border:0; width:275px;
height:140px; } .submit{ background-color:#3385ff; height:38px; font-size:20px;
color:white; border:0 } </style> </head> <body> <div style="text-align:right;">
<div class="menu"> <a href="http://www.nuomi.com/?cid=002540">糯米</a> <a
href="http://news.baidu.com">新闻</a> <a href="http://www.hao123.com">hao123</a>
<a href="http://map.baidu.com">地图</a> <a href="http://v.baidu.com">视频</a> <a
href="http://tieba.baidu.com">贴吧</a> <a
href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
<a href="http://www.baidu.com/gaoji/preferences.html">设置</a> <a
href="http://www.baidu.com/more/">更多产品</a> </div> </div> <div class="middle">
<form action="http://www.baidu.com/baidu" target="_blank"> <a
href="https://www.baidu.com/" target="_blank" align="center"> <img
src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu" class="img"> </a> <br>
<input type="text" class="input" name="word"> <input type="submit" value="百度一下"
class="submit" href="https://www.baidu.com/" > </form> </div> <div
align="center" style="bottom:0;margin-top:300px;"> <div> <a id="setf"
href="//www.baidu.com/cache/sethelp/help.html" target="blank">把百度设为主页</a> <a
href="http://home.baidu.com">关于百度</a> <a
href="http://ir.baidu.com">About Baidu</a> <a
href="http://e.baidu.com/?refer=888">百度推广</a></p> <p>©2016 Baidu <a
href="http://www.baidu.com/duty/">使用百度前必读</a> <a
href="http://jianyi.baidu.com/">意见反馈</a> 京ICP证030173号 </p> <a
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
target="_blank">京公网安备11000002000001号</a> </div> </div> </body> </html>

热门工具换一换