• CSS背景和列表


    1-1 课程介绍

    背景样式

    ~background-color 设置元素的背景颜色

    ~background-image 把图像设置成背景

    ~background-position 设置背景图像的起始位置

    ~background-attachment 背景图像是否固定或者随着页面的其余部分滚动

    ~background-repeat 设置背景图像是否重复以及如何重复

    ~background 简写属性,作用是将背景属性设置在一个声明中。

    列表样式

    ~list-style-type 设置列表项标志的类型

    ~list-style-image 将图像设置为列表项标志

    ~list-style-position 设置列表中列表项标志的位置

    ~list-style 简写属性,用于把所有列表的属性设置于一个声明中。 

    2-1 background-color

    background-color:transparent;

    背景区包括内容、内边距(padding)和边框、不包含外边距(margin)。

    2-3 背景图片

    background-image:URL|none

    说明:

    1.url地址可以说相对地址也可以是绝对地址

    2.元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

    3.默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。

    2-6 background-repeat

    background-repeat:repeat|no-repeat|repeat-x|repeat-y

    2-8 background-attachment

    background-attachment:scroll  fixed

    scroll:默认值,背景图片随滚动条滚动

    fixed:当页面的其余部分滚动时,背景图片不会移动

    2-12 背景缩写

    background:background-color background-image

    background-repeat background-attachment background-position

    说明:各值之间用空格分割,不分先后顺序

    background:#000 url(img/bg.png)no-repeat fixed/scroll;

    3-1 列表项标记

    设置列表项的标记样式类型

    list-style-type:关键字|none

    1.无序列表

    none无标记 disc实心的原点 circle空心的圆点 square实心的方块

    2.有序列表

    none无标记 decimal从1开始的整数 lower-roman小写罗马数字

    upper-roman大写罗马数字 lower-alpha小写英文字母

    upper-alpha大写英文字母

    list-style-type:none circle

    3-3 list-style-image

    list-style-image:url(img/remind.png);

    3-5 list-style-position 列表项标记位置

    list-style-position:inside|outside

    inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐

    outside:默认值,列表项目标记放置在文本以外,且环绕文本标记对齐

     3-7 list-style 列表样式缩写

    list-style:list-style-type?list-style-position?list-style-image

    说明:1.值之间用空格分割 2.顺序不固定 3.list-style-image会覆盖list-style-type的设置

  • 相关阅读:
    CentOS 6.4 利用 Awstats 7.2 分析 Nginx 日志
    CentOS 6.4 x64 postfix + dovecot + 虚拟用户认证
    配置日志logwarch 每天发送到邮箱
    CentOSx64 安装 Gearmand 和 Gearman php扩展
    Redis之基本介绍
    Synchronized锁的基本介绍
    Lock的基本介绍
    java之threadlocal的使用
    Java之事务的基本应用
    linux之cp和scp的使用
  • 原文地址:https://www.cnblogs.com/cuishien/p/7997593.html
Copyright © 2020-2023  润新知