#recycle {
width: 200px;
height: 50px;
border: 1px dashed;
text-align: center;
line-height: 50px;
}
.photoframe {
background: url(../image/photoframe.jpg) no-repeat;
width: 500px;
height: 438px;
text-align: center;
float: left;
}
img {
vertical-align: middle;
}
.block {
width: 0px;
height: 100%;
}
#output {
float: left;
margin: 10px;
text-align: center;
width: 500px;
}
HTML代码：
<!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" οndragοver="allowDrop(event)" οndrοp="fileDrop(event)">
请将图片拖放至此处
</div>
<br />
<!--带有相框的图片展示区-->
<div id="output"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function fileDrop(e) {
e.preventDefault();
var output = document.getElementById("output");
output.innerHTML = "";
var files = e.dataTransfer.files;
for (var i = 0,f; f = files[i]; i++) {
var imgURL = window.webkitURL.createObjectURL(f);
var img = document.createElement("img");
img.setAttribute("src", imgURL);
img.setAttribute("width", "330");
img.setAttribute("height", "270");
var photo = document.createElement("div");
photo.setAttribute("class", "photoframe");
photo.appendChild(img);
var img2 = document.createElement("img");
img2.setAttribute("class", "block");
photo.appendChild(img2);
output.appendChild(photo);
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>
body {
background-color:#CCCCCC;
}
#questionnaire{
background-color:white;
padding:15px;
margin: auto;
width:900px;
text-align:center;
font-family:"微软雅黑";
box-shadow: 10px 10px 15px black;
}
h1{
color:orange;
}
hr{
width:80%;
border:orange 1px solid;
margin-bottom:15px;
}
form{
text-align:left;
width:80%;
margin:auto;
}
li{
margin:10px 0;
}
input{
margin:10px;
}
input[type="text"],input[type="tel"]{
width:130px;
height:20px;
font-size:16px;
font-family:"微软雅黑";
border:0px;
border-bottom:1px solid;
outline:none;
}
#btn{
text-align:center;
}
button{
width:120px;
height:40px;
background-color:orange;
border:0px;
color: white;
margin:10px;
font-size:18px;
font-family:"微软雅黑";
font-weight:bold;
}
button:hover{
background-color:#FF6835;
}
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" οnsubmit="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>
body {
background-color:#CCCCCC;
}
#container{
background-color:white;
color:#2289F0;
padding:15px;
margin: 100px auto 0px;
width:600px;
text-align:center;
font-family:"微软雅黑 Light";
box-shadow: 10px 10px 15px black;
}
hr{
width:80%;
border:#2289F0 1px solid;
margin-bottom:15px;
}
input{
width:180px;
height:20px;
margin:5px;
font-size:16px;
font-family:"微软雅黑 Light";
}
button{
width:120px;
height:40px;
background-color:#2289F0;
border:0px;
color: white;
margin:10px;
font-size:18px;
font-family:"微软雅黑 Light";
font-weight:bold;
}
button:hover{
background-color:#0068D0;
}
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>
#clock {
width: 800px;
font-size: 80px;
font-weight: bold;
color: red;
text-align: center;
margin: 20px;
}
.box1 {
margin-right: 10px;
width: 100px;
height: 100px;
line-height: 100px;
float: left;
border: gray 1px solid;
}
.box2 {
width: 30px;
float: left;
margin-right: 10px;
}
扫一扫
3028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
