文章分类 -  HTML

html基本标签的使用
摘要：滤镜 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> img { width: 400px; height: auto; display: block; ma 阅读全文
posted @ 2020-11-21 19:13 bradleydan 阅读(95) 评论(0) 推荐(0)
鼠标位置
摘要：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> canvas { border: 1px solid #f00; } </style> <script type="text/javascript"> function WriteMessage(canvas, message) { 阅读全文
posted @ 2012-11-20 17:50 bradleydan 阅读(95) 评论(0) 推荐(0)
动画-向右移动
摘要：1.动画一<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> canvas { border: 1px solid #f00; } </style> <script type="text/javascript"> window.requestAnimFrame = (function 阅读全文
posted @ 2012-11-20 16:21 bradleydan 阅读(140) 评论(0) 推荐(0)
操作像素B
摘要：灰度化<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> canvas { border:1px solid #ececf1; } </style> <script type="text/javascript"> window.onload = function () { var im 阅读全文
posted @ 2012-11-20 14:35 bradleydan 阅读(123) 评论(0) 推荐(0)
操作像素A
摘要：1.绘制随机像素点<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body><canvas id="canvas1" width="300" height="300" style="background-color:black"></canvas> <inp 阅读全文
posted @ 2012-11-20 11:02 bradleydan 阅读(147) 评论(0) 推荐(0)
鼠标在canvas中绘图
摘要：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> canvas { border:1px solid #f00; } </style> <script type="text/javascript"> var Dan= { width: 5, randomRGB: function ( 阅读全文
posted @ 2012-11-19 14:33 bradleydan 阅读(100) 评论(0) 推荐(0)
客户端存储(sessionStorage)
摘要：页面一<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { if (window.sessionStorage) { var name 阅读全文
posted @ 2012-11-13 11:45 bradleydan 阅读(255) 评论(0) 推荐(0)
绘制圆角
摘要：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> fieldset { width: 216px; border: none; background-color: #ddd; } fieldset legend { background-color: #ddd; ... 阅读全文
posted @ 2012-11-13 10:21 bradleydan 阅读(105) 评论(0) 推荐(0)
canvas绘图
摘要：效果一：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Scripts/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { var canvas = document.getElementById(&quo 阅读全文
posted @ 2012-11-07 19:01 bradleydan 阅读(103) 评论(0) 推荐(0)
创建可访问更新区域
摘要：aria-live=true告知屏幕阅读器朗读已变化区域的全部内容，将其设为false告知屏幕阅读器仅仅朗读已变化的节点内容<!DOCTYPE html><html lang="en-US"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AwesomeCo</title></head><body> <header 阅读全文
posted @ 2012-11-07 18:33 bradleydan 阅读(144) 评论(0) 推荐(0)
标识角色（待完善）
摘要：代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <!--加入banner角色--> <header id="page_header" role="banner"> <h1>AwesomeCo Blog!</h1> <nav role="nav 阅读全文
posted @ 2012-11-07 17:52 bradleydan 阅读(108) 评论(0) 推荐(0)
分栏操作
摘要：实现分栏代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body { line-height: 20px; } p, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; } #newsletter, #header, #footer { width:... 阅读全文
posted @ 2012-11-07 17:19 bradleydan 阅读(161) 评论(0) 推荐(0)
Html中表格相关操作
摘要：第一个HTML5程序代码如下：<html><head> <title>HTML测试</title> <style type="text/css"> table { width: 600px; border-collapse: collapse; } th, td { border: none; } th { background-color: #000; color: #fff; } ... 阅读全文
posted @ 2012-11-07 16:03 bradleydan 阅读(144) 评论(0) 推荐(0)