问题：关于一个坛友的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>
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布局实现的更多相关文章
- 由一位坛友的布局想到的定位问题：absolute和relative
坛友的问题和相关代码如下: 看看下面的代码.运行有问题.但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left; ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- Revit API创建一个拷贝房间内对象布局命令
本课程演示创建一个拷贝房间内对象布局命令,完整演示步骤和代码.这个命令把选中房间内的对象复制到其它选中的一个或多个房间中,而且保持与源房间一致的相对位置.通过本讲座使听众知道创建一个二次开发程序很简单 ...
- 问题：关于坛友的一个js轮播效果的实现
需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div 然后在原位置在隐藏一个div 给按钮添加click事件,转到下一个时 ...
- 问题：关于坛友的一个定时重复显示和隐藏div的实现
需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...
- 问题：关于坛友一个获取text内容并改变样式的实现
需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 1: <!DOCTYPE HTML> 3: <head> "content-t ...
- PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- 自定义View(三)--实现一个简单地流式布局
Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...
- 第一个Xcode项目 - 代码修改布局约束
第一行的选中效果已经有了,那第二行的选中效果怎么做呢?我这里选择改变布局约束来实现选中效果 [我有个用object-c做APP的同事他说,我觉得这个应该去获取色块的位置,然后赋给选中用的View,然后 ...
随机推荐
- TCL语言笔记：TCL练习二
一.练习 1.二进制转十进制 proc b2d {b} { ;set len [string length $b] } {$i<$len} {incr i} { incr sum [expr , ...
- Hibernate逍遥游记-第13章 映射实体关联关系-001用外键映射一对一(<many-to-one unique="true">、<one-to-one>)
1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...
- java：I/O 字节流和字符流
字节流 InputStream和OutputStream的子类:FileInputStream 和 FileOutputStream 方法: int read(byte[] b,int off,int ...
- 77. Combinations
题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For ex ...
- 6、JPA_映射单向多对一的关联关系（n的一方有1的引用，1的一方没有n的集合属性）
单向多对一的关联关系 具体体现:n的一方有1的引用,1的一方没有n的集合属性 举个例子:订单Order对顾客Customer是一个单向多对一的关联关系.Order是n的一方,有对Customer的引用 ...
- hdu 4882 ZCC Loves Codefires (贪心 推导)
题目链接 做题的时候凑的规律,其实可以 用式子推一下的. 题意:n对数,每对数有e,k, 按照题目的要求(可以看下面的Hint就明白了)求最小的值. 分析:假设现在总的是sum, 有两个e1 k1 e ...
- hdu 4825 Xor Sum （建树） 2014年百度之星程序设计大赛 - 资格赛 1003
题目 题意:给n个数,m次询问,每次给一个数,求这n个数里与这个数 异或 最大的数. 思路:建一个类似字典数的数,把每一个数用 32位的0或者1 表示,查找从高位向底位找,优先找不同的,如果没有不同的 ...
- Codeforces Round #237 (Div. 2) B. Marathon（卡long long）
题目:http://codeforces.com/contest/404/problem/B #include <iostream> #include <cstring> #i ...
- POJ3485 区间问题
题目描述有些坑.. 题意: 有一条高速公路在x轴上,从(0,0)到(L,0).周围有一些村庄,希望能够在高速公路上开通几个出口,使得每个村庄到最近的出口距离小于D,求出最少需要开通多少个出口. 解题思 ...
- js array 数组删除元素
/* * 方法:Array.remove(dx) * 功能:根据元素位置值删除数组元素. * 参数:元素值 * 返回:在原数组上修改数组 */ Array.prototype.baoremove = ...