【day06】css

  作者: thtomatic  分类: 前端   评论: [ 0 ] 条  浏览: [ 913 ] 次

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


以下为全部代码:

版权所有:《thtomatic》 => 《【day06】css
本文地址:https://ask.mykeji.net/xhtml/day06.html
除非注明,文章均为 《简单记录》 原创,欢迎转载!转载请注明本文地址,谢谢。


上一篇: 【pdf】XHTML&CSS
下一篇: 【day05】css

发表评论:

    63.53ms