我想在一个html 上面生成好多小方块

我想在一个html 上面生成好多小方块,结果与百度图片那种相似,方块大小是相同的,

(1) 实现的方法 就是设置 div 的float 属性就可以了 left

div { background-color:Gray; width:150px; height:150px;  float:left; margin:10px;}

(2)怎么让div 的文字显示在div 的中央

text-align:center; line-height:150px;text-align:center;(水平居中)line-height:和高一样的参数;(垂直居中),

(3)怎么让div 显示在页面的特定部位

<div  style='position:absolute;top:20%;left:15%;z-index:9; width:800px; height:600px'></div>

(4) 使用jiathis 分享

<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=1356925732494226&move=0" charset="utf-8"></script>

将这句话加入到body 里面就行了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css" >
.group1 { background-color:Gray; width:150px; height:150px; float:left; margin:10px; text-align:center; line-height:150px;}
.group2 { background-color:Gray; width:80px; height:80px; margin-left:0px; margin-right:10px; margin-bottom:10px; margin-top:10px; text-align:center;line-height:80px; }
.group3 { background-color:Gray; width:80px; height:80px; float:left; margin-right:10px; text-align:center;line-height:80px; }
</style>
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=1356925732494226&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

</head>
<body>
<div id="leftbar" style='position:absolute;top:20%;z-index:9; margin:0px; width:100px; height:600px'>
<div class="group2">2</div>
<div class="group2">2</div>
<div class="group2">2</div>
<div class="group2">2</div>
<div class="group2">2</div>
</div>
<div id="topbar" style=" position:absolute; top:0%; margin-left:200px; width:800px; height:100px" >
<div class="group3">3</div>
<div class="group3">3</div>
<div class="group3">3</div>
<div class="group3">3</div>
<div class="group3">3</div>
</div>
<div style='position:absolute;top:20%;left:15%;z-index:9; width:800px; height:600px'>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
<div class="group1">1</div>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=1356925732494226&move=0" charset="utf-8"></script>
</body>
</html>

posted on 2013-01-07 15:23  GIS-MAN  阅读(5184)  评论(0编辑  收藏  举报

导航