zoukankan      html  css  js  c++  java
  • 问题:关于一个坛友的html布局实现

    来源:http://www.ido321.com/888.html

    坛友的需求如图

    这个跟上次贴友分类菜单的实现类似

    html:

       1: <body>
       2:     <div class="test">
       3:         <div>
       4:             <img src="my.jpg" alt="test">
       5:             <h3>图片标题</h3>
       6:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
       7:         </div>
       8:         <div>
       9:             <img src="my.jpg" alt="test">
      10:             <h3>图片标题</h3>
      11:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
      12:         </div>
      13:         <div>
      14:             <img src="my.jpg" alt="test">
      15:             <h3>图片标题</h3>
      16:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
      17:         </div>
      18:     </div>
      19: </body>
    css:
       1: *
       2: {
       3:     margin: 0 auto;
       4: }
       5: .test
       6: {
       7:     width: 400px;
       8:     height: 500px;
       9:     border: 1px solid black;
      10: }
      11: .test div
      12: {
      13:     border-bottom: 2px solid #ccc;
      14:     height: 150px;
      15:     width: 350px;
      16:     margin-top: 10px;
      17:     margin-bottom: 5px;
      18:     position: relative;
      19: }
      20: h3
      21: {
      22:     position: absolute;
      23:     left: 155px;
      24:     top: 55px;
      25: }
      26: span
      27: {
      28:     position: absolute;
      29:     top: 58px;
      30:     left: 250px;
      31:     font-weight: bold;
      32: }
      33: a{
      34:     color: #000;
      35:     text-decoration: none;
      36: }
      37: a:hover
      38: {
      39:     color: #000;
      40:     text-decoration: none;
      41: }

    效果:


  • 相关阅读:
    html5那些事儿
    Jquery插件开发方法
    Jquery用途
    常用的Jquery工具方法
    Jquery的方法(二)
    Jquery的方法(一)
    jQuery中bind,live,delegate,on的区别
    什么是大数据?
    Jquery选择器
    Caffe学习系列(12):不同格式下计算图片的均值和caffe.proto
  • 原文地址:https://www.cnblogs.com/ido321/p/4004843.html
Copyright © 2011-2022 走看看