美文网首页
H5新增标签、样式,手写tab切换 水平垂直居中

H5新增标签、样式,手写tab切换 水平垂直居中

作者: _仗剑走天涯 | 来源:发表于2019-05-30 15:10 被阅读0次

    H5新增标签

    1.header : 头部信息
    2.footer :页脚
    3.nav:导航链接的部分。
    4.main: 主体
    5.section:独立的内容区块
    6.aside:侧边栏导航
    7.article:文章标签
    8.mark:标记,内容显示背景颜色,可以修改
    9.address:地址标签
    10.time: 表示日期或时间,也可以同时表示两者,相当于span
    11.figure+figcaption:表示一段独立的内容,一般表示文档主体流内容中的一个独立单元。figcaption表示 figure 的标题。从属于 figure , 并且, figure 中只能放置一个 figcaption。
    12.video/audio

    CSS3样式

    1.color:rgba(R,G,B,A) :

    以上R、G、B三个参数,正整数值的取值范围为:0 - 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。

    2.text-shadow:文本阴影。

    指定多个阴影:(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)
    text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;

    3.box-shadow:盒子阴影。

    注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

    4.word-break:自动换行。

    normal:使用浏览器默认换行规则。
    keep-all:只能在半角空格或连接字符处换行。
    break-all:允许在单词内换行(对于标点符号来说,允许标点符号位于行首,不过在IE中是不可以的)。

    5.word-wrap:让长单词与URL地址自动换行。

    word-wrap:break-word;

    6.border-radius:圆角。
    7. 引用的一些服务端字体。
    8.box-sizing:border-box 怪异盒模型。
    9.transform :2D转换

    rotate() 旋转函数 取值度数 Transform-origin 旋转的基点

    skew() 倾斜函数 取值度数 (扭曲) skewX() skewY()

    scale() 缩放函数 取值 正数、负数和小数 scaleX()scaleY()

    translate() 位移函数 translateX()translateY()

    10.transform: rotate3d()/ translate3d()/scale3d() 3D转换

    rotate3d(x,y,z,angle):旋转

    translate3d(x,y,z):平移

    scale3d(x,y,z) 缩放

    11.transition:过渡

    transition-property 要运动的样式 (all || [attr] || none)
    transition-duration 运动时间
    transition-delay 延迟时间
    transition-timing-function 运动形式
    ease:(逐渐变慢)默认值
    linear:(匀速)
    ease-in:(加速)
    ease-out:(减速)
    ease-in-out:(先加速后减速)

    手写tab切换

    1.利用JS写
    (参考二阶段考试题)
    2.vue 动态组件写。
    (参考昨天鹏哥讲的动态组件)

    水平垂直居中

    1.position:absolute/fixed;top:50%;left:50%;margin-left:-(width/2);margin-top:-(height/2);

    2.position:absolute/fixed;top:0;left:0;right:0;bottom:0;margin:auto;

    3.display:flex;justify-content:center;align-items:center;如果写的父元素为body,加上html,body{height:100%}

    相关文章

      网友评论

          本文标题:H5新增标签、样式,手写tab切换 水平垂直居中

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