H5新增的语义化标签CSS3新增盒子阴影及文字阴影

header 头部标签
    就是一个具有语义化的标签
    可以像div一样设置宽与高等属性
    当高度设置为百分比时,文字的垂直居中的解决方法
        通过定位的方法来进行实现,可以设置绝对定位,也可以设置相对定位,绝对定位较为简单,但是是文档脱离标准流,会使后面的处理变得不方便,谨慎使用
        可以通过给父元素添加一个display:table属性,对子元素添加display:table-cell;vertical-align:middle的方法也可以实现文字的居中显示
        可以使用弹性盒子的方式让文字进行居中显示,display:flex;
justify-content:center;
align-items:center;给盒子设置以上属性可以完成文字的垂直居中

section  内容标签

aside  提示标签

article 文章标签

footer 尾部标签

video 视频标签
    这是一个双标签
    src 文件地址
    autoplay 自动播放
        这个属性在最新的Chrome浏览器已经被禁用,防止开发者对用户进行过渡的干扰
    controls 控件
        显示的是浏览器自带的控件样式,这个可以用js后期进行统一设置
    loop 循环播放
    poster 加载等待图片
        在网络不好时,为了提升用户体验用于展示的海报图片

audio 音频标签
    src 文件地址
    autoplay 自动播放
    loop 循环播放
    preload
        出现该属性,当页面在加载的时候加载音频,并预备播放
        当有autoplay时,可以忽略

可以通过加muted属性来触发,但是静音的播放依旧不完美,可以通过插入一个空白的播放片段来触发,依靠iframe标签来实现

这些方法在某些场景下都有一定的问题存在,要根据具体的情况进行选择

文字阴影

‘用于给文字添加阴影,让其在页面中显示更加丰富

语法

text-shadow

必写属性h-shadow与v-shadow分别为水平位置与垂直位置,可以设置负值

blur为模糊距离  用于控制模糊的虚实

color用于控制模糊的颜色,如果不进行设置这个颜色与文本颜色相同

盒子阴影

box-shadow

必写属性与文字阴影相同

与文字不同的是spread是阴影的尺寸,用于控制阴影区域的大小

还有inset设置阴影的位置,默认为outsed,但不能设置为outsed,设置之后浏览器无法识别。
 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值