Html5

五,H5拖拽事件(知識點主要來源於HTML5拖放)其實打算出實戰代碼的,想想好像可以插多一個拖曳掃盲貼,在PC上傳文件也經常能用到的,先來看看有關知識點。在HTML5中,拖放是标准的一部分,任何元素都能够拖放。先看看兼容性如何移動端全綫飄紅我可以理解的,畢竟不是主要應用交互,首先,为了使元素可拖动,把 ...

漫步未来

漫步未来|HTML5拖拽小案例

发布于 4 天前 浏览:810 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>拖拽案例</title><style>.one{width:400px;height:400px;border:solid1px#000;}.onediv{width:98px;height:98px;border:solid1px#000;border-radius:50%;float:left;text ...

漫步未来

漫步未来|HTML5表单验证

发布于 5 天前 浏览:254 类型:原创 - 随笔 分类:HTML/CSS 举报

开始学习HTML5了,又有好多新单词要记!!!html代码效果预览<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>课后小案例</title><style>form{width:100%;max-width:600px;margin:20pxauto;font-family:"微软雅黑";font-size:18px;}input,meter,progress ...

fanbuxie

fanbuxie|手机页面左侧导航不动 右侧内容滚动

发布于 6 天前 浏览:173 类型:原创 - 教程 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>demo</title><style>*{padding:0;margin:0;}.box{}.left{width:30%;background:#efefef;height:90%;overflow:auto;position:fixed;top:0; ...

jQueryHTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发。该插件效果是基于tab切换和上拉的,如果只想一个页面具有上拉加载的效果,可以对其进行修改。这是将代码进行了封装,其他可参考:js实现无限加载分页(适合移动端)页面代码:html代码效果预览<!DOC ...

梦柯

梦柯|推荐一个纯CSS3导航特效

发布于 2017-02-22 21:39:30 浏览:286 类型:转载 - 随笔 分类:HTML/CSS 举报

在站长素材网网页模板中无意发现的感觉不错就去研究了一下。因为某些原因需要大家自己排下版,关键css代码都写上了。有css3基础就能看懂!!!好东西都是需要分享的!!!html代码效果预览<ulclass="header-navpt35pr30"><liclass="nav-itme"><aclass="linknav- ...

nyy3723

nyy3723|mui框架之 prompt对话框

发布于 2017-02-22 17:37:57 浏览:99 类型:原创 - 随笔 分类:HTML/CSS 举报

这两天用到mui插件,很多部分与bootstrap类似,做手机页面感觉非常好用,就今天下午用到的prompt弹出框做个小小的总结。首先,我的应用场景是,个人信息页面的修改,比如改用户的昵称、年龄、地址等等。用hbuilder编辑器建一个mui空项目的文件夹,默认就引入了需要用到的css和js文件。代码上传几次一直失败,就直接写出 ...

missFanny

missFanny|canvas绘制环形进度条,支持多次调用

发布于 2017-02-22 15:48:47 浏览:1113 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><metaname="format-detection"content="telephone=no,email=no,date=no,address=no"><title>c ...

fanbuxie

fanbuxie|HTML5 DOM拓展

发布于 2017-02-21 12:10:36 浏览:68 类型:原创 - 教程 分类:JavaScript 举报

javascript代码/*querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null*/varoDivs=document.querySelector("#div1");//取得ID为“div1”的元素varoBodys=document.querySelector("body");//取得body元素var ...

mr_张

mr_张|菜鸟笔记:HTML5 input验证提示修改

发布于 2017-02-21 11:30:09 浏览:107 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<sectionclass="page"><form><ul><li><label>1:</label><inputtype=""name=""requiredoninvalid="setCustomValidity('不能为空!');"><br></li><li><label>2:</label><inputtype=""name=""required="required"><br></li><li><label>3:</label><inputtype= ...

曾阿牛

曾阿牛|Canvas 绘制粒子动画背景

发布于 2017-02-14 17:17:06 浏览:353 类型:原创 - 随笔 分类:HTML/CSS 举报

《》html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>*{margin:0px;padding:0px;}body{background:#000;}canvas{position:absolute;width:100%;height:10 ...

bingxuelover

bingxuelover|HTML5新增标签

发布于 2017-02-14 12:10:39 浏览:183 类型:原创 - 随笔 分类:HTML/CSS 举报

转自2011-12-20的百度空间<article>定义article。<aside>定义页面内容之外的内容。<section>定义section。<footer>定义section或page的页脚。<header>&n ...

differ_wy

differ_wy|【CSS】随时记录css注意点(不定时更新)

发布于 2017-02-12 13:40:01 浏览:185 类型:原创 - 随笔 分类:HTML/CSS 举报

2017-2-1213:31宽度的百分比值会计算父元素margin部分?仔细看效果:header部分结构:header结构<divclass="public-header-nav"><aclass="header-checkin"href="javascript:;"></a><ulclass="header-tab-group"><liclass="header-tab-itemon"><ahref="javascript:;">书城</a></li> ...

marie0119

marie0119|canvas钟表效果

发布于 2017-02-11 23:20:07 浏览:218 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>canvas画钟表</title><style>body{background:#fc0;}#canvas1{background:#fff;}</style></head><body><canvasid="canvas1"width="400"height="400"></canvas><script>varoC=d ...

1732558400

1732558400|超简单图片瀑布流

发布于 2017-02-08 18:54:30 浏览:230 类型:原创 - 随笔 分类:HTML/CSS 举报

学习中,请大家多多指教!html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>图片瀑布流</title><styletype="text/css">*{margin:0;padding:0;}h1{width:100%;height:50px;text-align:center;line-height:50px;background-color:#fff;b ...

超简单图片瀑布流
eday

eday|八、html5新增标签

发布于 2017-02-07 13:46:49 浏览:100 类型:原创 - 随笔 分类:HTML/CSS 举报

常见的html5新增语义化标签header页面头部footer页脚article定义页面独立的内容区域一般为文章aside定义页面的侧边栏内容details文档某个部分的细节summary是details中的标题time定义日期 ...

Scarlett陈

Scarlett陈|drawImage---强大的绘图方法

发布于 2017-01-24 16:13:35 浏览:269 类型:原创 - 随笔 分类:HTML/CSS 举报

1.context.drawImage(img,x0,y0);//在这个画布上面(x0,y0)坐标处画上img,img可为图像,画布,视频2.context.drawImage(img,x0,y0,width,height);//在这个画布上面(x0,y0)处画上宽为width,高为height的img3.context.drawImage(img,sx0,sy0,swidth,sheight,x0,y0,width,height);//先把原来的图片以坐标(sx0,sy0)开始截出 ...

扶桑木下

扶桑木下|原创:微信小程序之MaterialDesign--input组件

发布于 2017-01-24 16:04:07 浏览:323 类型:原创 - 随笔 分类:手机移动 举报

作者:jeffer来自:原文地址主要通过input输入事件配合css的transform动态改变实现这种效果。实际调试过程中,input组件bindinput事件触发后回调的detail对象,在模拟器中含有cursor属性,在真机中(测过安卓,ios没测过)却没有该属性,最后选择detail对象中的value属性的值的长度来同步输入的位数。bindfocus事件最 ...

study_web

study_web|canva绘制时钟 原文件地址 http://www.imooc.com/video/11260

发布于 2017-01-24 10:09:53 浏览:197 类型:原创 - 随笔 分类:HTML/CSS 举报

这是运用HTML5中的canvas与Javascript绘制的时钟,通过实例更好的把HTML5中的canvas中的API联系起来。html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>这是一个canvas动画</title><stylemedia="screen">div{text-align:center;margin-top:100 ...

誓言成晖

誓言成晖|HTML标签-表单,实体字符(第五天打卡)

发布于 2017-01-22 16:44:53 浏览:223 类型:原创 - 随笔 分类:HTML/CSS 举报

表格标签html代码效果预览<tableborder="1"width="800"height="800"><caption>表格外的标题</caption><thead><tr><thbgcolor="#999999">h1</th><th>h2</th><th>h3</th><th>h4</th></tr></thead><!--表格头部--><tbody> ...