1：效果如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>work1</title>
</head>
<body>
<table width = "300" border = "1"bgcolor="#CCCCCC">
<tr>
<td align = "center" valign = "middle"colspan = "2">用户注册</td>
</tr>
<tr>
<td align = "right">用户名</td>
<td algin = "left"><input type = "text"></td>
</tr>
<tr>
<td align = "right">密码</td>
<td algin = "left"><input type = "text"></td>
</tr>
<tr>
<td align = "right">性别</td>
<td algin = "left"><input type="radio" name="sex" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" id="female"/>
<label for="female">女</label></td>
</tr>
<tr>
<td align = "right">爱好</td>
<td algin = "left"><input type="checkbox" name="fav" />写作
<input type="checkbox" name="fav" />听音乐
<input type="checkbox" name="fav" />体育
</tr>
<tr>
<td align = "right">省份</td>
<td align = "left" valign = "middle"><input type="hidden" /><br />
<select name="下拉列表" >
<option>陕西省</option>
<option >四川省</option>
<option >湖北省</option>
<option >江西省</option>
</select></td>
</tr>
<tr>
<td align = "right">自我介绍</td>
<td algin = "left"><textarea name="intro " cols="25" rows="5" >
</textarea></td>
</tr>
<tr>
<td colspan = "2" align = "center" valign = "middle"><button>提交</button>
<input type="reset" value="重置" /></td>
</tr>
</body>
</html>2：效果如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>work2</title>
<style>
p {
text-decoration : line-through;
}
</style>
</head>
<body>
<h3>工行银行电子汇款单</h3>
<table width = "100" border = "1">
<tr>
<td colspan = "2"><b>回单类型</b></td>
<td>网上转账汇款</td>
<td colspan = "2"><b>指令序号</b></td>
<td>HQH000000000000132738</td>
</tr>
<tr >
<td rowspan = "4"><b>收款人</b></td>
<td >户名</td>
<td>老牟</td>
<td rowspan = "4"><b>付款人</b></td>
<td>户名</td>
<td>老刘</td>
<tr>
<td><b>卡号</b></td>
<td>000000000001</td>
<td><b>卡号</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan = "2"><b>币种</b></td>
<td>人民币</td>
<td colspan = "2"><b>超汇标志</b></td>
<td>钞票</td>
</tr>
<tr>
<td colspan = "2"><b>金额</b></td>
<td>1.00元</td>
<td colspan = "2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan = "2"><b>合计</b></td>
<td colspan = "4">人民币（大写）壹元整</td>
</tr>
<tr>
<td colspan = "2"><b>交易时间</b></td>
<td>2017年6月1日</td>
<td colspan = "2"><b>时间戳</b></td>
<td>2017-6-1-13：00</td>
</tr>
</table>
<br>票据打印时间：2017-6-1 15：00：02<br><br>
<p>票据打印单位：江苏徐州业务中心</p><br>
操作员：大曾</li>
</body>
</html>3：效果如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>work3</title>
<style type="text/css">
p{
font-size : 50px;
}
span{
font-size : 25px;
}
</style>
</head>
<body>
<table width="500">
<tr>
<td><p>将进酒</p></td>
<td><span>君不见黄河之水天上来</span></td>
</tr>
</table>
<table width="700">
<tr>
<td rowspan="13"><img src="./img/李白.png"/></td>
<td>君不见黄河之水天上来，奔流到海不复回。</td>
</tr>
<tr><td>君不见黄河之水天上来，奔流到海不复回。</td></tr>
<tr><td>君不见高堂明镜悲白发，朝如青丝暮成雪。</td></tr>
<tr><td>人生得意须尽欢，莫使金樽空对月</td></tr>
<tr><td>天生我材必有用，千金散尽还复来。</td></tr>
<tr><td>烹羊宰牛且为乐，会须一饮三百杯。</td></tr>
<tr><td>岑夫子，丹丘生，将进酒，杯莫停。</td></tr>
<tr><td>与君歌一曲，请君为我侧耳听。</td></tr>
<tr><td>钟鼓馔玉不足贵，但愿长醉不复醒。</td></tr>
<tr><td>古来圣贤皆寂寞，惟有饮者留其名。</td></tr>
<tr><td>陈王昔时宴平乐，斗酒十干恣欢谑。</td></tr>
<tr><td>主人何为言少钱，径须沽取对君酌。</td></tr>
<tr><td>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</td></tr>
</table>
</body>
</html>4：效果如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>work4</title>
<style type="text/css">
p{
font-size:25px;
}
</style>
</head>
<body>
<p><b>热门电影模块</b></p><hr>
<table width="700">
<tr>
<td><b>最近热门电影</b></td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳片</td>
<td>华语</td>
<td>欧美</td>
<td>韩国</td>
<td>日本</td>
<td align="right">更多>></td>
</tr>
</table>
<hr>
<br>
<table>
<tr>
<td><img src = "day1-work4-imge/4-1.png"></td>
<td><img src = "day1-work4-imge/4-2.png"></td>
<td><img src = "day1-work4-imge/4-3.png"></td>
<td><img src = "day1-work4-imge/4-4.png"></td>
</tr>
<tr>
<td>猜火车8.1</td>
<td>贝尔科实验6.0</td>
<td>加州公路巡警6.8</td>
<td>歌声不绝6.3</td>
</tr>
<tr>
<td><img src = "day1-work4-imge/4-5.png"></td>
<td><img src = "day1-work4-imge/4-6.png"></td>
<td><img src = "day1-work4-imge/4-7.png"></td>
<td><img src = "day1-work4-imge/4-8.png"></td>
</tr>
<tr>
<td>明日的我与昨日的你约会</td>
<td>速度与激情8</td>
<td>极速特工</td>
<td>金刚狼3：殊死一战</td>
</tr>
</table>
</body>
</html>5：抽奖，效果如图:
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖系统</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
border: 1px dashed red;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.container .box,
.box2 {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background: deepskyblue;
border-radius: 10%;
}
#show {
font-size: 30px;
color: white;
font-weight: bold;
}
#start {
width: 300px;
height: 50px;
background: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">
奖品
</span>
</div>
<button id="start" onclick="start()">开始抽奖</button>
<script type="text/javascript">
var flag = false;
var goods = ["香蕉", "橘子", "八宝粥", "宝马五元代金券", "电脑",
"iPhoneX", "1QB", "黄钻","奔驰","奥迪"
];
var show = document.getElementById("show");
var _start = document.getElementById("start");
var _box = document.getElementById("box")
var timer;
function start() {
if (!flag) {
flag = true;
_start.innerHTML = "停止抽奖"
timer = setInterval(function() {
var index = Math.floor(Math.random() * goods.length);
var good = goods[index]
show.innerText = good;
_box.className = "box2";
}, 10)
} else {
flag = false;
_start.innerHTML = "开始抽奖";
clearInterval(timer);
// _box["className"] = "box";
_box.setAttribute("class", "box");
}
}
</script>
</body>
</html>
6：全选，效果如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
height: 30px;
}
</style>
<script type="text/javascript">
function change(node) {
var all_check = document.getElementsByClassName("all_check");
for (var i = 0; i < all_check.length; i++) {
if (node.checked == true) {
all_check[i].checked = true;
} else {
all_check[i].checked = false;
}
}
}
function check(node){
var all_check = document.getElementsByClassName("all_check");
var node = document.getElementsByClassName("node");
for(var i = 0;i < all_check.length;i++){
if(all_check[i].checked == true){
continue;
}else{
break;
}
}
if(i == all_check.length){
node[0].checked = true;
}else{
node[0].checked = false;
}
}
</script>
</head>
<body>
<input type="checkbox" class="node" onclick="change(this)" />全选
<ul>
<h3>您的爱好是：</h3>
<li><input type="checkbox" class="all_check" onclick="check(this)"/>看书</li>
<li><input type="checkbox" class="all_check" onclick="check(this)"/>看电影</li>
<li><input type="checkbox" class="all_check" onclick="check(this)"/>玩QQ</li>
<li><input type="checkbox" class="all_check" onclick="check(this)"/>玩微信</li>
<li><input type="checkbox" class="all_check" onclick="check(this)"/>敲代码</li>
</ul>
</body>
</html>
9971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
