html<table>做的表格报告单

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>Document</title>
    <style>
        table{
            width: 600px;
            border-collapse: collapse;
        }
        table td{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            text-align: center;
            padding:0;
        }
        table input{
            width: 100%;
            height: 100%;
            margin: 0;
            border: none;
        }
    </style>
</head>
<body>
    <h2>外周血淋巴细胞染色体畸变检测报告单</h2>
    <table border="1">
        <tr>
            <td>姓名</td><td><input type="text"/></td>
            <td>性别</td><td><input type="text"/></td>
            <td>年龄</td><td><input type="text"/></td>
        </tr>
        <tr>
            <td >工种</td><td colspan="2"><input type="text"/></td>
            <td colspan="2">工龄</td>
            <td><input style="width: 40px;margin-left: 0;" type="text"/>年</td>
        </tr>
        <tr>
            <td colspan="6">检测方法:微量全血培养</td>
        </tr>
        <tr>
            <td colspan="6" style="height: 100px;">
                <div><label>分析细胞数:85</label></div>
                <div>
                    <label>染色体畸变率(%): 15.294染色体畸变细胞率(%: 4.706</label>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="6">畸变类型及数量(个):</td>
        </tr>
        <tr>
            <td>dic</td><td>4</td><td>r</td><td>0</td><td>r0</td><td>0</td>
        </tr>
        <tr>
            <td>t</td><td>0</td><td>inv</td><td>1</td><td>ace</td><td>8</td>
        </tr>
        <tr>
            <td colspan="6" style="height: 200px;">
                <div style="height: 100%;overflow-y: scroll;">
                    <p>结果评价:</p>
                    <div>
                        <p>无着丝粒体畸变率(ace)大于3%</p>
                        <p>双着丝粒体(dic)、着丝粒环(r)和稳定性染色体畸变(t)率大于或等于1%</p>
                        <p>对检测结果异常的受检者,可在3~6个月内复查</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td >检测日期<td colspan="2">2021年8月30日</td></td><td >报告日期</td><td colspan="2">年_月_日</td>
        </tr>
        <tr>
            <td >分析人<td colspan="2">admin</td></td><td >复核人</td><td colspan="2"></td>
        </tr>
    </table>
    <button>确定</button>
    <button>取消</button>
</body>
</html>
**期末考试要求分析及完成思路(基于文档知识点限定版)** --- #### **一、考核核心要点** 1. **主题选择**:从10个主题中任选其一(如“个人博客”),确保内容合法、主题明确。 2. **技术规范**(严格基于文档知识点): - **布局**:仅使用 **DIV+CSS浮动布局**或**定位布局**(static/relative/absolute/fixed),禁用Flexbox/Grid(文档未明确要求)。 - **页面元素**:必须包含文字、图片、列表、音视频、超链接。 - **结构要求**: - 主页(`index.html`)需包含LOGO(`<img>`标签)和导航菜单(`<ul>`列表)。 - 至少3个子页面(含主页共4页),风格统一(通过外部CSS文件控制)。 - 子页面中必须有一个**表单页面**(使用`<form>`、`<input>`、`<textarea>`等标签)。 - 单独**个人主页页面**(`profile.html`),展示真实学号、姓名、班级(使用`<p>`标签)。 3. **文件管理**: - 文件夹命名:学号+姓名(如`20230101zhangsan`),**禁用中文**。 - 子目录命名:`css`(存放样式表)、`images`(图片)、`media`(音视频)。 - 文件名全英文,如`index.html`、`contact.html`。 --- #### **二、完成思路与框架(仅限文档内容)** ##### **1. 主题选择与内容规划** - **推荐主题**:**个人博客**(符合文档中“个人博客”主题要求,且易于实现)。 - **页面规划**(必须包含以下内容): - **主页(index.html)**: - LOGO(`< img src="images/logo.png">`)。 - 导航菜单(`<ul>`列表,使用浮动布局实现横向排列)。 - 文章列表(`<ul>`或`<ol>`列表,含缩略图`<img>`和简介文字)。 - **子页面**: - **个人主页(profile.html)**:真实学号、姓名、班级(`<p>`标签)。 - **文章详情页(article.html)**:图文混排(`<p>`、`<img>`、`<h2>`)。 - **联系表单页(contact.html)**:包含姓名、邮箱、留言的表单(`<input type="text">`、`<input type="email">`、`<textarea>`)。 - **关于我(about.html)**:嵌入个人介绍视频(`<video controls>`标签)。 ##### **2. 技术实现框架(仅限文档知识点)** - **布局设计**: - **导航栏**:使用`float: left`实现横向排列,清除浮动用`clear: both`。 - **内容区**:DIV分区(`<div class="header">`、`<div class="main">`、`<div class="footer">`)。 - **定位**:LOGO使用`position: absolute`固定在左上角,导航栏用`position: fixed`固定在顶部。 - **CSS样式**: - **外部样式表**:`styles.css`中统一管理颜色、字体、边距(禁用Sass/LESS)。 - **选择器**:仅使用文档中的基础选择器(标签、类、ID)及后代选择器。 - **盒模型**:通过`padding`、`margin`、`border`控制间距,禁用Flexbox/Grid。 - **交互元素**: - **表单验证**:仅用HTML5原生属性(`required`、`type="email"`)。 - **超链接**:所有页面与主页双向跳转(`Home`)。 - **音视频**:使用`<audio>`和`<video>`标签,添加`controls`属性。 ##### **3. 文件结构示例(严格符合文档要求)** ``` 20230101zhangsan/ ├── index.html ├── profile.html ├── article.html ├── contact.html ├── about.html ├── css/ │ └── styles.css # 仅用文档中的CSS语法(如浮动、定位) ├── images/ │ ├── logo.png # 网站LOGO │ ├── article1.jpg # 文章配图 │ └── avatar.jpg # 个人头像 └── media/ ├── intro.mp4 # 个人介绍视频 └── background.mp3 # 背景音乐 ``` ##### **4. 关键代码片段(基于文档示例)** - **导航菜单(HTML + CSS浮动布局)**: ```html <!-- HTML --> <nav> <ul> <li>Home</li> <li>Profile</li> <li>Contact</li> </ul> </nav> ``` ```css /* CSS */ nav ul { list-style: none; margin: 0; padding: 0; } nav li { float: left; margin-right: 20px; } nav a { text-decoration: none; color: #333; } ``` - **表单页面(HTML5原生验证)**: ```html <form> <label>Name: <input type="text" name="name" required></label> <label>Email: <input type="email" name="email" required></label> <label>Message: <textarea name="message" required></textarea></label> <input type="submit" value="Send"> </form> ``` ##### **5. 注意事项** - **兼容性**:使用`<!DOCTYPE html>`声明,避免IE兼容问题(文档未提及高级兼容方案)。 - **测试**:在Chrome/Firefox中检查布局是否错位(禁用Flexbox/Grid)。 - **内容原创**:所有文字、图片需原创或注明来源(如引用图片需声明出处)。 --- #### **三、评分冲刺点(基于文档标准)** - **90+分关键**: - **页面丰富性**:轮播图(通过CSS `overflow`和`float`模拟)、表格(`<table>`标签)。 - **技术深度**:使用定位布局实现复杂排版(如侧边栏固定)。 - **报告内容**:详细描述浮动布局的`clearfix`解决方案(`.clearfix::after { content: ""; display: block; clear: both; }`)。 - **避免扣分**: - **文件命名**:严格使用英文,如`profile.html`而非`gerenzhuye.html`。 - **代码规范**:禁用文档未提到的属性(如`display: flex`)。 --- **总结**:严格遵循文档中的HTML/CSS知识点,优先使用浮动与定位布局,禁用未提及的Flexbox/Grid等高级特性。通过清晰的目录结构、原生HTML5表单验证及基础CSS样式,确保作品符合考核要求并冲刺高分。根据这个框架给我一份完整的个人博客网页代码
最新发布
05-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值