zoukankan      html  css  js  c++  java
  • 我想在一个html 上面生成好多小方块 GIS

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

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

    div { background-color:Gray; 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; 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; 150px; height:150px; float:left; margin:10px; text-align:center; line-height:150px;}
    .group2 { background-color:Gray; 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; 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; 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; 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; 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>

  • 相关阅读:
    python基础33——进程池&线程池/协程
    python基础32——线程
    pycharm2020
    python基础31——进程
    python基础31——操作系统史&多道
    jmeter如何保持JSESSIONID
    Jmeter中自动重定向与跟随重定向的区别
    Jmeter之HTTP Cookie 管理器
    Kubernetes简述
    docker集群部署
  • 原文地址:https://www.cnblogs.com/gisbeginner/p/2849423.html
Copyright © 2011-2022 走看看