负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.demoTab{width:400px; font:14px/1.5 Microsoft YaHei,verdana,Helvetica,Arial,sans-serif;}
.demoTab .demoTabHd{margin-bottom:-1px; border:1px solid #6C92AD; border-bottom:none; background:#EAF0FD;}
.demoTab .demoTabNav{height:28px; overflow:hidden; *zoom:1;}
.demoTab .demoTabList{float:left; margin-left:-1px; padding:0 22px; line-height:28px; border-left:1px solid #6C92AD; border-right:1px solid #6C92AD; font-weight:bold; color:#005590; text-align:center; cursor:pointer;}
.demoTab .demoTabList.current{position:relative; background:#fff;}
.demoTab .demoTabBd{border:1px solid #6C92AD;}
.demoTab .demoTabBd .roundBox{padding:15px;}
.demoTab .demoTabContent{display:none;}
.demoTab .demoTabContent.current{display:block;}
</style>
<body>
<div id="demoTab" class="demoTab">
<div class="demoTabHd">
<ul class="demoTabNav clearfix">
<li class="demoTabList current">前端</li>
<li class="demoTabList">实战</li>
<li class="demoTabList">交互</li>
<li class="demoTabList">优化</li>
</ul>
</div>
<div class="demoTabBd">
<div class="roundBox">
<div class="demoTabContent current">这是第一个选项卡的内容。</div>
<div class="demoTabContent">这是第二个选项卡的内容。</div>
<div class="demoTabContent">这是第三个选项卡的内容。</div>
<div class="demoTabContent">这是第四个选项卡的内容。</div>
</div>
</div>
</div> <br>
<br>
<style>
.demoSpecItem{width:212px; min-height:178px; _height:178px;}
.demoSpecItem .demoItemPic{display:block; text-align:center;}
.demoSpecItem .demoItemPic img{padding:5px; border:1px solid #ccc;}
.demoSpecItem .demoIcon{display:block; margin:-185px 0 0 150px;}
</style>
<div class="demoSpecItem"><!--
--><a href="javascript:void(0)" class="demoItemPic"><!--
--><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /><!---->
</a><!--
--><span class="demoIcon"><img width="54" height="54" src="buyInSoon.png" alt="icon" /></span>
</div> <br>
<br>
<style>
.demoLayout{width:500px; border:1px solid #aaa; background:#EEEEEE;}
.demoLayout .roundBox{padding:10px; min-height:170px; _height:170px;}
.demoLayout .demoShowPic img{padding:1px; border:1px solid #DAA520;}
.demoText{margin:-170px 0 0 215px;}
.demoLayoutBtn{margin:15px 0 0 0;}
</style>
<div id="demoLayout" class="demoLayout">
<div class="roundBox">
<div class="demoShowPic"><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /></div>
<div class="demoText">利用负margin制作左右布局</div>
</div>
</div>
</body>
</html>
直接copy代码到浏览器看,easy,轻松加微笑
负margin一些奇葩的布局技巧的更多相关文章
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
- 我知道你不知道的负Margin
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- 负margin在页面布局中的应用
关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...
- css布局之负margin妙用及其他实现
相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...
- 负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
- CSS艺术之---负margin之美
CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
随机推荐
- 首个攻击该Mac OS系统的恶意软件——KeRanger
首个攻击该Mac OS系统的恶意软件——KeRanger 曾几何时,苹果操作系统一度被人认为是最安全的操作系统.然而近几年,针对苹果系统的攻击日益增多,影响范围也越来越大.无独有偶,近日,苹果Mac ...
- 关于comparable与comparator的用法(即自定义集合框架用法 )
package javastudy; import java.util.Comparator; import java.util.Iterator; import java.util.TreeSet; ...
- 深入.NET框架 项目《魔兽登录系统》
创建魔兽系统相关窗体: 登录窗体(frmLogin) 注册窗体(frmRegister) 主窗体 (frmMain) 实现魔兽登录系统: 登录的界面如下 实现思路: 1.创建一个对象数组,长度为1 ...
- 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- Jsp c标签数值格式化
整数带千分符显示:<fmt:formatNumber value="${num}" type="number"/> 整数显示:<fmt:for ...
- C# Winform关于控件TabControl闪烁的问题
自己重写了一个Form,然后再该form上放一个TabControl鼠标移上去会闪烁,经过网上查找解决方案,最后总算是解决了....下面附上代码: 重写一个TabControl代码如下: using ...
- C语言 简单的栈
//简单的栈 #include<stdio.h> #include<stdlib.h> //栈的介绍:栈先进后出,一般用于将数据逆序输出 //栈一般只有四种方法--进栈,出栈, ...
- MySQL基础 - 编码设置
刚开始工作的时候,在工作中遇到的与数据库相关的问题,多半跟编码有关,总结一下数据库编码的设置. 字符集 查看数据库支持的字符集: mysql> SHOW CHARACTER SET; 从图中可以 ...
- 《Linux及安全》实验安排
SEED(SEcurity EDucation)项目由雪城大学杜文亮教授2002年创立,为计算机教学提供一套信息安全实验环境,目前已开发超过30个实验,涵盖广泛的安全原理,被全世界数百个高校采用. 实 ...
- IOS开发之—— iOS 支付 [支付宝、银联、微信]
支付宝iOSsdk官方下载sdk地址:https://b.alipay.com/order/productDetail.htm?productId=2013080604609654&tabId ...