来源：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. ibatis缓存初探（1）

    一,IBATIS 缓存机制使用 1,sqlMapConfig.xml中配置   1.SqlMapConfig.xml中 <settings cacheModelsEnabled="tr ...

  2. Excel操作--使用NPOI导入导出Excel为DataTable

    1.ExcelHelper封装 namespace NPOI操作Excel { public class ExcelHelper { /// <summary> /// DataTable ...

  3. 几种C#程序读取MAC地址的方法

    原文:几种C#程序读取MAC地址的方法 以下是收集的几种C#程序读取MAC地址的方法,示例中是读取所有网卡的MAC地址,如果仅需要读取其中一个,稍作修改即可. 1 通过IPConfig命令读取MAC地 ...

  4. 使用CXF暴露您的REST服务

    使用CXF暴露您的REST服务 REST应用服务器SpringBeanServlet  1.  前言 现在互联网Open API流行,将您的Web应用也可以开放Open API给其他第三方使用.达到一 ...

  5. Linux命令学习笔记(1)

    groupadd 1.作用 groupadd命令用于将新组加入系统.2.格式groupadd [-g gid] [-o]] [-r] [-f] groupname3.主要参数-g gid:指定组ID号 ...

  6. Android 给listview设置分割线与边界的距离

    ListView可通过配置 android:dividerline android:dividerHeight 来实现分割listview中item的效果,如图: 如果想跟上图一样实现这种有设计的分割 ...

  7. VB 语言学习笔记.

    暂时用到,学习学习. 变量声明 Dim 变量名 as 数据类型类型 Set 实例 = new 类名 自定义数据类型 Type 数据类型标识符 域名 As 数据类型; 域名 As 数据类型; 域名 As ...

  8. 在Ubuntu上为Android系统编写Linux内核驱动程序（老罗学习笔记1）

    这里,我们不会为真实的硬件设备编写内核驱动程序.为了方便描述为Android系统编写内核驱动程序的过程,我们使用一个虚拟的硬件设备,这个设备只有一个4字节的寄存器,它可读可写.想起我们第一次学习程序语 ...

  9. BZOJ2429: [HAOI2006]聪明的猴子

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2429 题解:从某一点遍历n个点,且使最长边最短,就是MST了. 代码: #include< ...

  10. Android、iPhone和Java三个平台一致的加密工具

    先前一直在做安卓,最近要开发iPhone客户端,这其中遇到的最让人纠结的要属Java.Android和iPhone三个平台加解密不一致的问题. 因为手机端后台通常是用JAVA开发的Web Servic ...