zoukankan      html  css  js  c++  java
  • 前端之CSS列表及背景类属性

    一、列表类属性:

    1.列表符号样式:

    list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式);

    2.使用图片作为列表符号:

    list-style-image:url(图片路径);

    3.列表符号位置:

    list-style-position:outside(默认值,在外边)|inside(在里边);

    4.去掉列表符号样式:

    list-style:none;

    常用写法:  ol,ul{list-style:none;}

    二、背景类属性:

    1.背景颜色:

    background-color:颜色值;

    注:颜色值设置方法同字体颜色

    2.背景图片:

    background-image:url(背景图片路径);

    注:网页中常见的两种图片:img标签引入图片和背景图片

       a)网页中常进行更换的数据型图片使用img标签插入

       b) 用来装饰网页,不需要经常更换的图片使用背景图插入

       c) 我们可以在背景图上显示任何的文本,图片

    3.背景图平铺属性:

    background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

    4.背景图位置:

    background-position:left|center|right|数值  top|center|bottom|数值;

    注:a)第一个值代表水平方向,第二个值代表垂直方向

        b)当两个值都为center时,可以省略第二个值

        c)当设置为数值时,水平方向向右为正值,向左为负值,垂直方向向下为正值,向上为负值

    5.背景属性简写方式:

    background:背景色 背景图 背景平铺属性 背景图位置;

    eg: background:#f00 url(1.jpg) repeat-x left center;

    6.背景图固定:

    background-attachment:scroll(默认值)|fixed(固定);

    注:当页面出现滚动条时,背景图不跟随滚动条滚动,设置为fixed

    7.背景图显示原则:

    a)当容器尺寸等于背景图尺寸时,背景图正好显示在容器中

    b)当容器尺寸大于背景图尺寸时,背景图默认平铺,直至铺满整个容器

    c)当容器尺寸小于背景图尺寸时,背景图只能显示容器范围以内的部分

    8.网页中常见的图片格式:

    ajpg:适用于色彩数量比较丰富的图片,像素点越多越清晰

    b) gif:支持动画,支持透明

    c) png:支持透明

  • 相关阅读:
    vue与mui起冲突
    pc端使用微信登陆
    文字显示两行,多余的省略号(兼容搜狐)
    ios input 添加 readonly 属性,光标依旧还在的解决办法
    调用微信扫一扫接口扫描二维码
    js搜索框实现自动搜索功能
    跳转页面的几种方法
    关于清空object对象里的属性的两种方法
    http://stormzhang.com/opensource/2016/06/26/android-open-source-project-recommend1/
    给 Android 初学者的 Gradle 知识普及
  • 原文地址:https://www.cnblogs.com/21-forever/p/10849665.html
Copyright © 2011-2022 走看看