一.背景(Background)
 1. background-color 背景颜色
 2. background-image:url(图像URL);背景图片
 3. background-repeat: 背景重复
            repeat默认值|repeat-x水平重复|
            repeat-y垂直重复|no-repeat不重复
 4. background-position: 背景位置
            value 水平位置  value垂直位置
    说明:
     a.background-position方向
            水平方向: left center right
            垂直方向: top  center  bottom
     b.只有一个方向值
            此值代表水平方向,而垂直方向默认为垂直居中
     c.background-position:value值 value值
              正值背景图往右,负值背景图往左。
              如果大盒子小图一般正值
              如果小盒子大图一般负值  
 5. background-attachment 背景固定
            scroll默认值:有滚动条背景图像跟滚动条卷上去|
            fixed 固定:有滚动条背景图像不跟滚动条卷上去
 缩写形式:
    background:color image repeat
               attachment position
               
               
二.CSS精灵(CSS sprites)
 原理:将多个小的背景图像整合到一张大图上,
          减轻服务器负担
说明:CSS精灵(小盒子大图),所以background-position
         都是负值,最大值 (0,0)

三.列表(Lists)
 (1) list-style-type:disc 默认值。实心圆
                    circle   空心圆
                    square  实心方块
                    decimal  阿拉伯数字
                    lower-roman   小写罗马数字
                    upper-roman  大写罗马数字
                    lower-alpha  小写英文字母
                    upper-alpha  大写英文字母
                    none  不使用项目符号
 
 (2) list-style-image:url(图像URL);
 (3) list-style-position:outside|inside
 缩写形式
   list-style:type image position;
  说明:  常用:list-style:none;
 
 新闻列表常用:
  .list li{
       background:url(images/dot.png) no-repeat left center;
          padding-left:12px;
   }

【day06】css的更多相关文章

  1. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  2. 【10】css hack原理及常用hack

    [10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...

  3. 【01】CSS规范

    [01]CSS规范 []https://drafts.csswg.org/indexes/(下图)   https://www.w3.org/TR/2011/REC-CSS2-20110607/   ...

  4. 【04】 CSS开发注意事项

    [04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系 ...

  5. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

  6. 【荐】CSS实现漂亮实用带箭头的流程图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  8. 【经验】css

    1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...

  9. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

随机推荐

  1. 如果对象的引用被置为null,;垃圾回收器是否会立即释放对象占用的内存?

    不会,在下一个垃圾回调周期中,这个对象将是被可回收的. 也就是说并不会立即被垃圾收集器立刻回收,而是在下一次垃圾回收时才会释放其占用的内存.

  2. 【MySQL】MMM和MHA高可用架构

    用途 对MySQL主从复制集群的Master的健康监控. 当Master宕机后把写VIP迁移到新Master. 重新配置集群中的其他Slave从新Master同步 MMM架构 主服务器发生故障时, 1 ...

  3. docker容器的端口映射

    1.创建一个Nginx 容器,先不映射端口 [root@localhost ~]# docker run --name my_nginx -d nginx 7be3673a4c0f8f7ffe79a7 ...

  4. Prometheus 监控K8S集群资源监控

    Prometheus 监控K8S集群中Pod 目前cAdvisor集成到了kubelet组件内,可以在kubernetes集群中每个启动了kubelet的节点使用cAdvisor提供的metrics接 ...

  5. CentOS 8 换源,设置dnf / yum镜像

    aliyun更新了centos8的说明 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos- ...

  6. Jenkins持续集成的应用--基础

    1.测试工程师为什么要掌握持续集成 一个程序员如果想发布一个产品,他需要编码.编译.测试,发布的过程.对于一个企业来说,如果也想发布一个产品的话,同样的也是需要上述的过程,区别在于企业要发布的产品的需 ...

  7. vs扩展和更新插件的开发

    一.调试 以 MinimalisticView.vsix (https://github.com/poma/MinimalisticView) 为例. 正如 | Marketplace 上介绍的,这个 ...

  8. Django框架(二十一)--Django rest_framework-频率组件

    一.作用 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二.自定义频率类 # 写一个频率认证类 class MyThrottle: visit_dic = {} visit_ti ...

  9. openstack连接报错net_mlx5: cannot load glue library: libibverbs.so.1

    部署openstack controller节点,第二天登录主机提示错误信息 Connecting to 10.1.10.151:22...Connection established.To esca ...

  10. ubuntu 16.04中limit 修改

    第一,修改/etc/security/limits.conf: * soft nproc 65535* hard nproc 65535* soft nofile 65535* hard nofile ...