问题：关于一个坛友的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,然后 ...
随机推荐
- iOS开发网络篇-NSURLSession介绍
NSURLSession: 作用: 和NSURLConnection一样 1.负责发送请求,建立客户端和服务器的连接发送数据给服务器 2.并收集来自服务器的响应数据 步骤: 1.创建NSURLSess ...
- Excel多条件筛选求和
单位A 代码B 面积(㎡)C A组 011 124 A组 123 15 A组 011 356 A组 123 44 B组 123 31 B组 011 2 B组 123 2 按照单位和代码求面积的和,可以 ...
- Android学习之-TextView的滑动效果
textView中如何设置滚动条 在xml中定义: <TextView android:layout_width="wrap_content" ...
- 关于为什么java需要垃圾回收
为什么java采用垃圾回收而c++却不采用,这是因为在java中,所有对象变量都是引用,当一个引用被新对象覆盖掉时,就没有引用指向原来的对象了,这个对象就“失控了”. 而C++中,除非使用特殊符号&a ...
- Ubuntu下的svn的安装
安装SVN问题很多,现在目前遇到的问题是,安装时候找不到svn connector的连接器 导致不能够对SVN插件进行完整安装.但是可以单独安装该插件 http://community.pol ...
- linux下操作PostgreSQL的常用命令
一般性: \copyright 显示PostgreSQL的使用和发行许可条款 \g [文件] or; 执行查询 (并把结果写入文件或 |管道) \h [名称] SQL命令语法上的说明 ...
- hdu 4911 Inversion （分治 归并排序 求逆序数）
题目链接 题意:给n个数,求交换k次相邻的数之后的最小的逆序数对. 用分治的方法,以前在poj上做过这种题,昨天比赛的时候忘了.... 下面的归并排序还是以前的模板. #include <ios ...
- sql server 数据库 ' ' 附近有语法错误
昨天做项目时候,遇到标题的问题,代码跟踪把sql 语句 复制出来在数据库执行不了, 然后重新写个一模一样的,然后在 赋值到代码中,还是同样的错误, 就是不知道哪里出现了错误,最后 把 sql 语句写成 ...
- Java 解析 XML
Java 解析 XML 标签: Java基础 XML解析技术有两种 DOM SAX DOM方式 根据XML的层级结构在内存中分配一个树形结构,把XML的标签,属性和文本等元素都封装成树的节点对象 优点 ...
- C#基本知识点-Readonly和Const的区别
什么是静态常量(Const)和动态常量(Readonly) 先解释下什么是静态常量(Const)以及什么是动态常量(Readonly). 静态常量(Const)是指编译器在编译时候会对常量进行解析 ...