来源：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. Xamarin.Android 入门之：Android API版本设置

    一.引言 Xamarin.Android有几个Android API级别设置,确定多个版本的Android应用程序的兼容性.本博客解释了这些设置意味着什么,如何配置它们,以及它们在运行时对您的应用程序 ...

  2. 前端必杀技之Javascript 第1天

    学习了javascript基本语法和使用DOM进行简单操作   1.引用javascript方法: a.在<script></script>标签中加入js代码,如: <s ...

  3. Android：让EditText不自动获取焦点

    解决方法: 在EditText的父级控件中加入属性: android:focusable="true" android:focusableInTouchMode="tru ...

  4. WP之Sql Server CE数据库

    如何在WP8中进行数据存储,你首先想到应该是独立存储,但是独立存储似乎存储文件更方便,如果我们希望像处理对象的形式,该怎么办呢,答案就是Sql Server CE. Sql Server CE并不是新 ...

  5. CentOS 7.0安装Nvidia驱动

    entOS 7.0 Nvidia显卡安装步骤: 1 在英伟达官网下载相应驱动 搜索出相应的驱动后,不要直接点,而是右健,Save Link as... 否则,会出现下载半天没动静的情况. 存放的路径上 ...

  6. Java String.compareTo()方法

    描述:java.lang.String.compareTo() 方法比较两个字符串的字典. 比较是基于字符串中的每个字符的Unicode值.此String对象表示的字符序列的 参数字符串表示的字符序列 ...

  7. socklen_t在windows和linux平台下的头文件定义

    windows平台下:头文件:#include<ws2tcpip.h> linux平台下:下面两个头文件都有定义:1)#include <sys/socket.h>2)#inc ...

  8. [置顶] 手机通过socket控制电脑关机，重启，注销等功能

    服务端 package com.pc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOE ...

  9. bzoj2792

    首先想到二分答案是吧,设为lim 这道题难在判定,我们先不管将一个数变为0的条件 先使序列满足相邻差<=lim,这个正着扫一遍反着扫一遍即可 然后我们就要处理将一个数变为0的修改代价 当i变为0 ...

  10. 服务器发布MVC常见问题解决方案

    1  问题:IIS上部署MVC网站,打开后500错误:处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelin ...