来源：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: }

效果：

问题：关于一个坛友的html布局实现的更多相关文章

  1. 由一位坛友的布局想到的定位问题：absolute和relative

    坛友的问题和相关代码如下: 看看下面的代码.运行有问题.但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left; ...

  2. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  3. Revit API创建一个拷贝房间内对象布局命令

    本课程演示创建一个拷贝房间内对象布局命令,完整演示步骤和代码.这个命令把选中房间内的对象复制到其它选中的一个或多个房间中,而且保持与源房间一致的相对位置.通过本讲座使听众知道创建一个二次开发程序很简单 ...

  4. 问题：关于坛友的一个js轮播效果的实现

    需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时 ...

  5. 问题：关于坛友的一个定时重复显示和隐藏div的实现

    需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...

  6. 问题：关于坛友一个获取text内容并改变样式的实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 1: <!DOCTYPE HTML> 3: <head> "content-t ...

  7. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  8. 自定义View(三)--实现一个简单地流式布局

    Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...

  9. 第一个Xcode项目 - 代码修改布局约束

    第一行的选中效果已经有了,那第二行的选中效果怎么做呢?我这里选择改变布局约束来实现选中效果 [我有个用object-c做APP的同事他说,我觉得这个应该去获取色块的位置,然后赋给选中用的View,然后 ...

随机推荐

  1. pinyin4j

    最近在倒腾与搜索相关的拼音检查技术,顺便看了一下中文转拼音开源插件pinyin4j的源码,参考资料:http://blog.csdn.net/hfhwfw/archive/2010/11/23/603 ...

  2. 转：在MyEclipse下创建Java Web项目 入门（图文并茂）经典教程

    本文是一篇在Myeclipse下构建Java Web项目的初级教程.图文并茂,非常详细.所用的Myeclipse版本是7.5. 第一步:新建Web Project,如下图. 第二步,在弹出的窗口填写下 ...

  3. Django admin site(二)ModelAdmin methods

    ModelAdmin methods save_model(request, obj, form, change) 此方法为admin界面用户保存model实例时的行为.request为HttpReq ...

  4. tomcat升级问题

    在本地开发使用myeclipse6.5自带tomcat,部署到服务器上是7.x,导致jsp页面无法解析. 所以想着在本地也使用tomcat7部署,myeclipse6.5不支持tomcat7.x,到网 ...

  5. Android zxing连续扫描

    initCamera(); if (mHandler != null) mHandler.restartPreviewAndDecode(); 在扫描完毕后执行这3句即可. 说明: 1.扫描处理方法为 ...

  6. json格式的字符串转为json对象遇到特殊字符问题解决

    中午做后台发过来的json的时候转为对象,可是有几条数据一直出不来,检查发现json里包含了换行符,造成这种情况的原因可能是编辑部门在编辑的时候打的回车造成的 假设有这样一段json格式的字符串 va ...

  7. showdialog（）与show的区别

    showdialog就是显示有模式的窗体,showdialog后面的语句不会执行,直到显示的窗体被关闭. show就是无模式的窗体,显示窗体后不论窗体是否关闭都执行show后面的语句. ------- ...

  8. Hibernate的一个注释 @Transient

    @Transient表示该属性并非一个到数据库表的字段的映射,ORM框架将忽略该属性. 如果一个属性并非数据库表的字段映射,就务必将其标示为@Transient,否则,ORM框架默认其注解为@Basi ...

  9. windows2003 IIS6网络负载平衡设置

    问题 随着计算机技术的不断发展,单台计算机的性能和可靠性越来越高.但现实中还是有许多应用是单台计算机难以达到,例如: 1.银行存储用户数据的数据库服务器必须保证24小时不间断的运转,并在发生严重硬件故 ...

  10. Java Web编程的主要组件技术——Struts入门

    参考书籍:<J2EE开源编程精要15讲> Struts是一个开源的Java Web框架,很好地实现了MVC设计模式.通过一个配置文件,把各个层面的应用组件联系起来,使组件在程序层面联系较少 ...