web第一次作业

黑椒牛肉焖饭2025-08-05 17:54

作业1：

代码：

html 复制代码 
<!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：

代码:

html 复制代码 
<!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：

代码：

html 复制代码 
<!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：

代码：

html 复制代码 
<!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">更多&gt;&gt;</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>

其中，电影海报的图片直接在网上找到，右键复制图片链接即可。

运行界面：

相关推荐
拾光拾趣录3 分钟前
给Electron-Claude应用构建全面的数据统计体系 - 从0到1的实践总结
前端·electron
changuncle17 分钟前
Angular初学者入门第一课——搭建并改造项目（精品）
javascript·ecmascript·angular.js
拾光拾趣录30 分钟前
8道题穿透前端原理层
前端·面试
海天胜景1 小时前
vue3 el-table 去除小数 并使用千分号
javascript·vue.js·elementui
cc蒲公英1 小时前
uniapp x swiper/image组件mode=“aspectFit“ 图片有的闪现后黑屏
java·前端·uni-app
前端小咸鱼一条1 小时前
React的介绍和特点
前端·react.js·前端框架
谢尔登1 小时前
【React】fiber 架构
前端·react.js·架构
哈哈哈哈哈哈哈哈8531 小时前
Vue3 的 setup 与 emit：深入理解 Composition API 的核心机制
前端
漫天星梦1 小时前
Vue2项目搭建（Layout布局、全局样式、VueX、Vue Router、axios封装）
前端·vue.js
ytttr8732 小时前
5G毫米波射频前端设计：从GaN功放到混合信号集成方案
前端·5g·生成对抗网络
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03UV安装并设置国内源04VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)05KGG转MP3工具|非KGM文件|解密音频06如何在 Cursor 中继续使用 Claude07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）09Claude Code+智谱GLM-4.5接入指南（附实测体验）10Coze 开源了，送上保姆级私有化部署方案【建议收藏】