HTML5
关注
分享
扫一扫
文章平均质量分 54
郭晓湉
代码小民工
展开
-
HTML5经典小游戏之坦克
粉色坦克为敌人的坦克，橘色坦克为我方坦克画布上的点点是子弹，目前还没有实现发子弹消灭敌方坦克并消失明天会更新并且完善坦克的组成是由三个矩形中间矩形上面是一个圆形，圆形上是一个直线根据不同的方向生成不同的子弹：（1）根据方向----生成不同的子弹对象（2）再根据子弹坦克炮筒方向，画出子弹废话不多说 上源码tankGame2.html原创 2013-06-17 19:06:41 · 2825 阅读 · 3 评论 -
让图片垂直居中
在不同的编码模式下，文字的行高计算是不一样的，所以请记住选择与页面相对的编码这个方法是利用display:table-cell在支持该属性的浏览器中，结合vertial-align:middle方法来实现图片垂直居中；在不支持display:table-cell的浏览器（IE）中利用文字结合行高的方法来实现垂直居中；display:table-cell这个属性会导致一些属性失效，比如margin，原创 2014-11-17 08:47:49 · 1816 阅读 · 0 评论 -
在DIV中自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为t原创 2014-11-17 09:05:38 · 2648 阅读 · 2 评论 -
复选框单选框与文字对齐问题的研究与解决
原文地址：http://www.zhangxinxu.com/wordpress/?p=56前言目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截原创 2014-11-18 13:32:33 · 2402 阅读 · 1 评论 -
table明明设置了固定值
IE真的快把我搞死了 0.0可爱的迷人的让人醉了的IE你真棒今天用表格写一个4列的表格 要实现的效果大概是这样的确实用普通浏览器都没有问题 很简单明了的一个表格嘛！用IE8以下的看就成这样子了是不是醉了 让我无从下手 后来知道 原来 要这样写！.wd-table{width:99%; border-width:thin; border-collapse:collapse; color:#50505原创 2014-10-31 15:46:23 · 1728 阅读 · 0 评论 -
控制左边栏div高度自动改变 和右边div一样高
無標題文件 window.onload=function(){ document.getElementById("left").style.height = document.getElementById("right").offsetHeight+"px"; } 我是導航，我很短 我是內容，我很長 我是內容，我很長原创 2015-01-08 16:50:12 · 5050 阅读 · 1 评论 -
CSS精灵写法
无标题文档.div1{ width:420px;}.div1 li { list-style: none; float:left; border:1px solid #EAF3FA; background:#FBFCFF; margin:10px; width:120px; height:40px; line-height:40px; padding-left:10px;}.div span{pa原创 2014-12-08 17:31:54 · 1926 阅读 · 0 评论 -
移动端注意事项
移动端注意事项移动端，需要注意的比较多，但也方便了前端工作，因为不用考虑兼容。一、手机页面的标准头规范字符编码使用utf-8：指定页面手机内存缓存中的存储时间段device-width：通知浏览器使用设备的宽度作为可视区的宽度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例为移动原创 2016-06-30 16:33:15 · 970 阅读 · 0 评论 -
用em替换px
过去的几年里，网页设计师使用em替代px主要是为了文字缩放。因为老板本的Internet Explorer无法缩放像素单位的文字。不过现在浏览器很久以前就支持缩放以像素为单位的文字了。那用em替换px还有什么必要性或优越性呢？有亮点显而易见的理由： 一是那些使用IE6的用户也将能够缩放文字; 二是这样做可以使我们设计师和开发者的生活更简单。em的实际大小是相对于其上下文的字体大小而言的。如果我们原创 2016-07-18 10:20:36 · 1937 阅读 · 0 评论 -
弹性图片
在现代浏览器中要实现图片随着流动布局相应缩放非常的简单，只需要在CSS中作如下声明：img{ max-width:100% }这样就可以使图片自动缩放到与其容器100%匹配。更进一步，可以将同样的样式应用到其他标签上。如：img,object,video,embed{ max-width:100% }这样多媒体元素都可以自动缩放了，使用这种方法有几个需要斟酌的问题。第一，要提前准备一张足够大的图片，原创 2016-07-19 11:25:55 · 2078 阅读 · 1 评论 -
响应式设计中的HTML5
响应式设计的“移动优先”思想使它很适宜采纳最简洁、最有效和最具语义的代码。本次内容：HTML5的哪些部分我们现在就能用？如何编写HTML5网页HTML5的精简之道HTML5中的废弃零件HTML5中的全新语义化元素嵌入媒体可响应的HTML5t iFrame视频让网站支持离线使用如何编写HTML5网页打开一个已有的网页。你可能会看到文件开头有这样几行代码：<!DOCTYPE html原创 2016-07-19 11:41:52 · 2852 阅读 · 2 评论 -
Mac下sublime2 package control快捷安装
1.按住ctrl+~，弹出的控制台中输入如下代码，windows和mac下都一样，装完以后必须重启sublime生效import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp)原创 2017-02-28 14:00:31 · 881 阅读 · 0 评论 -
JS倒计时demo
图片显示倒计时效果 也可以用animation动画效果去写 只要把动画时间修改成3s即可<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>倒计时demo</title> </head> <body> <div id="countDown" class=""> <img src="转载 2017-08-24 10:14:11 · 1025 阅读 · 0 评论 -
iOS系统及微信中不支持audio自动播放问题
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('idName').play(); //微信必须加入Weixin JSAPI的Weixi原创 2017-08-28 15:45:31 · 1170 阅读 · 0 评论 -
网页代码优化
标题 关键词网页描述语义化代码H1~H6标签多用于标题UL标签多用于无序列表OL标签多用于有序列表DL标签用于定义数据列表em、strong表示强调 标签 标签,标题用h1标签 标签与 标签 （只用于文本空格）定义表格用caption 标签应使用alt说明 用于强调 , 用于斜体 与 标签重要内容html代码放在最前面重要内容不要用js 输出尽量少使用原创 2014-11-17 10:31:05 · 1905 阅读 · 0 评论 -
IE 8 浏览器 F12 调试功能无法使用
一直习惯使用IE，有点慢，小毛病又多点，可这么多年，还是没换过。最近发现用IE的F12调试代码的功能不起作用了，改起网页来不是很方便。不知是什么引起的，又不想重装IE...也不想更新到最新的IE,好多网银跟不上IE的更新速度，所以 了，只能将就着用了。下个火狐来试试。要是可以，以后调试就用火狐了。 百度了下，找到了解决方法，下面是原文摘录： “按下F12之后，开发人员工具在桌面上看不到，但是原创 2014-10-29 14:01:01 · 5127 阅读 · 3 评论 -
HTML <h1> 到 <h6> 标签
元素 元素用来描述网页中最上层的标题。由于一些浏览器会默认地把 元素显示为很大的字体，因此会有一些 web 开发者使用 元素代替 元素来显示最上层的标题。这样做不会对读者产生影响，但会使那些试图“理解网页结构”的搜索引擎和其他软件感到迷惑。请确保把 用于最顶层的标题， 和 用于较低的层级。谈到SEO优化的话 H1标签 H1标签是指网页html中对文本标题所进行的着重强调的一种标签，制作原创 2014-09-30 11:27:32 · 3876 阅读 · 0 评论 -
常用的ascii码
箭头 上ascii码：38箭头 下ascii码：39箭头 左ascii码：40箭头 右ascii码：37空格 ascii码：32w 的ascii码：87s 的ascii码：68a 的ascii码：83d 的ascii码：65原创 2013-06-17 19:20:57 · 5072 阅读 · 1 评论 -
HTML5经典小游戏之坦克（二）
上次写到坦克只能发出子弹今天让坦克连续发射子弹 并击中敌人的坦克那么问题来了？如何让子弹飞起来呢？思路: 1.动起来 --- 必然会用到定时器2.在那用？按空格发子弹后3.子弹动起来的思路：按钮的时候，先每隔50毫秒改变子弹的参考点的坐标，再刷新画布，每隔100毫秒再刷新一下画布，显示新位置的子弹4.当子弹碰到画布边界的时候，让子弹停止tankGam原创 2013-06-18 17:54:53 · 2906 阅读 · 12 评论 -
HTML5_Canvas_属性、定义及方法
一、简单图形，整套的属性和方法专门用于绘制矩形：1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色，你可以设置成你喜欢的任意颜色。只要页面打开着，每个绘图上下文都会记录自己的属性，除非你重置过它。2、fillRect(x,y,width,height)绘制一个矩形，并以当前的fillStyle来填充。3、srtokeStyle和fillS原创 2013-08-13 09:05:38 · 1861 阅读 · 0 评论 -
HTML5 基础篇（一）
1，html新增的标签： canvas 标签，画布，通过他可以在html上画出 各种形状，图片..html5代码做了简化：1，文档声明：2，字符编码：3，默认css作为样式表，默认javascrip作为脚本语言，所以定义的时候，不需要声明了 （1）画一个矩形 1，定义一个画布 2，开始绘画：通过javascript画出来的（2）绘制线条原创 2013-06-13 19:36:46 · 2975 阅读 · 4 评论 -
苹果浏览器样式重置submit
大家刚接触写手机页面 或许都会遇到的修复iPhone的safari浏览器上submit按钮圆角bug修改前 修改后：在CSS中加 -webkit-appearance: none; 便可以解决。原创 2014-06-25 16:40:25 · 1494 阅读 · 0 评论 -
仿糯米弹框效果demo
代码如下： Tabs /* Remove margin padding */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } /* Default Font原创 2014-07-21 14:25:52 · 1669 阅读 · 0 评论 -
支付页面DEMO
代码如下： 思瑜科技在线充值 /* Bank Select */ .ui-list-icons li { float:left; margin:0px 10px 25px 0px; width:218px; padding-right:10px; display:inline; } .ui-list-icons li input { vertical-align:m原创 2014-07-21 14:49:51 · 7791 阅读 · 1 评论 -
导航菜单（移动出现子菜单）
代码如下： /* 这以下是重置样式 Remove margin padding */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } /*原创 2014-07-21 15:00:56 · 1922 阅读 · 1 评论 -
选项卡登录
多角色选项卡登录效果图如下：其实是绿色的边框 选中的角色 也会标绿 但是截图出来就成这效果了 可以去我个人博客看demo 地址html代码如下：角色选项卡$(function(){ $('.tabPanel ul li').click(function(){ $(this).addClass('hit').siblings().removeClass('hit');原创 2014-07-21 14:41:58 · 2554 阅读 · 2 评论 -
简单的左侧导航
简单的左侧导航 代码如下：测试<!--作者：小湉网址：http://xtian.me时间：2013-11--> 用户管理 基本资料 邮箱管理 密码管理 编辑管理 发布广告管理 $('.wmenu dl dt').click(function(){ $(this).toggleClass('icotop'); $(原创 2014-07-21 15:08:10 · 2254 阅读 · 1 评论 -
乱写
test /*清楚样式*/html, body, div, span, iframe,h1, h2, h3, h4, h5, h6,p,pre,a,del, em, font, ins, q, s, samp,dl, dt, dd, ol, ul, li, form,label, legend, caption,textarea, tbody{ margin: 0;原创 2014-09-21 13:12:24 · 1404 阅读 · 3 评论 -
经典左右布局demo
test --> .layout .sidebar { float: left; width: 150px; background: #fce3c5; height: 300px; } .layout .primary { margin-left: 170px; background: #fce3c5; height: 300px; }原创 2014-09-30 11:31:34 · 3059 阅读 · 1 评论 -
简单表单框
ul{ width: 200px; } li{ list-style: none; width: 230px; line-height:28px; margin-bottom: 18px; display: inline;原创 2014-09-30 11:24:35 · 1628 阅读 · 0 评论 -
模拟复选框
<!DOCTYPE html><html><head> <title></title> <style type="text/css">label { background-color: #fafafa; border: 1px dashed #cacece; box-shadow: 0 1px 2px silver; padding: 9px;原创 2017-08-30 17:00:36 · 693 阅读 · 0 评论