仿百度首页div+css

最新推荐文章于 2024-06-19 21:45:00 发布

chancechen

最新推荐文章于 2024-06-19 21:45:00 发布

阅读量4k

点赞数 2

本文链接：https://blog.csdn.net/u011546843/article/details/50738010

版权

刚刚开始学前端，手写仿百度首页。很多地方有缺陷，主要练习下div分割布局过程，加深对盒模型的理解。当是自己工作的一个记录吧。其中有参考过开源中国上的一个哥们的仿百度首页代码，但是思路上有差别。可能他的比较的成熟，我主要还是实现个样子。问题主要出现在图片位置确定，搜索框位置和按钮的契合。做的很low，还花了很久来做，估计零零散散要两个多小时，但是感觉还是有进步的。前端还是要多动手啊，看着很简单，动手之后各种问题层出不穷的。

<!DOCTYPE HTML>
<HTML>
<title>仿百度首页</title>
<link href="css/baidu.css" rel="Stylesheet" type="text/css" />
<body>
<div class="wrapper">
	<div class="top">
		<div class="topleft">
		</div>

		<div class="topright">
			<ul class="ul1">
				<li><a href="www.baidu.com">糯米</a></li>
				<li><a href="www.baidu.com">新闻</a></li>
				<li><a href="www.baidu.com">hao123</a></li>
				<li><a href="www.baidu.com">地图</a></li>
				<li><a href="www.baidu.com">视频</a></li>
				<li><a href="www.baidu.com">贴吧</a></li>
				<li><a href="www.baidu.com">登录</a></li>
				<li><a href="www.baidu.com">设置</a></li>
				<li></li>
			</ul>
		</div>
	</div>

	<div class="main">
		<div class="pic">
			<img src="bd_logo1.png" height=110 width=220 />
		</div>

		<div class="search">
			<form>
			<input class="input"value="百度一下，你就知道" maxlength="100"><input id="button" type="submit" value="百度一下">
			</form>
		</div>

	</div>
	
	<div class="bottom">
		<span>&copy;2016 baidu <a href="http://www.baidu.com/duty/">使用百度前必读</a> 京ICP证030173号<img width="13" height="16" data-loadfunc="1" src="http://su.bdimg.com/static/superplus/img/copy_rignt_24.png" data-loaded="1"></span>
	</div>
</div>
<body>
</html>

<pre name="code" class="css">*{
	padding:0px;
	margin:0px;
}
body{
	font-size:12px;
	font-family:"Microsoft YaHei";
}
.wrapper{
	width:100%;
}
.top{
	height:50px;
	/*background-color:blue;*/
}
.topleft{
	float:left;
}
.topright{
	float:right
}
.main{
	height:450px;
	/*background:blue;*/
}
.pic{	
	margin-top:100px;
	text-align:center
}
.search{
	text-align:center;
	margin-top:30px;
}
.input{
	font-size:20px;
	width:400px;
	border-width:1px;
	border-color:#317EF3;
	padding:0px;
	vertical-align: middle
}
#button{
	color:#FFF;
	width:100px;
	height:25px;
	background:#317EF3;
	margin-left:-10px;
	border:0px;
	padding:0px;
	vertical-align: middle
}
.bottom{
	text-align:center;
	margin-bottom:30px;
}
.ul1 li{
	display:inline;
	margin-bottom:10px;
	margin-right:10px;
}