web第一次作业
作业1：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>用户注册</title><style>body { background-color: #f0f0f0; font-family: sans-serif; }table { margin: 20px auto; border-collapse: collapse;background: white;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}h2 { text-align: center; }td { padding: 8px 12px; }</style>
</head>
<body><table><tr><td colspan="2"><h2>用户注册</h2></td></tr><tr><td>用户名：</td><td><input type="text" name="UserName" size="15" maxlength="20"></td></tr><tr><td>密码：</td><td><input type="password" name="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"><option value="shaanxi" selected>陕西省</option><option value="shanxi">山西省</option></select></td></tr><tr><td>自我介绍：</td><td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td></tr><tr><td colspan="2" style="text-align: center;"><input type="submit" name="send" value="提交"><input type="reset" name="reset" value="重置"></td></tr></table>
</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;font-family: "Microsoft YaHei", "Segoe UI", sans-serif;}body {background: #fff;padding: 20px;display: flex;justify-content: center;align-items: center;min-height: 100vh;color: #000;}.container {max-width: 800px;width: 100%;background: white;box-shadow: 0 0 8px rgba(0,0,0,0.1);border: 1px solid #ddd;}.header {padding: 15px 25px;border-bottom: 2px solid #000;text-align: center;}.main-title {font-size: 20px;font-weight: bold;margin-bottom: 5px;}.subtitle {font-size: 18px;font-weight: bold;padding: 10px 0;}.receipt-info {padding: 10px 25px;border-bottom: 1px solid #ddd;font-size: 14px;font-weight: bold;}.form-content {padding: 15px 25px;}.two-column-layout {display: flex;margin-bottom: 20px;}.column {flex: 1;padding: 10px;border: 1px solid #000;}.column + .column {margin-left: 20px;}.column-title {font-size: 16px;font-weight: bold;margin-bottom: 15px;text-align: center;padding-bottom: 5px;border-bottom: 1px solid #000;}.form-row {display: flex;margin-bottom: 12px;}.label {width: 60px;font-size: 14px;}.value {flex: 1;font-size: 14px;font-weight: 500;padding-bottom: 3px;border-bottom: 1px dashed #000;}.amount-section {padding: 15px;border: 1px solid #000;margin-bottom: 20px;}.amount-row {display: flex;margin-bottom: 10px;}.amount-label {width: 80px;font-size: 14px;}.amount-value {flex: 1;font-size: 14px;font-weight: 500;padding-bottom: 3px;border-bottom: 1px dashed #000;}.total-amount {font-size: 14px;font-weight: bold;margin-top: 10px;text-align: center;}.form-info {font-size: 14px;text-align: center;padding: 10px 0;border-top: 1px dashed #ddd;margin-top: 15px;}.footer {padding: 15px 25px;display: flex;justify-content: space-between;border-top: 1px solid #ddd;font-size: 14px;}.button-container {text-align: center;padding: 20px;border-top: 1px dashed #ddd;}.edit-button {background: #e0e0e0;color: #000;border: 1px solid #999;padding: 8px 45px;font-size: 16px;cursor: pointer;}</style>
</head>
<body><div class="container"><div class="header"><div class="main-title">工商银行电子汇款单</div><div class="subtitle">电子汇款单</div></div><div class="receipt-info">指令序号：HQH00000000000013878172</div><div class="form-content"><!-- 左右布局的汇款人和收款人信息 --><div class="two-column-layout"><!-- 左侧汇款人信息 --><div class="column"><div class="column-title">汇款人信息</div><div class="form-row"><div class="label">户名：</div><div class="value">老刘</div></div><div class="form-row"><div class="label">卡号：</div><div class="value">000000000001</div></div><div class="form-row"><div class="label">地区：</div><div class="value">杭州</div></div><div class="form-row"><div class="label">网点：</div><div class="value">工商银行杭州分行</div></div></div><!-- 右侧收款人信息 --><div class="column"><div class="column-title">收款人信息</div><div class="form-row"><div class="label">户名：</div><div class="value">老单</div></div><div class="form-row"><div class="label">卡号：</div><div class="value">000000000002</div></div><div class="form-row"><div class="label">地区：</div><div class="value">南京</div></div><div class="form-row"><div class="label">网点：</div><div class="value">工商银行南京分行</div></div></div></div><!-- 汇款信息 --><div class="amount-section"><div class="amount-row"><div class="amount-label">汇款类型：</div><div class="amount-value">网上转账汇款</div></div><div class="amount-row"><div class="amount-label">汇款币种：</div><div class="amount-value">人民币（CNY）</div></div><div class="amount-row"><div class="amount-label">汇款金额：</div><div class="amount-value">1.00元</div></div><div class="amount-row"><div class="amount-label">手续费：</div><div class="amount-value">0.57元</div></div><div class="total-amount">合计人民币金额：壹圆整</div></div><div class="form-info">此电子回单供客户参考，不作为正式财务凭证</div></div><div class="footer"><div><div>票据打印时间：2017-06-01 14:30:45</div><div>打印单位：工商银行电子汇款中心</div></div><div><div>操作员：ICBC00123</div><div>打印次数：1</div></div></div><div class="button-container"><button class="edit-button">编辑</button></div></div>
</body>
</html>运行界面：
作业3：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>将进酒</title><style>body { font-family: "SimSun", serif; background: #fefde9;max-width: 700px;margin: 0 auto;padding: 30px;color: #663300;line-height: 2;display: flex; position: relative;}.content-container {flex: 1;}h1 { text-align: left; font-size: 2.5em;letter-spacing: 15px;margin-bottom: 30px;text-shadow: 2px 2px 3px rgba(0,0,0,0.2);}.poem {text-align: left;font-size: 1em;}.author {text-align: right;font-style: italic;font-size: 1.5em;margin-top: 20px;padding-right: 100px;}.image-area {flex: 0 0 300px;padding: 10px 40px 10px 10px;display: flex;justify-content: center;align-items: center;}.image-area img {width: 100%;max-height: 85vh;object-fit: cover;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);border-radius: 3px;filter: sepia(0.3) contrast(1.1);}@media (max-width: 768px) {body {flex-direction: column;}.image-area {flex: 0 0 auto;width: 100%;padding: 20px 0;text-align: center;}.image-area img {max-width: 80%;max-height: 400px;}}</style>
</head>
<body><div class="image-area"><img src="https://ts4.tc.mm.bing.net/th/id/OIP-C.jq6DMaCoQua19WbSkmGp_QHaNw?rs=1&pid=ImgDetMain&o=7&rm=3" alt="李白画像"></div><div class="content-container"><h2>将进酒</h2><div class="poem"><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>其中，李白人物的图片直接在网上找到，右键复制图片链接即可。
运行界面：
作业4：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>豆瓣电影</title><style>* { box-sizing: border-box; margin: 0; padding: 0; }body { font-family: "Helvetica Neue", Arial, sans-serif; }.container { max-width: 1200px; margin: 0 auto; }header { padding: 15px 0; border-bottom: 1px solid #eee;}h1 { font-size: 24px; font-weight: normal;color: #0277BD;margin-bottom: 10px;}nav {display: flex;border-bottom: 2px solid #eee;padding-bottom: 10px;margin-bottom: 20px;}nav a {color: #0277BD;text-decoration: none;margin-right: 25px;font-size: 14px;}nav a:hover { color: #ff8500; }.more { margin-left: auto; }.movie-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}.movie-card img {width: 100%;height:300px;object-fit: cover;border-radius: 3px;}.movie-title {margin-top: 8px;font-size: 14px;color: #333;}.rating {font-size: 12px;color: #ff8500;}</style>
</head>
<body><div class="container"><header><h1>热门电影板块</h1><nav><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="#">日本</a><a href="#" class="more">更多>></a></nav></header><div class="movie-grid"><div class="movie-card"><img src="https://pic1.zhimg.com/v2-edc9d5a6b6822fde8d99f3890ef7b3de_1440w.jpg" alt="猜火车"><div class="movie-title">猜火车</div><div class="rating">8.1分</div></div><div class="movie-card"><img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.zDBsgzeMjdSliZT4Ecb4LQAAAA?rs=1&pid=ImgDetMain&o=7&rm=3" alt="贝尔科实验"><div class="movie-title">贝尔科实验</div><div class="rating">6.0分</div></div><div class="movie-card"><img src="https://so1.360tres.com/t01447215f7a1704fff.jpg" alt="加州公路巡警"><div class="movie-title">加州公路巡警</div><div class="rating">6.8分</div></div><div class="movie-card"><img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.VwOaI9KsGLRamoEm_6hjdgHaKk?rs=1&pid=ImgDetMain&o=7&rm=3" alt="歌声不绝"><div class="movie-title">歌声不绝</div><div class="rating">6.3分</div></div><div class="movie-card"><img src="https://pic2.zhimg.com/v2-8c15be5d622689cd05fbcc14c99824af_qhd.jpg" alt="明日的我与昨日的我"><div class="movie-title">明日的我与昨日的我</div></div><div class="movie-card"><img src="https://ts1.tc.mm.bing.net/th/id/R-C.b977a29aafdd4f6cc1247ace64e4f79c?rik=FZGrMds35yLZtQ&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fl9vxrwfdjcw1q4g1567073958%2f0&ehk=jSN%2bYP577uieGbnL6hzJA6Osv1dKssXZCGGzcK2Rjrs%3d&risl=&pid=ImgRaw&r=0" alt="速度与激情8"><div class="movie-title">速度与激情8</div></div><div class="movie-card"><img src="https://ts1.tc.mm.bing.net/th/id/R-C.d4d3bfc7145feb972420a528b13ae33b?rik=uWp7HY9POSeksw&riu=http%3a%2f%2fsource.qulehe.com%2fwp-content%2fuploads%2f2017%2f06%2fChapter-Two.jpg&ehk=KdsetFxto0ZpDk%2fA4LfvRxyeMkYQEzGUoGjaRFm%2fGbA%3d&risl=&pid=ImgRaw&r=0" alt="极速特工"><div class="movie-title">极速特工</div></div><div class="movie-card"><img src="https://ts4.tc.mm.bing.net/th/id/OIP-C.dfyhpi71_ZqkNbPRuNotHADYEg?rs=1&pid=ImgDetMain&o=7&rm=3" alt="金刚狼3：殊死一战"><div class="movie-title">金刚狼3：殊死一战</div></div></div></div>
</body>
</html>其中，电影海报的图片直接在网上找到，右键复制图片链接即可。
运行界面：
