html中div

浏览数：21 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>你爸爸</title>


<style>
#input ul {
   margin: 0;
   padding: 0;
   list-style:none;
   padding-top: 25px;
}

#input li {
   float: left;
   padding-left: 20px;
}
#logo{
   height: 25%;
   text-align: center;
   margin-top: 80px;
   margin-bottom: 15px;
}
#logo span{
   color: blue;
   font-size: 45px;
}
#type{
   height: 25%;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 15px;
}
#div1{
   width: 100px;
   float: left;
   padding-left: 32%;
}
#div2{
   width: 100px;
   float: left;
}

#search{
   text-align: center;
   width: 100%;
}
#input{
   width: 40%;
   height: 40px;
   float:left;
   padding-left:32%;
}
#input span{
   padding-top: 25px;
}
#search_input{
   width: 100%;
   height: 30px;
}
#search_button{
   margin-right: 10px;
}
#right_div{
   width: 100px;
   float:left;
}
#right_div ul{
   list-style:none;
   margin: auto;
}
#end{

   text-align: center;
   width: 100%;
   height: 20%;
}
</style>

</head>
<body>

   <div id="logo" ><span id="google">Google</span>谷歌</div>

   <div id="type">
       <div id="div1" >网页</div>
       <div id="div2" ><a href="#">图片</a></div>
       <div id="div2" ><a href="#">资讯</a></div>
       <div id="div2" ><a href="#">地图</a></div>
       <div id="div2" ><a href="#">更多></a></div>
   </div>

   <div id="search" >
       <div id="input">
           <input id="search_input" type="text"/><br>
           <span>
               <input id="search_button" type="button" value="Google 搜索"/>
               <input type="button" value="手气不错" />
           </span>
           <ul>
               <li><input type="radio" name="page" value="" checked="checked">所有页面</li>
               <li><input type="radio" name="page" value="">中文页面</li>
               <li><input type="radio" name="page" value="">简体中文页面</li>
               <li><input type="radio" name="page" value="">中国的页面</li>
           </ul>
       </div>

       <div id="right_div">
           <ul>
               <li><a href="#"><font size="2">高级搜索</font></a></li>
               <li><a href="#"><font size="2">使用搜索</font></a></li>
               <li><a href="#"><font size="2">语言工具</font></a></li>
           </ul>
       </div>
   </div>

</body>
</html>