![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5.CSS3
damys
态度决定一切,积累决定层次,思维决定行为,习惯决定命运
展开
-
HTML5---Canvas-模拟9星球运行轨道
规则:星球 英文名 公转周期 光色 暗色水星 Mercury 87.70 天 #A69697 #5C3E40 金星 Venus 224.701天 #C4BBAC #1F1315地球 Earth 365.2422天 #78B1E8 #050C12火星 Mars 686.98 日 #C原创 2016-06-13 09:36:11 · 4843 阅读 · 0 评论 -
CSS3----透明滤镜效果
支持主流浏览器,--Firefox,Chrome,IE7/8/9---IE6目前不支持HTML:/*80%的透明效果:*/ <img alt="" src="style/newimg/test-330-h215.png" onmouseover=" this.style.opacity=1;this.filt原创 2013-05-03 16:11:36 · 1473 阅读 · 0 评论 -
CSS3----画圆,渐变,旋转
效果图:使用border-radius,你可以画出各种漂亮的圆形图案CSS.circle { border-radius: 50%; display: inline-block; margin-right: 20px;}#circle1 { width: 200px; height: 200px; backgrou...原创 2014-05-08 09:48:40 · 6036 阅读 · 0 评论 -
CSS3----过渡transition
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性Safari 支持替代的 -webkit-transition 注释:Internet Explorer 9 以及更早版本的浏览器不支持原创 2014-08-29 10:59:55 · 803 阅读 · 0 评论 -
CSS3----转换(旋转)transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜原创 2014-08-29 10:34:16 · 4789 阅读 · 0 评论 -
CSS3----Columns:比table更好用的分列式布局方法
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:column-count: 列数目column-gap: 各列之间间隙宽度column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算column-rule-width:列之间分割线宽度column-rule-style:列之间分割线风格column-rule-color原创 2014-05-04 09:29:57 · 12463 阅读 · 0 评论 -
CSS3----实现光芒旋转头像动画
CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { from {-moz-transform: rotate(0deg);} to {-原创 2014-05-08 11:54:55 · 2735 阅读 · 2 评论 -
HTML5----Canvas VS SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。原创 2014-09-05 16:04:59 · 890 阅读 · 0 评论 -
HTML5----SVG
什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:SVG 图像可通过文原创 2014-09-05 15:58:57 · 964 阅读 · 0 评论 -
HTML5----Canvas画布
方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent() getContext() toDataURL()原创 2014-09-05 15:03:07 · 1505 阅读 · 0 评论 -
CSS3----动画animation
属性:属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性,除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-dura原创 2014-08-29 09:46:53 · 6198 阅读 · 0 评论 -
HTML5----字体rem,px,em,设置
PX为单位在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体原创 2014-05-26 10:18:06 · 22768 阅读 · 0 评论 -
CSS3----图片倒影效果
CSS:Html:原创 2014-05-15 11:11:35 · 7029 阅读 · 0 评论 -
HTML5----响应式(自适应)网页设计
第一步:原创 2014-04-23 14:55:15 · 158703 阅读 · 11 评论 -
纯CSS实现的3D倒计时效果
纯CSS实现的3D倒计时效果,从0 到 9 ~效果图:css 下载:http://pan.baidu.com/s/1c0Db7Nihtml:结构图:代码:原创 2015-09-22 16:05:00 · 4957 阅读 · 0 评论 -
HTML5---canvas 指针时钟-clock
anvas 指针时钟-clock原创 2015-08-20 10:33:01 · 4717 阅读 · 0 评论 -
HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
HTML5,Canvas-画线,空心图,矩形,文字,三角形,旋转图片原创 2015-08-20 09:43:04 · 9077 阅读 · 0 评论 -
HTML5----video ,audio常规操作
HTML5--video ,audio标签的常规操作原创 2015-08-20 09:33:19 · 731 阅读 · 0 评论 -
HTML5---Canvas-模拟地球-星球运行轨道
Canvas-模拟地球-星球运行轨道原创 2015-08-20 11:10:03 · 7989 阅读 · 2 评论 -
HTML5----移动head,meta标签属
1、声明文档使用的字符编码meta charset='utf-8'>12、声明文档的兼容模式meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高模式显示内容meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />指示IE使用 指令确原创 2015-05-29 22:46:29 · 1400 阅读 · 0 评论 -
HTML----常用HEAD头标
DOCTYPEDOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。DTD(Document Type Definition) 声明以 开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。翻译 2015-01-20 20:46:58 · 1603 阅读 · 0 评论 -
CSS3----渐变主流浏览器支持
.about-box:hover{background:#00a5e2;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 165, 225)), to(rgb(2, 149, 203)));background-image: -webkit-linear-gradient(top,原创 2013-08-26 10:25:17 · 1665 阅读 · 0 评论 -
HTML5----拖放drag,drop
拖放drag,dropp{ color:#666; font-size:14px; line-height:20px;}#div1{ width:230px; height:80px; padding:10px; border:1px solid #666;}<!--1.设置元素为可拖放:draggable="true"2.拖动什么--ondragstart(调原创 2014-09-05 11:27:23 · 980 阅读 · 0 评论 -
HTML5----移动鼠标:青蛙,蝴蝶,草丛,池塘滑动-jparallax
效果:原创 2014-08-01 10:05:03 · 2682 阅读 · 0 评论 -
HTML5----scoped属性
scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效,具体说,就是存放这段style样式的元素的子元素生效原创 2014-04-22 09:38:44 · 1939 阅读 · 0 评论 -
HTML5----placeholder属性
placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。原创 2014-04-21 10:18:00 · 1307 阅读 · 0 评论 -
HTML5----download属性
download属性能让我们指定浏览器下载时采用新的文件名称,也就是在客户端重命名下载文件。而不是链接上原始的文件名称。实际上download属性更合适的名称是downloadName。原创 2014-04-21 08:49:40 · 1428 阅读 · 0 评论 -
HTML5----hidden属性
当一个网页元素有了hidden属性后,它的表现跟CSS的display: none;作用非常相似,元素将会消失,而且不占用任何页面空间。写法很简单:原创 2014-04-22 09:15:34 · 3668 阅读 · 0 评论 -
HTML5----autofocus属性
BUTTON原创 2014-04-22 09:49:13 · 1861 阅读 · 0 评论 -
雅虎WEB前端网站优化—34条军规
雅虎WEB前端网站优化—34条军规1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下 写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background翻译 2013-09-10 11:59:14 · 1125 阅读 · 0 评论 -
CSS----实现div两列(左/右)等高
*{ margin:0; padding:0;}.con{ overflow:hidden; width:980px;}.con:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}.con .l,.con.r{margin-bottom:-99原创 2013-07-03 16:37:46 · 3902 阅读 · 0 评论 -
HTML---- 渐变颜色, P强制不换行、自动换行、强制换行
IE 浏览器filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#3568CC’, gradientType=’0′)//支持IE8/9/...startColorStr 开始颜色endColorStr 结束颜色gradientType 渐变的方式:0原创 2013-03-04 16:30:28 · 75834 阅读 · 1 评论 -
HTML5----22个技巧
1. 新的文档类型(Doctype)"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">上面这个既麻烦又难记的XHTML文档类型你还在使用吗? 如果还是这样的话,现在该切换到新的HTML5文档类型了。现在只要这么简单的15个字符就可以了。(注意:你的doctype的申明需要出现在你html文件的第一行。)2翻译 2013-03-15 15:45:16 · 2158 阅读 · 0 评论 -
HTML----CSS display (block none inline)属性淡说
display属性none 此元素不会被显示。block 此元素将显示为块级元素,此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block 行内块元素。(CSS2.1 新增的值)list翻译 2013-03-14 11:03:34 · 2693 阅读 · 0 评论 -
Html CSS一-些常用命名
尽量不缩写,除非一看就明白的单词.主要的 master.css 模块 module.css 主题 themes.css 专栏 columns.css 基本共用 base.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css翻译 2013-03-13 14:47:45 · 881 阅读 · 0 评论 -
HTML,CSS----中文字体之英文名称
宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋翻译 2013-08-26 10:03:56 · 1509 阅读 · 0 评论 -
HTML5----input-datalist输入框自动提示功能
效果图:字母 :原创 2014-06-18 08:59:15 · 6842 阅读 · 0 评论 -
HTML5----CSS输入框背景,颜色,内容提示效果-placeholder属性
CSS:input{ height:24px; line-height:24px; padding:2px 10px;}/*Webkit browsers*/::-webkit-input-placeholder{ color:#777;}/*Mozilla Firefox 4 to 18*/:-moz-placeholder{ color:#777; opacity:1;}/*Mozi原创 2014-06-11 10:51:56 · 11586 阅读 · 0 评论 -
HTML5----CSS3图片滤镜(filter)特效
暂不支浏览器:FF,IE...希望后原创 2014-06-16 09:51:06 · 6046 阅读 · 1 评论 -
HTML5----kinetic,CSS3(Canvas)--小丑动画
显示效果图:hover后效果图:原创 2014-05-23 11:32:53 · 4383 阅读 · 0 评论