• 【day06】css


    一.背景(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;
       }

  • 相关阅读:
    Ajax | Form 上传图片文件
    .NET Core 上传图片到七牛云
    限制input输入框只能输入 数字
    MySql操作命令创建学生管理系统
    大数据之kafka-05.讲聊聊Kafka的版本号
    大数据之kafka-02.搞定kafka专业术语
    消息队列的作用以及kafka和activemq的对比
    .Net Core 3.1迁移整理
    RabbitMQ的使用
    .NET Framework 项目多环境下配置文件web.config
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11627224.html
Copyright © 2020-2023  润新知