制作百度首页时候,除了要用到div进行分块,还需要对快的位置进行控制,一般有
对div进行规范大小width,height分别对应宽度高度
margin:有对div进行定位有margin-top,margin-left,margin-right,margin-buttom
float-left:吧div元素进行从左到右排列
了解这些简单的操作之后,就可以自己动手做出一个简单百度页面了,例如:
上面的页面html代码如下:
<html>
<head>
<title>百度一下,你就知道</title>
<link href="baidu.ico" rel="shortcut icon" type="image/x-icon"/>
<style>
.div_head{
width:100%;
height:190px;
margin-top:0px;
}
.div_mid{
width:100%;
height:130px;
margin-top:0px;
}
.div_body{
width:100%;
height:430px;
margin-top:0px;
}
.div_base{
width:100%;
height:60px;
float:left;
margin-top:0px;
}
.div_based{
width:100%;
height:100%;
float:left;
margin-top:0px;
}
}
.div_head1{
width:800px;
height:50px;
float:right;
}
.div_head2{
width:70px;
height:50px;
float:left;
line-height:50px;
}
.div_mid1{
width:270px;
height:130px;
float:left;
margin-left:39%;
}
.div_body1{
width:636px;
height:36px;
float:left;
margin-left:32%;
}
.div_base1{
width:60px;
height:60px;
float:left;
margin-top:5%;
}
</style>
</head>
<body>
<div class="div_head" >
<div class="div_head1" >
<div class="div_head2" style="margin-left:40%"><ins>新闻 </ins></div>
<div class="div_head2" ><ins>hao123 </ins></div>
<div class="div_head2" ><ins>地图 </ins></div>
<div class="div_head2" ><ins>资源 </ins></div>
<div class="div_head2" ><ins>视频 </ins></div>
<div class="div_head2" ><ins>贴吧 </ins></div>
<div class="div_head2" ><ins>学术 </ins></div>
<div class="div_head2" ><ins>登录 </ins></div>
<div class="div_head2" ><ins>设置 </ins></div>
<div class="div_head2" >更多产品</div>
</div>
</div>
<div class="div_mid" >
<div class="div_mid1" >
<a href="https://www.baidu.com/s?wd=%E7%BD%91%E7%BB%9C%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7%E8%AF%9E%E7%94%9F&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank"><img height=130 width=270 src="baidu.gif " title="世界第一个网络表情"/></a>
</div>
</div>
<div class="div_body" >
<div class="div_body1" >
<form action="https://www.baidu.com/s" method="get" >
<input style="width:500px;height:36px; id="wd" name="keyword" type="text"/ >
<img src="camera.png" height=16 width=18;/>
<input id="gender" name="gender" type="submit" value="百度一下"style="width:100px;height:36px;/>
</div>
</div>
<div class="div_base" >
<div class="div_base1" style="margin-left:32%;">
<img height=60 width=60 src="erweima.png " title="我是一个二维码"/>
</div>
</div>
</body>
</html>
通过这个简单的百度页面 ,让自己对元素的应用更加得心应手