美文网首页
08 前端学习

08 前端学习

作者: BaiBao丶 | 来源:发表于2018-11-27 15:09 被阅读0次

    背景定位和背景固定

    background-position:top-left

    top-center
    top-right
    center-left
    center-center(如果第二个值没有写,则默认是center)
    center-right
    bottom-left
    bottom-center
    bottom-right
    正代表右,负代表左

    background-attachment:fixed(页面其他部分滚动,背景图像不会移动)

    background-attachment:scroll(默认值,背景图像会随着页面其余部分的滚动而移动)

    简写背景属性

    设置一个背景颜色background-color: #bfa;
    设置一个背景图片background-image: url(img/3.png);
    设置背景不重复background-repeat: no-repeat;
    设置背景图片的位置background-position: center center;
    设置背景图片不随滚动条滚动
    background-attachment: fixed;

    background
    通过该属性可以同时设置所有背景相关的样式
    没有顺序的要求,谁在前睡在后都行
    也没有数量的要求,不写的样式就使用默认值

    表格

    表示表格中的一行:tr
    一个单元格:td
    th表示表头

    td rowspan用来设置纵向的单元格
    td clospsn用来设置合并单元格

    表格样式

    通过border-spacing属性可以设置间距
    border-collapse可以用来设置表格的边框合并
    设置隔行变色:
    tbody > tr:nth-child(even){
    background-color: #bfa;
    }

    长表格

    有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
    在HTML中为我们提供了三个标签:thead 表头
    tbody 表格主体
    tfoot 表格底部
    thead中的内容,永远会显示在表格的头部
    tfoot中的内容,永远都会显示表格的底部
    tbody中的内容,永远都会显示表格的中间
    如果表格中没有写tbody,浏览器会自动在表格中添加tbody
    并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素通过table > tr 无法选中行 需要通过tbody > tr

    相关文章

      网友评论

          本文标题:08 前端学习

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