仿写百度首页未登录状态

问题总结：

1.margin的运用灵活控制各元素的距离，下边距的设置会影响页面显示尺寸，可能导致右边出现下拉条，因此可以只设置margin-top。

2.在文档中一个换行可能导致一个空格或间隙。真正需要添加空格的地方用&nbsp；表示。

3.input的text和submit属性要保持高度一样，需要设置同样的font-size，并且submit还要设置一个padding-bottom为1。

4.大量重复class比如li标签的可以省去，直接通过ul的子元素来写,用“>”表示。

5.class命名不规范，要多看案例。

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<link rel="stylesheet" type="text/css" href="css/wangye5.css">
</head>
<body>
<ul class="ul1">
<li class="li1"><a id="more" href="">更多产品</a></li>
<li class="li1"><a class="set" href="">设置</a></li>
<li class="li1"><a class="login" href="">登录</a></li>
<li class="li1"><a href="">学术</a></li>
<li class="li1"><a href="">贴吧</a></li>
<li class="li1"><a href="">视频</a></li>
<li class="li1"><a href="">地图</a></li>
<li class="li1"><a href="">hao123</a></li>
<li class="li1"><a href="">新闻</a></li>
</ul>
<div class="clear"></div>
<div class="center">
<div class="content">
<img class="img1" src="img/bd_logo1.png" title="点击一下，了解更多"/>
<div class="input">
<input class="input1" type="text" /><input class="input2" type="submit" value="百度一下" />
<img class="img2" src="img/baidu2vm.png">
<br/><span class="span1">百度</span>
<div class="clear"></div>
<ul class="ul2">
<li class="li2"><a href="">把百度设为主页</a></li>
<li class="li2"><a href="">关于百度</a></li>
<li class="li2"><a href="">About  Baidu</a></li>
<li class="li2"><a href="">百度推广</a></li>
</ul>
<div class="clear"></div>

<p class="foot">©2018&nbsp;Baidu&nbsp;<a href="">使用百度前必读</a> <a href="">意见反馈&nbsp;</a>京ICP证030173号<img src="img/baidulogo2.png"/> <span class="span2"><a href="">京公网安备11000002000001号</a><img src="img/baidulogo3.png"/> </span></p>
</div>
</div>
</div>
</div>
</body>
</html>

css代码：

ul,li,p,input,body{
	margin:0;
	padding:0;
}
body{
background-color:white;
color:black;
font:normal bold 14px/30px Tahoma, Geneva, sans-serif;
}
.ul1 {
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline-block;
	position:absolute;
	right:5px;
	top:3px;
}
.li1{
	float:right;
	margin:10px;
}
.li1 a{
	color:black;
}
.li1 a:hover{
	color:#0000cc;
}

#more{
	background-color:#3388ff;
	color:white;
	text-decoration:none;
	padding:3px;
}
.more:hover{
	color:black;
	background:gray;
}
.login,.set{
	font-weight:lighter;
}
.clear{
	clear:both;
}
.center{
	text-align:center;
	margin-top:32px;
	
}
.content{
	display:inline-block;
	width:650px;
	height:auto;
	text-align:center;
	
	
	}
.img1{
	display:inline-block;
	width:270px;
	height:129px;
	
}
.input{
	text-align:center;
	margin:17px 0px;
}
.input1{
	border:solid 1px #AAAAAA;
	width:540px;
	height:34px;
	font-size:15px;
	text-indent:8px;
}
.input2{
	background-color:#3388ff;
	width:101px;
	height:36px;
	border:none;
	color:white;
	font-size:15px;
	padding-bottom:1px;
}
.img2{
	display:inline-block;
	width:64px;
	height:64px;
	margin:158px 0px 0px 0px;
}
.span1{
	display:block;
	color:#666666;
	font-size:12px;
	margin-left:-4px;
	margin-top:-10px;
}
.ul2{
	display:inline-block;
	list-style-type:none;
	margin-left:-15px;
	margin-top:8px;

}
.li2{

	float:left;
	margin:0px 14px;
}
.li2 a{
	color:#999999;
	font-size:12px;
	font-weight:lighter;
}
.foot{
	color:#999999;
	font-size:12px;
	font-weight:lighter;
}
.foot a{
	color:#999999;
}
.span2{
	margin-left:23px;
}

运行结果：

仿写百度运行结果

仿写百度首页未登录状态

猜你喜欢