我想在一個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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM