效果图:
用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如 底部的小图标懒得搞上去
这个小警徽和小图标
右上角的标题颜色没有细致修改
登陆和设置的浅色没有设置
但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容
分析百度搜索url设置相应表单项
https://www.baidu.com/s?wd=搜索内容&ok=提交
所以我们把input的id和name设成wd
把botton的id和name设成ok, value="提交"
再设置以get方式提交表单(默认)
就能达到打开真实的百度搜索内容的目的了
贴上源码,没有图片资源,需要可以找我要,
欢迎指正!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>百度一下,你不知道</title>
<style>
a {
color:#999;
}
.div_title{
width:100%;
height:40px;
}
.div_head{
width:100%;
height:125px;
margin-top:85px;
}
.div_search{
width:650px;
height:30px;
margin-top:15px;
margin:0 auto;
}
.div_erWeiMa{
width:100%;
height:90px;
margin-top:27%;
}
.div_foot{
width:40%;
height:30px;
margin-top:20px;
margin-left:30%;
color:#999;
text-decoration:none;
text-align: center;
line-height: 22px;
font: 12px arial;
}
.div_tail{
width:100%;
height:30px;
text-align: center;
color:#999;
font: 12px arial;
}
.div_menv{
float:right;
width:48px;
font-size:13px;
line-height:50px;
text-decoration:underline;
font-weight:bold
}
.div_gengDuo{
width: 60px;
height: 23px;
color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
border-bottom: 1px solid #38f;
margin-left: 7px;
margin-top: 10px;
}
.img_baidu{
width:350px;
display:block;
margin:0 auto;
}
.img_erWeiMa{
width:65px;
margin-left:47%;
}
.input_search{
width:500px;
height:30px;
float:left;
}
.button_ok{
width: 100px;
height: 36px;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border:0;
outline: medium;
float:left;
}
.div_photo{
width:20px;
position:absolute;
margin-left:460px;
margin-top:9px;
}
.img_photo{
width:20px;
}
</style>
</head>
<body>
<div class="div_title">
<div class="div_menv div_gengDuo">更多产品</div>
<div class="div_menv">设置</div>
<div class="div_menv">登录</div>
<div class="div_menv">学术</div>
<div class="div_menv">贴吧</div>
<div class="div_menv">视频</div>
<div class="div_menv">地图</div>
<div class="div_menv">hao123</div>
<div class="div_menv">新闻</div>
</div>
<div class="div_head">
<img src="baidu.jpg" class="img_baidu"/>
</div>
<div class="div_search">
<input id="wd" name="wd" form="search" type="text" class="input_search"/>
<button id="ok" name="ok" type="submit" value="提交" form="search" class="button_ok">百度一下</button>
<div class="div_photo"><img src="photo.jpg" class="img_photo"/></div>
</div>
<div class="div_erWeiMa">
<img src="er.jpg" class="img_erWeiMa"/>
</div>
<div class="div_foot">
<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
<a href="http://home.baidu.com/">关于百度</a>
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
<a href="http://e.baidu.com/?refer=888">百度推广</a><br>
</div>
<div class="div_tail">
©2018 Baidu <a href="https://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://jianyi.baidu.com/">意见反馈</a>
京ICP证030173号
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
</div>
<form id="search" action="http://www.baidu.com/s" method="get">
</form>
</body>
</html>