怎样做一个简单的百度首页界面？Follow me! lets show it for you!!!

一、工具

1.开发工具：本人使用的STS(下载安装即可)，其他工具也可。

2.测试浏览器：火狐浏览器。

二、操作流程

1.在STS新建一个动态网页项目工程:File→New→Project→Web→Web fragment project→Next→Project Name创建工程名字→Finish→打开新创建的项目你会看到如图（1）所示，这时候我们的动态网页项目工程就建好了，下面开始敲代码。

图（1）

2.新建一个html文件：打开WebContent→New→Html.File→FileName（index.html）→Finish,做完后打开我们的index.html文件如图（2）所示，这时候就建好了百度首页的HTML文件。

图（2）

3.写代码：源码如下，其中代码中用到的图片分别为图（3）（4）（5），将图片粘贴到WebContent目录下即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下你就知道</title>
<style type="text/css">
/*div{
text-align:right;
}*/
body{
font-family:arial;
font-size:12px;
}
#topbar{/*id选择器*/
text-align:right;
font-sixe:13px;
margin-top:18px;
padding-right:5px;
}
#topbar1 a{
color:#999;
margin-left:25px;
margin-top:18px
}
#topbar2 a{
color:#999;
}
/*#topbar0 span{
color:#999;
}8*/
#topbar2 span{
color:#999;
}
#topbar a{
color:#333;
margin-left:20px;
}
.bola{
font-weight:700;
}
#topbar #morepro{
background:#2d78f4;
color:#fff;
padding:3px;
}
.centerdiv{
text-align:center;
}
#searchText{
width:540px;
height:32px;
border:1px solid #2d78f4;
}
#submitBtn{
width:100px;
height:36px;
background:#3385ff;
color:#fff;
border:none;}

.iconCls0{
               display:inline-block;
               width:14px;
               height:17px;
               background:url(icons_5859e57.png) -600px -95px;
           }
.iconCls{
               display:inline-block;
               width:14px;
               height:17px;
               background:url(icons_5859e57.png) -624px -95px;
           }

</head>
</style>
<body>
<div id="topbar">
<a href="https://news.baidu.com"class="bola">新闻</a>
<a href="https://www.hao123.com"class="bola">hao123</a>
<a href="https://map.baidu.com"class="bola">地图</a>
<a href="https://v.baidu.com"class="bola">视频</a>
<a href="https://tieba.baidu.com"class="bola">贴吧</a>
<a href="https://xueshu.baidu.com"class="bola">学术</a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
<a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
<a id="morepro"href="百度一下，你就知道.htm" >更多产品</a>
</div>
<div class="centerdiv"><img src="bd_logo1.png" width="270" style="margin-top:135px" style="color:#999" ></img></div>
<div class="centerdiv"><form><input id="searchText"><input id="submitBtn" type="submit" value="百度一下" style="margin-top:30px"></form></div>

<div id="topbar1" class="centerdiv" style="margin-top:20px">
<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设置为主页 </a>
<a href="http://home.baidu.com/">关于百度 </a>
<a href="http://ir.baidu.com/" >AboutBaidu </a>
<a href="http://e.baidu.com/?refer=888">百度推广</a>
</div>
<div id="topbar2" class="centerdiv" style="margin-top:8px">
<span>@2018Baidu</span>
<a href="http://www.baidu.com/duty/">使用百度前必读 </a>
<a href="http://jianyi.baidu.com/">意见反馈 </a>
<span>京ICP证030173号</span>
<span class="iconCls0"></span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="margin-left:18px">京公安网备号11000002000001 </a>
<span class="iconCls"></span>

</div>
</body>
</html>

图（3）图（4）图（5）

4.页面做好了咱们一起来运行一下吧,右键点击index.html文件→OpenWith→System Editor(本人系统默认浏览器为火狐)，所以打开就是火狐浏览器，成品见图（6），图（7）为真正的界面，可以对比一下，个人感觉还是比较像的。

图（6）

结语：第一次写博客，做的界面不够好，但是希望大家多多支持，不喜勿喷，不过有好的建议，可以多多评论告诉我。

怎样做一个简单的百度首页界面？Follow me! lets show it for you!!!

猜你喜欢