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

简介: Bullets 用来定义ul li 相关的样式 no-bullet  关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有小圆点了 pretty-bullets($bullet-icon, $width, $he...

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) 这个更常用 调用了上面两个

test
相关文章
|
7月前
【latex】参考文献排版前移,在最前面引用\usepackage{url}
【latex】参考文献排版前移,在最前面引用\usepackage{url}
199 0
|
7月前
|
Python
Python基础教程——pass语句
Python基础教程——pass语句
|
Ruby
雪碧图制作-Compass安装
雪碧图制作-Compass安装
125 0
|
前端开发
零基础CSS入门教程(13)——边框样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
零基础CSS入门教程(13)——边框样式
|
前端开发
零基础CSS入门教程(8)——CSS设置字体
我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小,浏览器一般默认字体是16px (2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold (3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal (4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了
零基础CSS入门教程(8)——CSS设置字体
|
前端开发
零基础CSS入门教程(1)——认识css
我们这一下小节认识一下css,什么是css,css是干什么的。CSS是层叠样式表的简称,有时可以称为CSS样式表或者级联样式表,也是一种标记语言,主要用于设置HTML页面中的文本内容,图片的外形或者版面的布局以及外观样式,可以称为网页美容师。 CSS最大价值:由HTML专注去做结构呈现,样式由CSS来完成,即结构(HTML)和样式(CSS)相分离CSS规则由两个主要的部分组成:选择器以及一条或多条声明(通俗理解为:选择器即为给谁改样式,多条声明为改成什么样式) 一般将CSS写在中,将HTML写在中,这样就
零基础CSS入门教程(1)——认识css
|
前端开发
零基础CSS入门教程(2)——CSS如何应用
上一篇介绍了CSS的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示下CSS是如何将样式应用到网页上好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。 那么如何应用呢,其实可以通过HTML的style属性来实现。也就是说,style属性的值就是我们要编写的CSS代码部分。通过style属性,我们可以将CSS样式代码应用到指定的标签上。看下面的代码,我们给p标签设置了style样式,style属性的值color:aquamarine;就是CSS代码 效果如下 从上
零基础CSS入门教程(2)——CSS如何应用
|
前端开发
零基础CSS入门教程(7)——CSS外联写法
我们前几个小结学习了选择器,我们这几个小结学习一下css外联写法,并且熟练运用。我们为什么要学习外联写法那,我们再写css的时候少量的代码我们可以写在html里面但是我们要是做项目或者工程我们就必须使用外联写法。目录 第一步新建html把外联样式导进来 外联css的代码 效果如下 我们这一小结学习了css外联写法,我们外联写法一般用在代码非常多的时候使用。
零基础CSS入门教程(7)——CSS外联写法
|
前端开发
零基础CSS入门教程(17)——内边距
我们可以通过padding-top、padding-right、padding-bottom、padding-left、,分别设置元素的上、右、下、做外边距。内边距、外边距的使用都很频繁,因此我们要合理熟练的使用内外边距,达到更好的效果。本篇来介绍内边距,顾名思义,内边距是指的元素内部的内容,与元素的边的距离。上一篇介绍了外边距,也就是元素跟相邻元素的距离。
零基础CSS入门教程(17)——内边距
|
前端开发
零基础CSS入门教程(12)——有序列表样式
我们上节课学习了无序列表样式,那我们这一小节学习一下有序列表样式,并熟练使用。我们本小节讲了有序列表的样式,我们学习了有序列表样式,我们要熟练掌握并使用。(1)list-style-type: lower-alpha小写英文字母。
零基础CSS入门教程(12)——有序列表样式