html5+css控件美化

[不指定 2019/10/28 19:12 | by 吕进 | Via 本站原创 ]
前段时间,为个人博客APP版专门折腾的控件样式,可通用
留存备份,需要的可以下载研究
 下载文件 (已下载 189 次)
Tags: , ,

H5中video和audio标签的使用

[不指定 2019/07/29 11:36 | by 吕进 | Via 本站原创 ]
video主要是播放MP4视频文件,而audio以播放MP4、MP3等音频文件为主。
controls 属性设置或返回浏览器应当显示标准的视频控件。
该属性反映了video标签的controls 属性。
当使用该属性时,它指定了显示视频控件。
视频控件包含:
1、播放
2、暂停
3、进度条
4、音量
5、全屏切换(供视频)
6、字幕(当可用时)
7、轨道(当可用时)
注意: video元素是 HTML5 新增的。
文章参考:runoob.com
直接上代码:
代码一:在head引用html5media.js文件:
<script src="app/html5media.js"></script>

代码二:video标签
<video width="320" height="240" controls>
<source src="/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
</video>

代码三:audio标签
<audio src="../wpnb01.mp3" controls="controls" controlsList="nodownload" οncοntextmenu="return false">
</audio>

如果不允许客户端执行下载,请加上nodownload:
引用
controlsList="nodownload" οncοntextmenu="return false"

Tags: ,

HTML响应式布局

[不指定 2019/07/29 10:06 | by 吕进 | Via CSDN ]
出现背景:比如,篇幅很长的文章在手机端预览时,会出现很长的横向滚动条。
基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,设置不同CSS样式,设置该设备支持的页面宽(高)。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式布局</title>    
    <!--
      当设备最大宽度大于480px时,按不同的设备宽度使用不同的样式
      即:设备宽度在480px以内时,使用移动端样式,mobile样式
    -->
    <link rel="stylesheet" href="css/pc.css" media="only screen and (min-width:1200px)"/>
    <link rel="stylesheet" href="css/pc_zd.css" media="only screen and (min-width:980px) and (max-width:1199px)"/>
    <link rel="stylesheet" href="css/pad.css" media="only screen and (min-width:768px) and (max-width:979px)"/>
    <link rel="stylesheet" href="css/shouji.css" media="only screen and (min-width:480px) and (max-width:767px)"/>
    <link rel="stylesheet" href="css/mobile.css" media="only screen and (max-width:479px)"/>
</head>

<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
    <div>
      <p>
      响应式布局
      </p>
    </div>
  <div></div><div></div><div></div></body>
</html>

在设置时,需要注意设置顺序,如
@media screen and (min-width:1200px)
@media screen and (min-width:980px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
@media screen and (max-width:479px)
否则,后面的会覆盖前面的样式。
Tags:
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]