美文网首页
day04(属性+表格)

day04(属性+表格)

作者: 很普通的人 | 来源:发表于2018-07-12 20:05 被阅读0次

    一 背景

    1 背景重复
             background-repeat:no-repeat|repeat-x|repeat-y
    
    2 背景位置简写
           background-position-x:横坐标方向的位置
           background-position-y:纵坐标方向的位置
           简写background-position: x y; 
           传参 top,right,bottom,left,center 
    
    3 背景简写
            background:color     image     repeat     position
                       背景颜色    ~图片    ~图片样式   ~图片的位置
    
    4 背景吸附
    • background-attachment:scroll|fixed;
      scroll背景可以随屏幕滚动相对位置不变
      fixed绝对位置不能变
    5背景大小
            background-size:x y;     x -->width   y -->height
            cover -->会覆盖整个div  特点:只能以大覆小
    

    二. 文本属性

    1.文本对齐
      text-align:left|center|right 
    
    2. 文本修饰
      text-decoration:none|underline|overline|line-through
    
    3.文本缩进
        text-indent 
    
    4.文本转换
         text-transfomr:uppercase|lowercase|capitalize
    
    • lorem+tab 快速写出一段废话

    三 字体属性

    1 字体大小
        font-size:+字体大小
    
    • 最小的字体-->不要小于12px
    2 字体样式
        font-style:normal|italic
    
    3 字体的权重
        font-weight:bold|bolder|lighter
        100-900
    

    四. 表格

    1.跨度
    rowspan="  "  跨行
    colspan=" "   跨列
    
    2.轮廓
    input{
            margin-top: 50px;
            outline: none;不为空选中会有轮廓效果;
        }
    

    3.透明度

        opacity设置元素的透明度
    
    4.表格折叠
    border-collapse: collapse;重复折叠
    

    继承

    • 特殊 父元素不设置height,它会获取 子元素的height 一般都是子继承父

    链接

    1 访问效果
            link -->没有访问的链接
            visited -->已经访问过的链接
            hover -->鼠标移入到链接上的状态
            active -->鼠标点击的那一刻
            tip:同时使用链接的这几种状态,顺序不打乱
    
    2链接各种效果
    • 清除下划线 text-decoration:none
    • 颜色 直接设置

    列表(样式是浏览器给的如果在边缘要加一个外边框)


    未标题-2.jpg
    • 列表样式
      list-style:none;
    • 列表样式类型
      list-style-type:disc点|circle圆|square
    • 列表样式图片
      list-style-image

    相关文章

      网友评论

          本文标题:day04(属性+表格)

          本文链接:https://www.haomeiwen.com/subject/zsgrpftx.html