来源：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. UML建模之活动图介绍(Activity Diagram)

    一.活动图的组成元素 Activity Diagram Element 1.活动状态图(Activity) 2.动作状态(Actions) 3.动作状态约束(Action Constraints) 4 ...

  2. Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试

    环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...

  3. C++：对象的初始化和构造函数

    对象的初始化和构造函数 构造函数:是一种特殊的成员函数,它主要用于为对象分配空间,进行初始化.构造函数 的名字必须与类名相同,它不要用户来调用,而是在建立对象时自动执行的 形式一: 类名 对象名(实参 ...

  4. 基于Jws的WebService项目

    基于Jws的WebService项目   1.服务器端建立 1.1.创建接口 [java] view plaincopy @WebService  public interface IWebServi ...

  5. 转TransactionProxyFactoryBean代理事务

    <?xml version="1.0" encoding="GBK"?> <!-- 指定Spring配置文件的DTD信息 --> < ...

  6. navigationbar的一些设置记录

    1.设置navigationbar背景颜色 [[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]]; PS:如果颜色不对 ...

  7. EXC_BAD_ACCESS

    EXC_BAD_ACCESS,就可以在控制台中看到是哪个对象被释放掉了. 另外要避免频繁的出现上述问题,下面是一些建议: 1. 当引用了别人传递进来的对象时,最好retain一下,避免在别人那里已经把 ...

  8. java开发之关键字

    abstract //抽象方法,抽象类的修饰符assert //断言条件是否满足boolean //布尔数据类型break //跳出循环或者label代码段byte //8-bit 有符号数据类型ca ...

  9. Android Studio修改包名和applicationId的方法

    背景: 如果新做的项目跟以前做的某一个项目十分相似,那么一个简单的方法就是把原来项目拷贝一份,然后修改代码,但是这样包名还是原来项目的包名,还有如果想在同一台手机上同时安装新做的app和原来的app会 ...

  10. IIS与ASP.NET中的队列

    一.IIS:应用程序池队列(Application pool queue,位于HTTP.SYS) 这是请求到达IIS后遇到的第一个队列,http.sys收到请求后会将请求放入对应的应用程序池队列,这样 ...