境-H5
文章平均质量分 87
iteye_17658
这个作者很懒,什么都没留下…
展开
-
CSS3 发光边框
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>CSS3 发光边框</title><link rel="stylesheet" href="base.cs2017-04-02 14:44:29 · 1191 阅读 · 0 评论 -
CSS3 选择器的概括说明
里面包含44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 一、基本选择器序号选择器含义1.*通用元素选择器,匹配任何元素2.E标签选择器,匹配所有使用E标签的元素3..infoclass选择器,匹配所有class属性中包含info的元素4.#footerid选择器,匹配所有id属性等于footer...原创 2016-08-24 08:26:53 · 75 阅读 · 0 评论 -
CSS3 px 和 em 和 rem
px 为单位:px 实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。 em 为单位:em 就是根据基准来缩放字体的大小。em 实质是一个...原创 2016-08-18 15:20:57 · 173 阅读 · 0 评论 -
CSS 选择器参考手册
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。) 选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname...原创 2016-08-10 09:40:23 · 100 阅读 · 0 评论 -
CSS 尺寸单位和颜色单位
尺寸单位描述%百分比in英寸cm厘米mm毫米em1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如,如果某元素以 12pt 显示,那么 2em 是24pt。在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。ex一个 ex 是一个字体的...原创 2016-08-10 09:36:57 · 190 阅读 · 0 评论 -
H5 media 媒体查询
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><!--content属性值 : width:可视区域的宽度,值可为数字或关键词device-width height:同width intial-scale:页原创 2016-08-10 08:22:14 · 1898 阅读 · 0 评论 -
HTML5 清除浮动
1、给父盒子设置高度2、给父盒子设置overflow:hidden;3、给父盒子的最后面加一个div,这个div有个属性:clear:both;4、使用伪元素清除浮动.clearfix { zoom: 1;/*IE/7/6*/ /*兼容IE6下的写法*/}.clearfix:after { content: ""; line-height: 0; width: 0;...2016-08-08 11:23:44 · 346 阅读 · 0 评论 -
CSS3 初始化的思路
/*css 初始化 begin */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0;}fieldset, img, input, button { border: none; paddi...原创 2016-08-08 10:58:55 · 370 阅读 · 0 评论 -
H5 @font-face 和 @keyframes 的使用
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, use2016-07-28 16:27:55 · 404 阅读 · 0 评论 -
H5 打飞机游戏
index.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title&am原创 2016-07-16 15:24:09 · 966 阅读 · 0 评论 -
H5 公共样式2.0版本
压缩前的版本:/*base style*/html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, ...2016-08-24 11:36:59 · 174 阅读 · 0 评论 -
H5 头部标签和meta
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> &2016-09-03 15:18:50 · 107 阅读 · 0 评论 -
H5 标签的对应英文和说明
标签对应英文说明<!-->/注释<!DOCTYPE>document type文档类型<a>anchor超链接<abbr>abbreviation缩写词<acronym>acronym缩写词<address&...原创 2016-09-13 14:47:32 · 1274 阅读 · 0 评论 -
CSS3 3D翻转卡片动画
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>H5 3D翻转卡片动画</title><link rel="stylesheet" href="base2017-04-02 11:48:46 · 754 阅读 · 1 评论 -
H5 会动的皮卡丘动画
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>H5 会动的皮卡丘动画</title></head><body><原创 2017-03-25 17:44:34 · 1678 阅读 · 0 评论 -
H5 仿Bootstrap表单输入框焦点高光
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, us2017-02-25 11:22:50 · 363 阅读 · 0 评论 -
H5 CSS3 @keyframes 文字一闪一闪提示
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>H5 CSS3 @keyframes 文字一闪一闪提示</title></head><body&2017-02-18 17:19:19 · 1959 阅读 · 0 评论 -
H5 粘住底部的办法
Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。base.css/*base style*/html, body, div, span, object, iframe, h1, h2, h3,...2016-12-03 17:49:24 · 486 阅读 · 0 评论 -
H5 IE9及以下版本兼容h5新标签
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。如果是IE9及以下的IE浏览器将创建HTML5标签。<!--[if lt IE9]> <script type="text/javascript">(function(){if(!/*@cc_on!@*/0)ret...2016-11-23 10:16:19 · 576 阅读 · 0 评论 -
H5 CSS hack 和浏览器内核
CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。如下是例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...2016-10-19 10:44:18 · 552 阅读 · 0 评论 -
H5 CSS3 渐变的使用
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)...2016-10-18 18:02:16 · 2970 阅读 · 0 评论 -
H5 输入框的提示信息
输入框的提示信息的例子功能说明:该提示会在输入字段为空时显示,并会在字段获得焦点时消失。<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"></head><body><!--HTML42016-10-07 17:37:36 · 1470 阅读 · 0 评论 -
HTML5 公共样式
/** -- 样式说明 --* 最大优先实现法,全局能实现不用区域,区域能实现不用模板,* 模板能实现不用界面,界面能实现不用标签* 脚本属于特殊标签* g - 全局* t - 区域* m - 模板* ui - 界面* lb - 标签* j - 脚本*//*base style*/html, body, div, span, object, ...2016-06-08 09:25:47 · 476 阅读 · 0 评论 -
HTML5 媒体查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持: style.css/* CSS Document */.test{ width:100%; height:...2016-06-04 14:22:26 · 481 阅读 · 0 评论 -
HTML5 设置手机 meta 属性
手机设置 html5 meta 属性<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="x-ua-compatible" content="ie=7" /><meta name="author" cont2016-03-26 09:58:38 · 361 阅读 · 0 评论 -
HTML5 video标签使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。实例为视频创建简单的播放/暂停...原创 2015-11-14 10:25:19 · 554 阅读 · 0 评论 -
HTML5的新特征
HTML5 是 W3C 与 WHATWG 合作的结果。编者注:W3C 指 World Wide Web Consortium,万维网联盟。 编者注:WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建...原创 2015-11-14 10:11:30 · 99 阅读 · 0 评论 -
HTML5 手机与PC的浏览器
HTML5 手机和PC常用浏览器支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。 如下是百度知道网友对...2015-11-14 10:00:13 · 366 阅读 · 0 评论 -
HTML5 视频标签
<video> 标签定义视频,比如电影片段或其他视频流。<!DOCTYPE HTML><html><body><video width="320" height="240" controls="controls"> <source src="http://one原创 2015-11-14 09:32:31 · 140 阅读 · 0 评论 -
HTML5 手机内容样式
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0&2015-11-13 12:00:48 · 570 阅读 · 0 评论 -
HTML5 怎么让手机网站自适应设备屏幕宽度?
手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0...2015-09-30 16:47:17 · 397 阅读 · 0 评论 -
HTML meta name="viewport"的使用
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点 meta name="viewport" 的语法<met...2015-09-30 16:41:55 · 190 阅读 · 0 评论 -
解决UC手机字体变大的问题
UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加:<meta name="wap-font-scale" content="no"> 例如:<html lang="en"><head><meta charset="UTF-8" />2015-09-29 17:39:36 · 710 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应, 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小 只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验@media screen...2015-09-14 12:00:47 · 154 阅读 · 0 评论 -
HTML5 css图片自动缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><2015-11-16 11:22:45 · 2301 阅读 · 0 评论 -
Html5 新标签解释及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。HT...2015-11-18 17:56:09 · 65 阅读 · 0 评论 -
HTML5 head标签的lang属性
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body&2015-11-20 10:35:33 · 2934 阅读 · 0 评论 -
H5 label 绑定表单元素增强 input 的响应区
<html><body><p>label 绑定表单元素增强input响应区:</p><form><label for="male">Male</label><input type="radio" name="sex"2016-01-23 10:36:14 · 243 阅读 · 0 评论 -
H5 溢出隐藏和缩略图和清除浮动
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>新建H5模板</title><style>/*共用样式*/html, body, body div, sp2016-01-22 16:40:32 · 656 阅读 · 0 评论 -
H5 input 的 type 属性
H5 input 的 type 属性值描述button定义可点击的按钮(大多与 JavaScript 使用来启动脚本)checkbox定义复选框。color定义拾色器。date定义日期字段(带有 calendar 控件)datetime定义日期字段(带有 calendar 和 time 控件)datet...原创 2015-12-26 09:30:46 · 401 阅读 · 0 评论