前端----HTML 百度首页制作

最新推荐文章于 2024-05-27 08:58:30 发布

NO0b

最新推荐文章于 2024-05-27 08:58:30 发布

阅读量1.6w

点赞数 8

分类专栏：前端文章标签： HTML 百度首页首页制作

本文链接：https://blog.csdn.net/q5706503/article/details/82833013

版权

前端专栏收录该内容

32 篇文章 3 订阅

订阅专栏

效果图:

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

这个小警徽和小图标

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

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

但是设置了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>

NO0b

关注

8
点赞
踩
61

收藏

觉得还不错? 一键收藏
3
评论
前端----HTML 百度首页制作

效果图:用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如底部的小图标懒得搞上去这个小警徽和小图标右上角的标题颜色没有细致修改登陆和设置的浅色没有设置但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容分析百度搜索url设置相应表单项https://www.baidu.com/s?wd=搜索内容&amp;ok=提交...
复制链接

扫一扫