作业一:用户注册页面
<!doctype html>
<html>
<head>
<title>sign in</title>
<style>
div{
background:#009FCC;
font-size:24px;
padding:5px;
color:white;
}
form{
background: #F8F8FF ;
border:#357FC4 solid 1px;
color:#575454;
width:400px;
margin:20px auto;
font-size:15px;
}
table{
margin:10px auto;
}
a{
text-decoration:none;
}
input[type="button"]{
background:#228B22;
color:white;
font-size:15px;
font-weight:bold;
width:120px;
height:40px;
}
td:first-child{
text-align:right;
padding:0 5px;
}
td:only-child{
text-align:center;
font-size:12px;
}
span:before{
content:"* ";
color:red;
}
input[type="text"]:read-only{
border:#888484 solid 2px;
background:#888484;
font-weight:bold;
}
input[type="text"]:hover{
background:#EFD9AC;
}
</style>
</head>
<body>
<form>
<div>注册账号</div>
<table>
<tr><td><span>用户名</span></td><td><input type="text" name="user_name" /></td></tr>
<tr><td><span>email</span></td><td><input type="text" name="user_email" /></td></tr>
<tr><td><span>密码</span></td><td><input type="password" name="user_password" /></td></tr>
<tr><td><span>确认密码</span></td><td><input type="password" name="user_confirm_password" /></td></tr>
<tr><td>性别</td><td><input type="radio" id="male" name="user_sex" checked />男<input type="radio" id="female" name="user_sex" />女</td></tr>
<tr><td>手机号码</td><td><input type="text" name="user_phone1" /></td></tr>
<tr><td colspan="2"><input type="checkbox" checked/>我已看过并接受<a href="#">《用户协议》</a></td></tr>
<tr><td colspan="2"><input type="button" name="submit" value="立即注册" /></td></tr>
</table>
</form>
</body>
</html>
作业二:电子汇款单页面
<!DOCTYPE html>
<html>
<head>
<title>中国银行电子汇款单</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>中国银行电子汇款单</h1>
<table border="1" cellpadding="0" cellspacing="0" style="width: 1100px">
<tr>
<td colspan="2"><b>回单类型</b></td>
<td >网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<td >HQH0000000000000013878172</td>
</tr>
<tr>
<th rowspan="4" style="width: 20px">收款人</th>
<td style="width: 80px">户名</td>
<td>大硕</td>
<th rowspan="4" style="width: 20px">付款人</th>
<td style="width: 80px">户名</td>
<td>大旭</td>
</tr>
<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><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>3亿元</td>
<td colspan="2"><b>手续费</b></td>
<td>60万元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币(大写)壹元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td><i>2024年3月14日</i></td>
<td colspan="2"><b>时间戳</b></td>
<td><i>2024-03-14-14.00.0000000</i></td>
</tr>
</table>
<div>票据打印时间:2024-03-14 15:00:12</div>
<div><del>票据打印单位:中国银行广东业务中心</del> </div>
<div>操作员:老王</div>
</body>
</html>
作业三:豆瓣电影页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table border="0" cellspacing="0" width="1200">
<tr>
<td><font size="5"><b>最近热门电影</b></font></td>
<td align="center"><font size="5">热门</font></td>
<td align="center"><font size="5">最新</font></td>
<td align="center"><font size="5">豆瓣高分</font></td>
<td align="center"><font size="5">冷门佳片</font></td>
<td align="center"><font size="5">华语</font></td>
<td align="center"><font size="5">欧美</font></td>
<td align="center"><font size="5">韩国</font></td>
<td align="center"><font size="5">日本</font></td>
<td align="center"><font size="5">更多>></font></td>
</tr>
</table>
<hr>
<table border="0" cellspacing="0">
<tr>
<td><img src="D:\ChromeCore\图片\周处除三害.jpg"></td>
<td><img src="D:\ChromeCore\图片\可怜的东西.jpg"></td>
<td><img src="D:\ChromeCore\图片\女孩们都很好.jpg"></td>
<td><img src="D:\ChromeCore\图片\少女斗恶龙.jpg"></td>
</tr>
<tr>
<td>周处除三害</td>
<td>可怜的东西</td>
<td>女孩们都很好</td>
<td>少女斗恶龙</td>
</tr>
<tr>
<td><img src="D:\ChromeCore\图片\机器人之梦.jpg"></td>
<td><img src="D:\ChromeCore\图片\首尔之春.jpg"></td>
<td><img src="D:\ChromeCore\图片\美国小说.jpg"></td>
<td><img src="D:\ChromeCore\图片\利益区域.jpg"></td>
</tr>
<tr>
<td>机器人之梦</td>
<td>首尔之春 </td>
<td>美国小说 </td>
<td>利益区域 </td>
</tr>
</table>
</body>
</html>
作业四:古诗词鉴赏页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钱塘湖春行</title>
<style>
#textbox{
border: 2px solid rgb(41, 40, 40);
text-align: center;
width: 850px;
margin: 20px auto;
margin-top: 0%;
height: 500px ;
}
.title{
color: rgb(116, 0, 0);
font-size: 40px;
font-weight: bold;
font-family: 楷体;
}
#a{
text-align: left;
position: fixed;
margin: 10px 5px;
}
.author{
color: rgb(116, 0, 0);
font-weight: bold;
font-family: 隶书;
font-size: 20px;
}
#text{
height: 45%;
position: relative;
width: 550px;
}
#left{
width: 510px;
height: 225px;
margin-left: 25px;
position: fixed;
}
#left p{
margin-top: 35px;
position: relative;
letter-spacing: 4px;
line-height: 40px;
font-family: 方正姚体;
color: rgb(116, 0, 0);
font-size: x-large;
}
#right{
margin-left: 505px;
width: 330px;
height: 225px;
position: fixed;
}
#right img{
text-align: left;
margin-top: 10px;
height: 210px;
width: 160px;
}
#footer{
text-align: left;
margin-top: 40px;
}
#footer p{
font-family: 楷体;
line-height: 25px;
}
</style>
</head>
<body>
<div id="textbox">
<div id="a"><a href="">返回</a></div>
<span class="title">钱塘湖春行</span>
<p><span class="author">唐代:白居易</span></p>
<hr color="green" size="5px">
<div id="text">
<div id="left">
<p>
孤山寺北贾亭西,水面初平云脚低。<br>
几处早莺争暖树,谁家新燕啄春泥。<br>
乱花渐欲迷人眼,浅草才能没马蹄。<br>
最爱湖东行不足,绿杨阴里白沙堤。
</p>
</div>
<div id="right">
<img src="D:\ChromeCore\图片\白居易.jpg" alt="">
</div>
</div>
<div id="footer">
<p> 简介: 白居易(772年-846年),字乐天,号香山居士,又号醉吟先生,祖籍太原,到其曾祖父时迁居下邽,生于河南新郑。白居易是唐代伟大的现实主义诗人,唐代三大诗人之一。白居易与元稹共同倡导新乐府运动,世称“元白”,与刘禹锡并称“刘白”。白居易的诗歌题材广泛,形式多样,语言平易通俗,有“诗魔”和“诗王”之称。</p>
</div>
</div>
</body>
</html>