下面是我模仿百度首页所写的Html和css代码,在写代码测试的时候,发现了个小问题,就是两个button之间有间距,和之间,刚开始先想到的是margin问题,设置margin为0也不行,最后才恍然大悟,原来要设置float属性,也就是float:left。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{padding:0px; margin:0px;}
.bg-search-img{width:100%; height:720px; background-image:url(img/bg1.jpg); margin:0 auto;}
.search-logo{text-align:center;}
.search-btn{ margin:0 auto; width:640px; height:40px;}
.search-text{height:20px; width:521px; padding:9px 7px; border:1px solid #b8b8b8; outline:none; margin-right:0px; float:left;}
.search-sub{height:40px; background-color:#38f; border:none; padding:1px; line-height:38px; width:102px;color:white; font-size:16px;margin:0px; float:left;}
</style>
</head>
<body>
<div class="bg-search-img">
<div class="search-conent">
<div class="search-logo">
<img src="img/bdlogo.png" />
</div>
<div class="search-btn">
<form >
<input type="text" class="search-text" />
<input type="submit" class="search-sub" value="百度一下" />
</form>
</div>
</div>
</div>
</body>
</html>
效果图如下: