导航栏菜单的设计与实现
<html>
<head>
<meta charset="utf-8">
<title>导航栏菜单的设计与实现</title>
<style>
ul {
list-style: none;/*用于去掉列表标记实心点*/
margin: 0;
padding: 0;
}
li {
float: left;
}
a:link, a:visited {
display: block;/*设置为块级元素*/
width: 100px;/*设置宽度为100像素*/
font-weight: bold;/*设置字体为加粗*/
color: white;/*设置字体为白色*/
background-color:#5AF;/*设置背景颜色为蓝色*/
text-align: center;/*设置文本居中显示*/
padding: 5px;/*设置各边内边距为5像素*/
text-decoration: none;/*去掉文本下划线*/
}
a:hover, a:active {
background-color:#006FDD;
}
</style>
</head>
<body>
<h3>导航栏菜单的设计与实现</h3>
<hr />
<!--导航栏-->
<nav>
<ul>
<li><a href="#">头条</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">热点</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">科技</a></li>
</ul>
</nav>
</body>
</html>
商务风格表格的设计与实现
<html>
<head>
<meta charset="utf-8">
<title>商务风格表格的设计与实现</title>
<style>
/*设置表格总体样式*/
#recruit {
width: 100%;
border-collapse: collapse;
text-align: left;
}
/*设置单元格样式*/
#recruit td, #recruit th {
/* font-size: 1em;*/
border: 1px solid orange;
padding: 7px;
}
/*设置标题单元格样式*/
#recruit th {
background-color: orange;
color: #ffffff;
}
/*设置单元行样式*/
#recruit tr.orange{
background-color: #FFEDDB
}
</style>
</head>
<body>
<h3>商务风格表格的设计与实现</h3>
<hr />
<table id="recruit" border="1">
<caption>招聘信息表</caption>
<tr><th>地点</th><th>招聘职位</th><th>公司</th></tr>
<tr><td>全国</td><td>产品培训生</td><td>腾讯</td></tr>
<tr class="orange"><td>全国</td><td>前端开发工程师</td><td>阿里巴巴</td></tr>
<tr><td>上海</td><td>交互设计师</td><td>网易游戏</td></tr>
<tr class="orange"><td>北京</td><td>视觉设计师</td><td>360</td></tr>
<tr><td>深圳</td><td>数据分析师</td><td>IBM</td></tr>
<tr class="orange"><td>杭州</td><td>数据研发工程师</td><td>微软</td></tr>
</table>
</body>
</html>
简单电子时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单电子时钟的设计与实现</title>
<link rel="stylesheet" href="css/clock.css">
</head>
<body onload="getCurrentTime()">
<!--标题-->
<h3>简单电子时钟的设计与实现</h3>
<!--水平线-->
<hr />
<!--电子时钟区域-->
<div id="clock">
<div class="box1" id="h"></div>
<div class="box2">:</div>
<div class="box1" id="m"></div>
<div class="box2">:</div>
<div class="box1" id="s"></div>
</div>
<script>
//获取显示小时的区域框对象
var hour = document.getElementById("h");
//获取显示分钟的区域框对象
var minute = document.getElementById("m");
//获取显示秒的区域框对象
var second = document.getElementById("s");
//获取当前时间
function getCurrentTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if(h<10) h = "0"+h; //以确保0-9时也显示成两位数
if(m<10) m = "0"+m; //以确保0-9分钟也显示成两位数
if(s<10) s = "0"+s; //以确保0-9秒也显示成两位数
hour.innerHTML= h;
minute.innerHTML = m;
second.innerHTML = s;
}
//每秒更新一次时间
setInterval("getCurrentTime()", 1000);
</script>
</body>
</html>
HTML5拖放API的图片相框效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5拖放API之图片相框效果</title>
<link rel="stylesheet" href="css/photoframe.css">
</head>
<body>
<h3>HTML5拖放API之图片相框效果</h3>
<hr />
<!--可放置文件区-->
<div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)">
请将图片拖放至此处
</div>
<br />
<!--带有相框的图片展示区-->
<div id="output"></div>
<script>
//ondragover事件回调函数
function allowDrop(ev) {
//解禁当前元素为可放置被拖拽元素的区域
ev.preventDefault();
}
//ondrop事件回调函数
function fileDrop(e) {
//解禁当前元素为可放置被拖拽元素的区域
e.preventDefault();
//获取图片展示区域对象output
var output = document.getElementById("output");
//将图片展示区域的内容清空
output.innerHTML = "";
//获取从本地拖拽放置的文件对象数组files
var files = e.dataTransfer.files;
//使用for循环遍历同时被拖拽并放置到指定区域的所有文件
for (var i = 0,f; f = files[i]; i++) {
//(1)创建带有相框的图片
//获取当前图片文件的URL来源
var imgURL = window.webkitURL.createObjectURL(f);
//创建图片对象img
var img = document.createElement("img");
//设置图片对象img的src属性为当前图片文件URL地址
img.setAttribute("src", imgURL);
//设置图片对象img的宽度为330像素
img.setAttribute("width", "330");
//设置图片对象img的高度为270像素
img.setAttribute("height", "270");
//设置相框对象photo
var photo = document.createElement("div");
//为相框对象添加class="photoframe",以加载相框背景图片
photo.setAttribute("class", "photoframe");
//将图片添加相框对象中
photo.appendChild(img);
//创建图片对象img2
var img2 = document.createElement("img");
//设置图片对象img2的class="block"
img2.setAttribute("class", "block");
//将图片2也添加到相框元素中
photo.appendChild(img2);
//添加相框和相片效果
output.appendChild(photo);
//(2)创建图片下方的状态信息栏
//使用div元素创建状态信息栏status
var status = document.createElement("div");
//获取当前文件的最新修改日期
var lastModified = f.lastModifiedDate;
//修改当前文件的最新修改日期的描述格式
var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
//设置图片下方状态信息栏描述内容
status.innerHTML = '<strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ')<br>大小：' + f.size + '字节<br>修改时间：' + lastModifiedStr;
//添加文件描述
output.appendChild(status);
}
}
</script>
</body>
</html>
用户注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5用户注册页面示例</title>
<link rel="stylesheet" href="css/reg.css">
</head>
<body>
<div id="container">
<!--页面标题-->
<h1>用户注册页面</h1>
<!--水平线-->
<hr />
<!--表单-->
<form method="post" action="URL" autocomplete="on">
<label>用户名：
<input type="text" placeholder="请输入用户名" name="username" required />
</label>
<br />
<label>密 码：
<input type="password" placeholder="请输入密码" name="pwd" required />
</label>
<br />
<label>确 认：
<input type="password" placeholder="请再次输入密码" name="pwd" required />
</label>
<br />
<label>姓 名：
<input type="text" placeholder="请输入真实姓名" name="name" required />
</label>
<br />
<label>邮 箱：
<input type="email" placeholder="请输入电子邮箱" name="email" required />
</label>
<br />
<button type="submit">
提交注册
</button>
</form>
</div>
</body>
</html>
问卷调查页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5问卷调查页面示例</title>
<link rel="stylesheet" href="css/questionnaire.css">
<script src="js/questionnaire.js"></script>
</head>
<body>
<div id="questionnaire">
<!--页面标题-->
<h1>手机移动支付业务问卷调查</h1>
<!--水平线-->
<hr />
<!--表单-->
<form method="post" action="URL" onsubmit="return check()">
<ol>
<li>您的教育程度是？</li>
<label>
<input type="radio" name="q1" value="q1_1" required />
高中 </label>
<label>
<input type="radio" name="q1" value="q1_2" required />
大专 </label>
<label>
<input type="radio" name="q1" value="q1_3" required />
本科 </label>
<label>
<input type="radio" name="q1" value="q1_4" required />
硕士研究生 </label>
<label>
<input type="radio" name="q1" value="q1_5" required />
博士及以上 </label>
<li>您的年龄段是？</li>
<label>
<input type="radio" name="q2" value="q2_1" required />
18岁以下 </label>
<label>
<input type="radio" name="q2" value="q2_2" required />
18-25岁 </label>
<label>
<input type="radio" name="q2" value="q2_3" required />
26-30岁 </label>
<label>
<input type="radio" name="q2" value="q2_4" required />
31-35岁 </label>
<label>
<input type="radio" name="q2" value="q2_5" required />
35岁以上 </label>
<li>您是否使用过手机移动支付业务？</li>
<label>
<input type="radio" name="q3" value="q3_1" required />
从未听说过 </label>
<label>
<input type="radio" name="q3" value="q3_2" required />
听说过，但未使用过 </label>
<label>
<input type="radio" name="q3" value="q3_3" required />
偶尔使用 </label>
<label>
<input type="radio" name="q3" value="q3_4" required />
经常使用 </label>
<li>您了解以下哪些手机移动支付业务？（可多选）</li>
<label>
<input type="checkbox" name="q4" value="q4_1" />
支付宝 </label>
<label>
<input type="checkbox" name="q4" value="q4_2" />
微信支付 </label>
<label>
<input type="checkbox" name="q4" value="q4_3" />
电信翼支付 </label>
<label>
<input type="checkbox" name="q4" value="q4_4" />
Apple Pay </label>
<input type="checkbox" name="q4" value="q4_5" />
以上均不了解
</label>
<li>您看重以下哪些支付功能？（可多选）</li>
<label>
<input type="checkbox" name="q5" value="q5_1" />
话费/游戏币充值 </label>
<br />
<label>
<input type="checkbox" name="q5" value="q5_2" />
刷手机加油 </label>
<br />
<label>
<input type="checkbox" name="q5" value="q5_3" />
刷手机购物 </label>
<br />
<label>
<input type="checkbox" name="q5" value="q5_4" />
刷手机乘坐公交/轻轨/地铁 </label>
<br />
<input type="checkbox" name="q5" value="q5_5" />
水电煤/有线电视/宽带远程缴费 </label>
<br />
<label>
<input type="checkbox" name="q5" value="q5_6" />
享受联盟商户的优惠折扣 </label>
<br />
<label>
<input type="checkbox" name="q5" value="q5_7" />
以上均不感兴趣 </label>
</ol>
<label>您的姓名
<input type="text" name="name" required />
</label>
<label>您的职业
<input type="text" name="position" required />
</label>
<label>联系电话
<input type="tel" name="tel" required />
</label>
<div id="btn">
<button type="submit">提交问卷</button>
</div>
</form>
</div>
</body>
</html>
扫一扫
03-29
12-15
1430
1430
06-20
03-21
4605
4605
09-14
09-14
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
