首页 > 其他 > 详细

compass typography 排版 常用排版方法[Sass和compass学习笔记]

时间:2014-07-09 13:24:41      阅读:301      评论:0      收藏:0      [点我收藏+]

Bullets

用来定义ul li 相关的样式

no-bullet  关闭 li的默认样式 那个小圆点

no-bullets 作用域ul 调用no-bullet 函数

不过用了reset 后 默认没有小圆点了

pretty-bullets($bullet-icon, $width, $height, $line-height, $padding)

@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
  margin-left: 0;
  li {
    padding-left: $padding;
    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
    list-style-type: none;
  }
}

可以看到是用来代替小圆点的替代方案 作用域ul 营销下面的li

$bullet-icon  传一张小图片 后面的参数都有默认值   郁闷如果是要穿一张大图片 里面自己选择小图片 就不能用这个方法了

Horizontal

这里有用的就一个 其他两个太底层了

horizontal-list($padding, $direction)

横着排放  $direction  left right

Inline List

常用的两种将li 航向排列 和带有分隔符的排列

inline-list 横向排列

delimited-list($separator) 带有分隔符的横向排列

$separator 为字符串

Inline-Block List

还是横向排列 不过每项都是block了 也是对 inline 和horizontal 进一步的包装

inline-block-list-container         可以看出来 是针对 类ul的

inline-block-list-item($padding) 针对 li的

inline-block-list($padding) 这个更常用 调用了上面两个

compass typography 排版 常用排版方法[Sass和compass学习笔记],布布扣,bubuko.com

compass typography 排版 常用排版方法[Sass和compass学习笔记]

原文:http://www.cnblogs.com/qqloving/p/3832538.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!