问题：关于一个坛友的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,然后 ...
随机推荐
- java retention注解
Retention注解 Retention(保留)注解说明,这种类型的注解会被保留到那个阶段. 有三个值:1.RetentionPolicy.SOURCE —— 这种类型的Annotations只在源 ...
- Hibernate逍遥游记-第12章 映射值类型集合-005对集合排序(<order-by>\<sort>)
1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...
- javascript基础之数组对象
一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var m ...
- NPOI读取Excel，导入数据到Excel练习01
NPOI 2.2.0.0,初级读取导入Excel 1.读取Excel,将数据绑定到dgv上 private void button1_Click(object sender, EventArgs e) ...
- PowerDesigner中转换物理模型时的命名转换
原文:PowerDesigner中转换物理模型时的命名转换 最近在使用PowerDesigner建模数据库,在使用中积累了一些遇到的问题和解决办法,记录下来,希望对遇到同样问题的朋友有所帮助. 早 期 ...
- pancake sort的几个问题
1. 每次找剩下序列中的最大值,可以进行pancake sort,时间复杂度是O(n^2): 2. 求最少交换次数进行pancake sort的问题是个NP问题,搜索的时候,upper bound是2 ...
- 【问题】和NULL比较遇到的问题
1.问题描述: select FName from teacher where FId not in( select distinct FTeacherId from student ) 子查询返回的 ...
- 结巴分词标注兼容_ICTCLAS2008汉语词性标注集
计算所汉语词性标记集Version 3.0制订人:刘群 张华平 张浩计算所汉语词性标记集... 10. 说明... 11. 名词 (1个一类,7个二类,5个三类) 22. 时间词(1个一类,1个二类) ...
- Android应用程序中应用图标和名字的设置
在AndroidManifest.xml文件中设android:icon和 android:label指定名字和图标的位置,如: <application android:icon=" ...
- oracle索引，索引的建立、修改、删除
索引,索引的建立.修改.删除 2007-10-05 13:29 来源: 作者: 网友评论 0 条 浏览次数 2986 索引索引是关系数据库中用于存放每一条记录的一种对象,主要目的是加快数据的读取速度和 ...