1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta content="all" name="robots" />
  6. <title>margin负值的使用</title>
  7. <meta name="keywords" content="DIV+CSS培训,上海DIV+CSS培训,北京DIV+CSS培训,北京Php培训,上海Php培训,div+css教程,DIV+CSS高级手写网站布局重构服务及php网站程序开发,seo优化,http://www.xinran001.com/鑫然网络最专业" />
  8. <meta name="description" content=" 鑫然网络 鑫然网络主要从事上海DIV+CSS培训,北京DIV+CSS培训,北京Php培训,上海Php培训,div+css教程,承接DIV+CSS高级手写网站布局重构及php网站开发,seo优化等服务" />
  9. <style type="text/css">
  10. <!--
  11. *{
  12. margin:0px;
  13. padding:0px;
  14. }
  15.  
  16. ul{
  17. list-style-type:none;
  18. }
  19.  
  20. img {
  21. border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px;margin:0px;padding:0px;
  22. }
  23.  
  24. div {
  25. border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; border-right-width: 0px
  26. }
  27. body {
  28. width:100%;font-size:12px;background:#fff;padding: 0px;color:#000;font-family: '宋体','新宋体',arial,verdana,sans-serif;
  29. }
  30.  
  31. form {
  32. border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; border-right-width: 0px
  33. }
  34.  
  35. a:link {
  36. color:#003265; text-decoration: underline;
  37. }
  38. a:visited {
  39. color:#003265; text-decoration: underline;
  40. }
  41. a:hover {
  42. color:#fe0000; text-decoration: none;
  43. }
  44.  
  45. .divbody{
  46. padding-left:200px;background:#ccc;
  47. }
  48. .divbody_left{
  49. float:left;width:200px;margin-left:-200px;height:100px;
  50. }
  51. .divbody_right{
  52. width:100%;height:300px;background:#fff;
  53. }
  54. -->
  55. </style>
  56. </head>
  57. <body>
  58.  
  59. <div class="divbody">
  60. <div class="divbody_left">左边盒子</div>
  61. <div class="divbody_right">
  62.  
  63. <table cellspacing="0" border="1" width="100%">
  64. <tr>
  65. <td>1</td>
  66. <td>2</td>
  67. <td>3</td>
  68. </tr>
  69. <tr>
  70. <td>4</td>
  71. <td>5</td>
  72. <td>6</td>
  73. </tr>
  74. </table>
  75.  
  76. </div>
  77. </div>
  78.  
  79. </body>
  80. </html>

　　

margin负值的使用的更多相关文章

  1. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  2. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  3. margin负值的几种妙用

    1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 1 ...

  4. 微吧里的各种margin负值

    直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...

  5. margin负值 – 一个秘密武器

    CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

  6. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  7. margin负值的相关应用

    1.页面上实现css sprite背景定位效果   其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就 ...

  8. 初探Margin负值(转)

    相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negativ ...

  9. 双飞翼布局的改造 box-sizing和margin负值的应用

    box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...

随机推荐

  1. Redis命令参考（Keys & String)

    r = redis.Redis(ip, port, index) 如此实例化一个redis对象,index取值0-15,一个redis对象有16个库. Keys 函数 功能 返回值 备注 keys(s ...

  2. dig命令浅析

    dig命令,功能更强大的命令. man dig dig [@server] [-b address] [-c class] [-f filename] [-k filename] [-m] \ [-p ...

  3. nyoj 86 找球号(一）

    找球号(一) 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0& ...

  4. Office365 InfoPath 表单的设计和应用（原创）

    表单的应用:我想到的有2种. 1 做为自定义表单库的模版. 通过发放url(模版链接)给用户来填写表单. 最后将在表单库中得到所有填写的信息列表. 如 2 上传表单做为ContentType 也就是自 ...

  5. 那些好用的iOS开发工具

    版权说明 本文首发于<程序员>杂志 2014 年 6 月刊,未经允许,请勿转载. 前言 从 苹果发明 iPhone 起,AppStore 上的一个又一个类似 flappy bird 的一夜 ...

  6. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  7. js运动

    一.offsetWidth / offsetHeight 获取整个块的宽度/高度,包括border 二.clientWidth / clientHeight 获取块的宽度/高度,不包括border 三 ...

  8. ASP过滤HTML标签

    <% Function RemoveHTML(strHTML) Dim objRegExp, Match, Matches Set objRegExp = New Regexp objRegEx ...

  9. 20160512--hibernate--缓存

    缓存 缓存的作用主要用来提高性能,可以简单的理解成一个Map:使用缓存涉及到三个操作:把数据放入缓存.从缓存中获取数据.删除缓存中的无效数据.   原理模拟分析:(不能运行,只是模拟)(缓存实现复杂, ...

  10. java web 优化札记

    1.效果最明显最简单最省事的优化是SSD,一般优化效率3倍起,(未必对,但是说明很多瓶颈问题都是存储问题) 2.垂直扩容省了开发时间,短期来看是最快的,缺点是会消耗更多的资源,而且有瓶颈,另外如果应用 ...