美文网首页
CSS布局测试

CSS布局测试

作者: 饥人谷_Young丶K | 来源:发表于2017-03-19 10:55 被阅读0次
    • 单列布局
      单列布局

    • 带导航条的单列实现:
      代码

    • 双列布局,侧边栏固定,主栏目自适应
      双列布局

    • 三列布局:左右是固定宽度,中间是自适应宽度,需要注意的html的顺序
      三列布局

    • 负margin的小测试 等距排列

    • 圣杯布局:也是三列布局,两边固定宽度,中间自适应。但是把中间内容元素在元素次序中放到最前面。
      圣杯布局

    双飞翼布局:为了解决圣杯布局,当.aside的宽度大于.main的宽度时就会出现错乱。双飞翼布局就能够让.main永远不会比.aside小。
    双飞翼布局

    布局图片展示列表:利用负margin 让图片等距排列
    我是代码

    备注一个CSS的各种动画效果 原文地址:地址

    相关文章

      网友评论

          本文标题:CSS布局测试

          本文链接:https://www.haomeiwen.com/subject/qudunttx.html