web练习
1.复现下图
操作如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将进酒页面</title>
<style>
.container {
display: flex;
align-items: flex-start;
}
img {
width: 120px;
margin-right: 10px;
}
p {
margin: 0;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="container">
<img src="E:\前端代码\新建文件夹\code\作业\image.png" alt="古诗配图">
<div>
<h2>将进酒 君不见黄河之水天上来</h2>
<p>君不见黄河之水天上来，奔流到海不复回。</p>
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，</p>
<p>呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</div>
</body>
</html>
成果展示：
2.复现下图
操作如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热门电影板块</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
}
h2 {
font-size: 20px;
font-weight: bold;
margin: 10px 0;
}
.nav {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.nav a {
text-decoration: none;
color: #333;
margin-right: 15px;
font-size: 14px;
}
.nav a:hover {
color: #007bff;
}
.more {
float: right;
}
.movie-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
}
.movie-item {
width: 24%;
margin-bottom: 20px;
}
.movie-item img {
width: 100%;
height: auto;
display: block;
}
.movie-item p {
text-align: center;
margin-top: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- 标题 -->
<h2>热门电影板块</h2>
<!-- 导航栏 -->
<div class="nav">
<a href="#" class="active">最近热门电影</a>
<a href="#">热门</a>
<a href="#">最新</a>
<a href="#">豆瓣高分</a>
<a href="#">冷门佳片</a>
<a href="#">华语</a>
<a href="#">欧美</a>
<a href="#">韩国</a>
<a href="#">日本</a>
<a href="#" class="more">更多>></a>
</div>
<!-- 电影列表 -->
<div class="movie-list">
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\作业\image.png" alt="李白">
<p>李白 8.1</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\凡人.png" alt="凡人修仙传">
<p>凡人修仙传 6.0</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\鬼灭之刃.png" alt="鬼灭之刃">
<p>鬼灭之刃 6.8</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\罗小黑.png" alt="罗小黑">
<p>罗小黑 6.3</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\玲珑.png" alt="玲珑">
<p>玲珑</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\金刚狼.png" alt="金刚狼">
<p>金刚狼</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\极速特攻.png" alt="极速特攻">
<p>极速特攻</p>
</div>
<div class="movie-item">
<img src="E:\前端代码\新建文件夹\code\速度.png" alt="速度">
<p>速度</p>
</div>
</div>
</body>
</html>
成果展示：
3.复现下图
操作如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<style>
table {
width: 300px;
margin: 0 auto;
background-color: #eaeaea;
border-collapse: collapse;
}
table caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
table td {
padding: 8px;
}
</style>
</head>
<body>
<form action="#" method="post">
<table border="1">
<!-- 表单标题 -->
<tr>
<td colspan="2" align="center">
<h2>用户注册</h2>
</td>
</tr>
<!-- 用户名 -->
<tr>
<td>用户名</td>
<td><input type="text" name="UserName" id="UserName" size="15" maxlength="20"></td>
</tr>
<!-- 密码 -->
<tr>
<td>密码</td>
<td><input type="password" name="UserPass" id="UserPass" size="15" maxlength="20"></td>
</tr>
<!-- 性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<!-- 爱好 -->
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="like" value="写作">写作
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育
</td>
</tr>
<!-- 省份 -->
<tr>
<td>省份</td>
<td>
<select name="province" id="province">
<option value="shanxi" selected>陕西省</option>
<option value="shanx">山西省</option>
</select>
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td>自我介绍</td>
<td><textarea name="intro" id="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td>
</tr>
<!-- 提交和重置按钮 -->
<tr>
<td colspan="2" align="center">
<input type="submit" name="send" value="提交">
<input type="reset" name="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
成果展示：
4.复现下图
操作如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工商银行电子汇款单</title>
<style>
body {
font-family: "SimSun", serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #000;
}
th,
td {
padding: 6px 8px;
text-align: left;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2 class="title">工商银行电子汇款单</h2>
<table>
<tr>
<td>回单类型</td>
<td>网上转账汇款</td>
<td>指令序号</td>
<td>HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4">收款人</td>
<td>户名</td>
<td>老牟</td>
<td rowspan="4">付款人</td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td>卡号</td>
<td>0000000000001</td>
<td>卡号</td>
<td>0000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td>网点</td>
<td>工商江苏南京业务处理中心</td>
<td>网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td>币种</td>
<td>人民币</td>
<td>钞汇标志</td>
<td>钞汇</td>
</tr>
<tr>
<td>金额</td>
<td>1.00元</td>
<td>手续费</td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td colspan="2">人民币（大写）：壹圆整</td>
</tr>
<tr>
<td>交易时间</td>
<td>2017年6月1日</td>
<td>时间戳</td>
<td>2017-06-01-13:00:00. 00000</td>
</tr>
</table>
<p>票据打印时间：2017-06-01 15:00:12</p>
<p>票据打印单位：江苏徐州业务中心</p>
<p>操作员：大章</p>
</body>
</html>
成果展示：
