html 百度首页制作

效果图:

用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如底部的小图标懒得搞上去

这个小警徽和小图标

右上角的标题颜色没有细致修改

登陆和设置的浅色没有设置

但是设置了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&nbsp&nbspBaidu</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>

html 百度首页制作

猜你喜欢