专栏首页OECOM负margin在页面布局中的应用

负margin在页面布局中的应用

2017-11-07 07:23:04

两栏布局

在页面中经常会遇到两列的情况,比如说左侧栏固定宽度,右侧栏自适应宽度,此时可以用flex布局的方式,但是这种方式在ie8上不兼容,但是也可以用table。这里我们来说用margin的负值来实现两栏布局。

<div>
	<div style="height: 400px;float: left;width: 100%;background: green;">
		<div style="margin-left: 200px;">sdfsfdfsd</div>
	</div>
	<div style="height: 400px;float: left;width: 200px;background: red;margin-left: -100%;"></div>
</div>

如上代码,即可实现一个两列的布局,具体效果就是下图

去除列表右边距

项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:

html:

<div id="test">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </div>

css

 body,ul,li{ padding:0; margin:0;}
    ul,li{ list-style:none;}
    #test{
        width:320px;
        height:210px;
        background:#CCC;
    }
    #test ul{
        margin-right:-10px;
        zoom:1;
    }
    #test ul li{
        width:100px;
        height:100px;
        background:#F60;
        margin-right:10px;
        margin-bottom:10px;
        float:left;
    }

具体实现效果

去除列表最后一个li元素的border-bottom

列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。

HTML

<ul id="test">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>

CSS

 body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }

具体实现效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 仿qq空间好友动态刷新

    在qq空间里有好多网页特效值得初学html和js的去学习,今天我来介绍一种特效。我们在上qq空间是都会发现,当向下滚动鼠标,使滚动条到达最低端的时候,好友动态会...

    无邪Z
  • js实现底部带圆点的左右滑动效果

    在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果,前面我介绍了一种手机端上下滑动效果,今天我来给大家介绍一种手机端左右滑动并且底部有圆点,实心的圆...

    无邪Z
  • for of和for in的区别

    两个遍历方式的最终区别就在于:for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

    无邪Z
  • jquery入门

    周小董
  • 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

    Sb_Coco
  • JS示例23-隔行换色(li列表)

    专注APP开发
  • 0行JS,30行css搞定导航栏下划线跟随效果

    在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?

    Javanx
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    守候i
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    前端博客 : alili.tech
  • 原 each()、map()

    作者:汪娇娇 日期:2016.9.1 如果说到某个元素的开关事件,第一反应那就是用一个变量做标记,比如flag,为1时开,为0时关,这是很简单的。下面我将以li...

    jojo

扫码关注云+社区

领取腾讯云代金券