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一些奇葩的布局技巧的更多相关文章

  1. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  2. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

  3. 我知道你不知道的负Margin

    现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...

  4. 负值之美：负margin在页面布局中的应用

    本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...

  5. 负margin在页面布局中的应用

    关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...

  6. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  7. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  8. CSS艺术之---负margin之美

    CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. 给定一个整数N，找出一个比N大且最接近N，但二进制权值与该整数相同 的数

    1,问题描述 给定一个整数N,该整数的二进制权值定义如下:将该整数N转化成二进制表示法,其中 1 的个数即为它的二进制权值. 比如:十进制数1717 的二进制表示为:0000 0110 1011 01 ...

  2. AC日记——信息传递 洛谷 P2661 （tarjan求环）

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  3. linux下查找某个目录下包含某个字符串的文件

    有时候要找一些字符串,但是又不知道在哪个文件,只记得一些字符串 那么如何在linux下寻找包含某段文字的文件呢? 强大的find命令可以帮你完成不可能的任务. 比如我只记得我的程序里包含唯一的字符串“ ...

  4. [转] Linux学习之CentOS(十三)--CentOS6.4下Mysql数据库的安装与配置

    from:  http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 如果要在Linux上做j2ee开发,首先得 ...

  5. FusionCharts参数的详细说明和功能特性（转）

    功能特性animation                    是否动画显示数据,默认为1(True)showNames                    是否显示横向坐标轴(x轴)标签名称ro ...

  6. C语言 预处理一（文件包含--#include）

    //预处理命令不需要在结束末尾加":" //#inlude可以包含任意类型的文件 //#inlude 将一个源文件的全部内容包含到另一个源文件中,成为它的一个部分,文件包含的一般格 ...

  7. EF code First数据迁移学习笔记（转）

    转自:http://www.cnblogs.com/icyJ/p/migration.html 准备工作 1.新建一个控制台项目, 在"程序包管理控制台"执行 Install-pa ...

  8. Android Drawable的9种子类 介绍

    原文: Android Drawable的9种子类 介绍   Drawable 在android里面 就是代表着图像,注意是图像 而不是图片. 图片是图像的子集.图像除了可以包含图片以外 还可以包含颜 ...

  9. 面试准备(二) 绘制 Activity 的生命流程图

    我们来看一下这一张经典的生命周期流程图: 相信不少朋友也已经看过这个流程图了,也基本了解了Activity生命周期的几个过程,我们就来说一说这几个过程. 1.启动Activity:系统会先调用onCr ...

  10. Ant 执行 YUICompressor

    Ant 执行 YUICompressor 任务压缩 JavaScript 和 CSS 文件,解决中文乱码问题,增加源文件字符编码集设定 标签: javascriptantcss任务encodingnu ...