css列表属性和样式控制

如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。

css列表属性和样式控制

?

列表属性

html有三种类型的列表:无序列表,有序列表和自定义列表。设置列表标记有序号,圆点,圆圈,图片等多种形式。

list-style:简写属性,用于把下边三个属性声明到一起。

  1. list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。
  2. list-style-position : 设置列表中标记项的相对位置。
  3. list-style-image : 将图像设置为列表项标志。
list-style-type的属性值:
  • none:无标记。
  • disc:标记实心圆。不设置的时候默认disc。
  • circle:空心圆。
  • square:实心方块。
  • decimal:标记是数字。
  • lower-roman:小写罗马数字(i,ii,iii,iv……)
  • lower-latin:小写拉丁字母(a,b,c,d……)……
  • 还有一些比较见得少的,此处不添加,需要了可自行到w3c中查看。
list-style-position的属性值
  • inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
  • outside:默认值,保持标记位于文本的左侧。
  • inherit:从父级继承list-style-position属性值。

代码示例:

/* list-style简写设置它的三个属性值 */
list-style: square inside url("bg.jpg") ;
/* 等同于下边的样式 */
list-style-type:square;
list-style-position:inside;
list-style-image:url("bg.jpg");

css列表属性和样式控制

上一篇:js reflect


下一篇:自学c++基础