表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子汇款单</title>
<style>
h1{
font-size: 50px;
}
.type{font-style: italic;}
</style>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1px" cellspacing="0" cellpadding="0" >
<tr height="50px">
<td width="180px"><big><b>回单类型</b></big></td>
<td width="500px">网上转账汇款</td>
<td width="180px"><big><b>指令序号</b></big></td>
<td width="500px">HQH000000000000003878172</td>
</tr>
<tr >
<td colspan="4">
<table border="1px" height="200px" cellspacing="0" cellpadding="0" >
<tr >
<td width="30px" rowspan="4"><big><b>收款人</b></big></td>
<td width="150px">户名</td>
<td width="500">老牟</td>
<td width="30px" rowspan="4"><big><b>付款人</b></big></td>
<td width="150px">户名</td>
<td width="500">老刘</td>
</tr>
<tr >
<!-- <td width="30px"></td> -->
<td width="150px"><big><b>卡号</b></big></td>
<td width="500">000000000001</td>
<!-- <td width="30px"></td> -->
<td width="150px"><big><b>卡号</b</big></td>
<td width="500">000000000002</td>
</tr>
<tr >
<!-- <td width="30px"></td> -->
<td width="150px">地区</td>
<td width="500">南京</td>
<!-- <td width="30px"></td> -->
<td width="150px">地区</td>
<td width="500">杭州</td>
</tr>
<tr >
<!-- <td width="30px"></td> -->
<td width="150px"><big><b>网点</b></big></td>
<td width="500">工商江苏南京业务处理中心</td>
<!-- <td width="30px"></td> -->
<td width="150px"><big><b>网点</b></big></td>
<td width="500">江苏徐州业务中心</td>
</tr>
</table>
</td>
<tr>
<tr height="50px">
<td width="180px"><big><b>币种</b></big></td>
<td width="500px">人民币</td>
<td width="180px"><big><b>钞汇标志</b></big></td>
<td width="500px">钞票</td>
</tr>
<tr>
<tr height="50px">
<td width="180px"><big><b>金额</b></big></td>
<td width="500px">1.00元</td>
<td width="180px"><big><b>手续费</b></big></td>
<td width="500px">0.57元</td>
</tr>
<tr>
<tr height="50px">
<td width="180px"><big><b>合计</b></big></td>
<td width="500px" colspan="3">人名币(大写):壹元整</td>
<!-- <td width="180px"></td>
<td width="500px"></td> -->
</tr>
<tr>
<tr height="50px">
<td width="180px"><big><b>交易时间</b></big></td>
<td width="500px" class="type">2017年6月1日</td>
<td width="180px" ><big><b>时间戳</b></big></td>
<td width="500px" class="type">2017-06-01-13.00.00,00000</td>
</tr>
</table>
<p>
<div>票据打印时间:2017-06-01 15:00.12</div></p>
<del>票据打印单位:江苏徐州业务中心</del><P>
<div>操作员:大曾</div>
</P>
</body>
</html>李白诗词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李白诗词</title>
<style>
h1,h2{
display: inline-block;
}
h1{font-size: 50px;}
h2{font-size: 40px;
margin-left: 20px;}
.text{
line-height: 2;
font-size: 29px;
}
</style>
</head>
<body>
<table >
<tr height="100px">
<td width="900px">
<h1>将进酒</h1>
<h2>君不见黄河之水天上来</h2>
</td>
</tr>
</table>
<table >
<tr height="800px">
<td width="450px" >
<img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0505%2Fb2c0a844j00sd0mv9000id000ed00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg" " alt=""
width="400px"
height="800px"
>
</td>
<td width="600px">
<div class="text">
君不见黄河之水天上来，奔流到海不复回。<br>
君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
岑夫子，丹丘生，将进酒，杯莫停。<br>
与君歌一曲，请君为我倾耳听。<br>
钟鼓馔玉不足贵，但愿长醉不愿醒。<br>
古来圣贤皆寂寞，惟有饮者留其名。<br>
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
主人何为言少钱，径须沽取对君酌。<br>
五花马、千金裘，<br>
呼儿将出换美酒，与尔同销万古愁。<br>
</div>
</td>
</table>
</body>
</html>仿写登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
<style>
table{
margin: auto;
margin-top: 200px;
background-color:rgb(237, 237, 237);
}
.t1,.t2{
text-align: center;
background-color: rgb(201, 201, 201);
}
div{
text-align: right;
}
</style>
</head>
<body>
<table border="1px" cellspacing="1px" >
<tr class="t1" height="30px" >
<td width="150px" colspan="2">用户注册</td>
</tr>
<tr height="30px" >
<td width="80px">
<div>用户名</div>
</td>
<td width="190px">
<form action="">
<input type="text" name="UserName" maxlength="20"
size="15" ">
</form>
</td>
</tr>
<tr height="30px" >
<td width="80px">
<div>密码</div>
</td>
<td width="190px">
<form action="">
<input type="password"name="UserPass" maxlength="20" size="15"">
</form>
</td>
</tr>
<tr height="30px" >
<td width="80px"><div>性别</div></td>
<td width="190px">
<form action="">
<input type="radio" name="sex" value="1" > 男
<input type="radio" name="sex" value="0" > 女
</form>
</td>
</tr>
<tr height="30px" >
<td width="80px"><div>爱好</div></td>
<td width="190px">
<form action="">
<input type="checkbox" name="like" value="写作" >写作
<input type="checkbox" name="like" value="听音乐" >听音乐
<input type="checkbox" name="like" value="体育" >体育
</form></td>
</tr>
<tr height="30px" >
<td width="80px"><div>省份</div></td>
<td width="190px">
<select name="province">
<option value="shanxi">陕西省</option>
<option value="shanx">山西省</option>
</form>
</td>
</tr>
<tr >
<td width="80px" ><div>自我介绍</div></td>
<td width="190px">
<textarea name="intro" cols="25" rows="5">这个家伙什么也没有留下</textarea>
</td>
</tr>
<tr class="t2" height="30px" >
<td width="190px" colspan="2">
<button type="submit" >提交</button>
<button>重置</button>
</td>
</tr>
</table>
</body>
</html>仿写电影页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影</title>
<style>
li{
list-style: none;
display: inline;
margin-left: 60px;
}
.t1{
margin-left: 80px;
}
/* .box >div{border: 1px solid red;} */
.box{
display: grid;
grid-template-columns: repeat(4,1fr);
height: 785px;
grid-template-rows: repeat(2,1fr);
width: 1200px;
grid-gap: 10px;
}
img{
width: 300px;
height: 340px;
}
.text{
margin-top: 10px;
}
</style>
</head>
<body>
<div><h1>热门电影板块</h1></div>
<hr>
<b>最近热门电影</b>
<li>热门</li>
<li>最新</li>
<li>豆瓣高分</li>
<li>冷门佳片</li>
<li>华语</li>
<li>欧美</li>
<li>韩国</li>
<li>日本</li>
<li class="t1">更多>></li>
</div>
<hr>
<div class="box">
<div>
<img src="https://pic.wujinpp.com/upload/vod/20240502-1/57804f1e1083d9645da0d00c29cfa814.jpg" alt="">
<div class="text">九龙城寨之围城</div>
</div>
<div>
<img src="https://pic.wujinpp.com/upload/vod/20240627-1/fd43373d711956bdb1729ddda7d60b83.jpg" alt="">
<div class="text">神偷奶爸4</div>
</div>
<div>
<img src="https://img.guangsuimage.com/cover/9106f20ec0407152b603895dd2390786.jpg" alt="">
<div class="text">功夫熊猫4</div>
</div>
<div>
<img src="https://img.guangsuimage.com/cover/556d45c13b15c78191b191294dae55e4.jpg" alt="">
<div class="text">第十二条</div>
</div>
<div>
<img src="https://pic.wujinpp.com/upload/vod/20240620-1/b7f91c958ea3bf987639a17387f4c75f.jpg" alt="">
<div class="text">扫黑·决不放弃</div>
</div>
<div>
<img src="https://pic.wujinpp.com/upload/vod/20230601-1/35caef2be6ba3551c0abd5d07b33f2d7.jpg" alt="">
<div class="text">蜘蛛侠:纵横宇宙</div>
</div>
<div>
<img src="https://pic.wujinpp.com/upload/vod/20240518-1/485fd06847c416c3d211d890cd56bb27.jpg" alt="">
<div class="text">加菲猫2024</div>
</div>
<div>
<img src="https://img.guangsuimage.com/cover/230fd6d29005cc05d3586a611cb25131.jpg" alt="">
<div class="text">猩球崛起:新世界</div>
</div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
