作业1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业1</title>
<style>
#a{
background-color:rgb(191, 183, 183);
text-align: center;
}
#c{
background-color: rgb(191, 183, 183);
text-align: center;
}
[id*="b"]{
background-color: rgb(214, 207, 207);
}
</style>
</head>
<body>
<table border="1px" align="center" id="a" width="474px">
<tr>
<td>用户注册</td>
</tr>
</table>
<table border="1px" align="center" id="b">
<tr>
<td width="150px" align="right" id="b1">
用户名
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<input type="text" name="用户名">
</form>
</td>
</tr>
<tr>
<td width="150px" align="right" id="b2">
密码
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<input type="password" name="用户名">
</form>
</td>
</tr>
<tr>
<td width="150px" align="right" id="b3">
性别
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<label> <input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女" >女</label>
</form>
</td>
</tr>
<tr>
<td width="150px" align="right" id="b4">
爱好
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<label><input type="checkbox" name="爱好" value="写作">写作</label>
<label><input type="checkbox" name="爱好" value="听音乐">听音乐</label>
<label><input type="checkbox" name="爱好" value="体育">体育</label>
</form>
</td>
</tr>
<tr>
<td width="150px" align="right" id="b5">
省份
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<select name="省份" id="">
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="云南省">云南省</option>
</select>
</form>
</td>
</tr>
<tr height="50px">
<td width="150px" align="right" id="b6">
自我介绍
</td>
<td width="270px">
<form action="https:www.baidu.com" method="post">
<textarea name="自我介绍" id="" cols="40" rows="8"></textarea>
</form>
</td>
</tr>
</table>
<table border="1px" align="center" id="c" width="474px">
<tr>
<td>
<button type="submit" >提交</button>
<input type="reset">
</td>
</tr>
</table>
</body>
</html>
运行结果:
作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业2</title>
<style>
.a{
font-size: 30px;
}
.c{
text-decoration: line-through;
}
</style>
</head>
<body>
<table class="a">
<tr>
<th>工商银行电子汇款单</th>
</tr>
</table>
<br>
<table border="1px" width="1000px" height="50px">
<tr>
<th align="left" colspan="2">回单类型</th>
<!-- <th></th> -->
<td> 网上转款记录</td>
<th align="left" colspan="2">指令序号</th>
<!-- <th></th> -->
<td>HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4">收款人</td>
<td align="left">户名</td>
<td>老牟</td>
<td rowspan="4">付款人</td>
<td align="left">户名</td>
<td>老刘</td>
</tr>
<tr>
<!-- <td></td> -->
<th align="left">卡号</th>
<td>00000000001</td>
<!-- <td></td> -->
<th align="left">卡号</th>
<td>00000000002</td>
</tr>
<tr>
<!-- <td></td> -->
<td align="left">地区</td>
<td>南京</td>
<!-- <td></td> -->
<td align="left">地区</td>
<td>杭州</td>
</tr>
<tr>
<!-- <td></td> -->
<th align="left">网点</th>
<td>工商江苏南京业务服务中心</td>
<!-- <td></td> -->
<th align="left">网点</th>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<th align="left" colspan="2">币种</th>
<!-- <th></th> -->
<td> 人民币</td>
<th align="left" colspan="2">炒汇标志</th>
<!-- <th></th> -->
<td>钞票</td>
</tr> <tr>
<th align="left" colspan="2">金额</th>
<!-- <th></th> -->
<td> 1.00元</td>
<th align="left" colspan="2">手续费</th>
<!-- <th></th> -->
<td>0.57</td>
</tr>
<tr>
<th align="left" colspan="2">合计</th>
<!-- <th></th> -->
<td colspan="4"> 人民币(大写):壹元整</td>
<!-- <th></th>
<th></th>
<td></td> -->
</tr>
<tr>
<th align="left" colspan="2">交易时间</th>
<!-- <th></th> -->
<td> 2017年6月1日</td>
<th align="left" colspan="2">时间戳</th>
<!-- <th></th> -->
<td>2017-06-01-13.00.00.00000</td>
</tr>
</table>
<br>
<table class="b">
<tr>
<th>票据打印时间:2017-06-01 15:00:12</th>
</tr>
</table>
<br>
<table class="c">
<tr>
<th>票据打印单位:江苏徐州业务中心</th>
</tr>
</table>
<br>
<table class="d">
<tr>
<th>操作员:大曾</th>
</tr>
</table>
</body>
</html>
运行结果:
作业3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{
display: inline;
}
.a2{
font-size: 25px;
display: inline;
margin: 20px;
}
.a34{
position: relative;
top: 100px;
}
.a3,.a4{
float: left;
margin: auto;
}
.a3{
width: 400px;
height: 500px;
/* border: 1px solid red; */
margin:10px 100px 10px 10px;
background-image: url(./屏幕截图\ 2024-07-08\ 183425.png);
}
.a4{
/* border: 1px solid red; */
width: 400px;
height: 500px;
list-style: none;
display: inline-block;
}
</style>
</head>
<body>
<h1 class="a1">将进酒</h1>
<span class="a2">君不见黄河之水天上来</span>
<span></span>
<div class="a34">
<div class="a3"></div>
<div class="a4">
<li>君不见,黄河之水天上来,奔流到海不复回。</li>
<br>
<li>君不见,高堂明镜悲白发,朝如青丝暮成雪。</li>
<br>
<li>人生得意须尽欢,莫使金樽空对月。</li>
<br>
<li>天生我材必有用,千金散尽还复来。</li>
<br>
<li>烹羊宰牛且为乐,会须一饮三百杯。</li>
<br>
<li>岑夫子,丹丘生,将进酒,杯莫停。</li>
<br>
<li>与君歌一曲,请君为我倾耳听。</li>
<br>
<li>钟鼓馔玉不足贵,但愿长醉不复醒。</li>
<br>
<li>古来圣贤皆寂寞,惟有饮者留其名。</li>
<br>
<li>陈王昔时宴平乐,斗酒十千恣欢谑。</li>
<br>
<li>主人何为言少钱,径须沽取对君酌。</li>
<br>
<li>五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。</li>
</div>
</div>
</body>
</html>
运行结果
作业4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{
width: 1000px;
height: 80px;
display: inline-block;
}
.b2{
margin: 10px 10px 10px 40px;
}
.b4{
margin: 10px 30px 10px 10px;
}
.b6{
margin: 10px 10px 10px 30px;
}
.b8{
margin: 10px;
}
.b10{
margin:10px 10px 10px 60px;
}
h2,li{
display: inline-block;
}
.a{
width: 60%;
height: 800px;
/* border: 1px solid red; */
display: inline-block;
}
ul>li{
width: 20%;
height: 350px;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div>
<span><h1>热门电影板块</h1></span>
</div>
<hr>
<div class="a1">
<h2 class="b1">最近热门电影</h2>
<li class="b2">热门</li>
<li class="b3">最新</li>
<li class="b4">豆瓣高分</li>
<li class="b5">冷门佳片</li>
<li class="b6">华语</li>
<li class="b7">欧美</li>
<li class="b8">韩国</li>
<li class="b9">日本</li>
<li class="b10">更多>></li>
</div>
<hr>
<div class="a">
<ul class="b">
<li class="b1">
<div class="img">
<img src="./img.png" alt="">
</div>
<div class="name">
<span class="name1">猜火车 8.1</span>
</div>
</li>
<li class="b2">
<div class="img">
<img src="./贝尔.png" alt="">
</div>
<div class="name">
<span class="name1">贝尔科实验 6.0</span>
</div>
</li>
<li class="b3">
<div class="img">
<img src="./加.png" alt="">
</div>
<div class="name">
<span class="name1">加州公路巡警 6.8</span>
</div>
</li>
<li class="b4">
<div class="img">
<img src="./歌声.png" alt="">
</div>
<div class="name">
<span class="name1">歌声不绝 6.3</span>
</div>
</li>
<li class="b5">
<div class="img">
<img src="./明.png" alt="">
</div>
<div class="name">
<span class="name1">明日的我与昨日的我</span>
</div>
</li>
<li class="b6">
<div class="img">
<img src="./速度.png" alt="">
</div>
<div class="name">
<span class="name1">速度与激情8</span>
</div>
</li>
<li class="b7">
<div class="img">
<img src="./极速.png" alt="">
</div>
<div class="name">
<span class="name1">极速特工</span>
</div>
</li>
<li class="b1">
<div cla8s="img">
<img src="./金.png" alt="">
</div>
<div class="name">
<span class="name1">金刚狼:殊死一战</span>
</div>
</li>
</ul>
</div>
</body>
</html>
运行结果