一、hover

  • :hover 伪类经常用于页面的一些鼠标交互、链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果。鼠标移到某元素上就发生变化,移开就恢复。
  • 1、改变自身效果:

    1
    2
    3
    4
    5
    <style>
    .demo{width: 150px;height: 150px;text-align: center;line-height: 150px;background: #eee;transition: all 0.4s;}
    .demo:hover{width: 200px;height: 200px;background: orangered;}
    </style>
    <div class="demo">示例</div>
  • 2、改变其子元素的效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
    *{margin: 0;padding: 0;list-style: none;}
    .demo{width: 1000px;margin:30px auto;border:1px solid red;}
    .demo ul{display: flex;justify-content: space-between;}
    .demo li{width: 200px;text-align: center;background: orangered;}

    .demo:hover li{background: pink;}
    </style>
    <div class="demo">
    <ul>
    <li>子元素1</li>
    <li>子元素2</li>
    <li>子元素3</li>
    <li>子元素4</li>
    </ul>
    </div>
  • 注:其“子元素”并非一定是子元素,在其下的都可以

  • 3、改变其兄弟元素的效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    .demo{display: flex;justify-content: space-between;width: 850px;margin:20px auto;}
    .demo div{flex:1;text-align: center;border:1px solid red;}

    .box:hover+div{background: pink;}
    </style>
    <div class="demo">
    <div>盒子1</div>
    <div class="box">盒子2</div>
    <div>盒子3</div>
    <div>盒子4</div>
    </div>

注:只对其下一个兄弟元素有效,若放在最后一个加hover则没有效果,即把”class=’box’”放在“盒子4”是无效的。

  • 4、hover的应用
  • ①:导航下拉菜单 查看效果
  • ②:提示信息 查看效果
  • 参考资料
  • 利用CSS hover伪类改变其他元素的总结

    二、video 详情请点击

  • 注意:网页播放mp4格式的视频: 必须使用H264(AVC)视频编解码器AAC音频编解码器

    二、audio 详情请点击


    三、object 详情请点击

  • 定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素运行你自己规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。
  • W3C详情

    四、viewport

  • 什么是viewport?
  • 常见配置:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,use-scalable=no">
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • width=device-width:宽度为设备宽度。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。

  • tips:该配置常用在手机App和响应式网站中。

    五、Flex

  • 什么是弹性盒子?什么是flex布局?请依次看以下阮一峰老师的教程,并且跟着写例子。
  • Flex 布局教程:语法篇
  • Flex 布局教程:实例篇(如果对弹性盒子了解一点请看这个)
  • 1、需要记住的常用语法:
  • 1、设置在父级的容器的6大属性:
  • ①:flex-direction 排列方向
  • ②:flex-wrap 排列方式
  • ③:flex-flow 由flex-direction和flex-wrap属性组成
  • ④:justify-content 项目在主轴上的对齐方式
  • ⑤:align-items 项目在交叉上如何对齐(对齐方式)
  • ⑥:align-content 多根线轴对齐方式(一根不适用)
  • 2、在实际项目中常用到的属性,父级必须设置为弹性盒子:display:flex。
  • 在父级元素上:
  • ①:上下居中:align-items:center;
  • ②:左右居中:justify-content:center;
  • ③:两个子元素靠两边:justify-content:space-between;
  • ④:每个子元素两侧相等:justify-content:space-around;
  • ⑤:左对齐:justify-content:flex-start;(默认)
  • ⑥:右对齐:justify-content:end;
  • ⑦:横向排列:flex-direction:rwo;
  • ⑧:纵向对齐:flex-direction:column;
  • ⑨:排列在一条线上,多出换行:flex-wrap:wrap;
  • ⑩:排列在一条线上,多出不换行:flex-wrap:nowrap;
  • 在子级元素上:
  • ⑪:多个盒子各占不同等分:flex:1、flex:3……
  • ⑫:两边固定,中间自适应:两边给宽度,中间flex:1;
  • ⑬:左边定宽,右边自适应,反之亦然:左flex:1,右宽100%;
  • ⑭:已知宽度定宽:flex:0 0 100px;

  • 3、注意事项:

  • ①:块级元素使用flex:display:flex;行内元素使用flex:display:inline-flex;
  • ②:涉及到兼容性,详情查看1   详情查看2
  • ③:设为flex布局后,子元素的float、clear、vertical-align属性将失效;
  • ④:父元素设置为弹性盒子后,子元素也是可以设置为弹性盒子。