前端工作小结46-代码之解析position 解决

简介: 前端工作小结46-代码之解析position 解决
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日常请假</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        a {
            -webkit-top-heightlight-color: transparent;
        }
    </style>
</head>
<body style="background-color: rgb(230, 235, 245);">
    <div style="width: 100%;background-color:white; margin-top: 10px; position: relative">
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;">
            <p>姓名</p>
            <p> 专业</p>
            <p> 年级</p>
            <p> 事由类型</p>
            <p>请假时间</p>
            <p> 外出地点</p>
            <p> 同行人数</p>
        </div>
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;;">
            <p>找国企</p><a href="" style="text-decoration:none;position: absolute; right: 10px;top: 0px; font-size: 10px; color:aqua "> 查看详情></a>
            <p> 计算机科学与技术</p>
            <p> 2019</p>
            <p>培训</p>
            <p> 2020年11月14日</p>
            <p> 科二联系基地</p>
            <p> 0</p>
        </div>
        <div style=" z-index: 100; width: 0px; height: 0px ; border-top: 20px solid transparent; border-left: 0px  solid transparent;border-right: 20px solid white;border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
        <div style="width: 0px; height: 0px ; border-top:60px solid transparent; border-left: 0px  solid transparent;border-right: 60px solid rgb(158, 248, 158);border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
    </div>
    <div style="width: 100%;background-color:white; margin-top: 10px; position: relative">
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;">
            <p>姓名</p>
            <p> 专业</p>
            <p> 年级</p>
            <p> 事由类型</p>
            <p>请假时间</p>
            <p> 外出地点</p>
            <p> 同行人数</p>
        </div>
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;;">
            <p>找国企</p><a href="" style="text-decoration:none;position: absolute; right: 10px;top: 0px; font-size: 10px; color:aqua "> 查看详情></a>
            <p> 计算机科学与技术</p>
            <p> 2019</p>
            <p>培训</p>
            <p> 2020年11月14日</p>
            <p> 科二联系基地</p>
            <p> 0</p>
        </div>
        <div style=" z-index: 100; width: 0px; height: 0px ; border-top: 20px solid transparent; border-left: 0px  solid transparent;border-right: 20px solid white;border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
        <div style="width: 0px; height: 0px ; border-top:60px solid transparent; border-left: 0px  solid transparent;border-right: 60px solid rgb(158, 248, 158);border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
    </div>
    <div style="width: 100%;background-color:white; margin-top: 10px; position: relative">
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;">
            <p>姓名</p>
            <p> 专业</p>
            <p> 年级</p>
            <p> 事由类型</p>
            <p>请假时间</p>
            <p> 外出地点</p>
            <p> 同行人数</p>
        </div>
        <div style="display: inline-block; line-height: 50px; padding-left: 10px;;">
            <p>找国企</p><a href="" style="text-decoration:none;position: absolute; right: 10px;top: 0px; font-size: 10px; color:aqua "> 查看详情></a>
            <p> 计算机科学与技术</p>
            <p> 2019</p>
            <p>培训</p>
            <p> 2020年11月14日</p>
            <p> 科二联系基地</p>
            <p> 0</p>
        </div>
        <div style=" z-index: 100; width: 0px; height: 0px ; border-top: 20px solid transparent; border-left: 0px  solid transparent;border-right: 20px solid white;border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
        <div style="width: 0px; height: 0px ; border-top:60px solid transparent; border-left: 0px  solid transparent;border-right: 60px solid rgb(158, 248, 158);border-bottom: 0px  solid transparent; position:absolute; right: 0px; bottom: 0px;"></div>
    </div>
    <!--    <div>
        <button class="">aaaa</button>
    </div> -->
    <div style="position: fixed;bottom: 0; width: 100%; height: 40px; background-color:sandybrown; display:flex ; justify-content: center; color: white; line-height: 40px;">
        <a href="#" style="display: block;text-decoration:none ;color:black">
    提交请假
</a>
    </div>
</body>
</html>

image.png

相关文章
|
6月前
|
算法 PyTorch 算法框架/工具
昇腾 msmodelslim w8a8量化代码解析
msmodelslim w8a8量化算法原理和代码解析
413 5
|
5月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1124 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
4月前
|
存储 前端开发 JavaScript
|
5月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
1905 64
|
4月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用
通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。
|
5月前
|
前端开发 JavaScript 安全
|
8月前
|
搜索推荐 UED Python
实现一个带有昼夜背景切换的动态时钟:从代码到功能解析
本文介绍了一个使用Python和Tkinter库实现的动态时钟程序,具有昼夜背景切换、指针颜色随机变化及整点和半点报时功能。通过设置不同的背景颜色和随机变换指针颜色,增强视觉吸引力;利用多线程技术确保音频播放不影响主程序运行。该程序结合了Tkinter、Pygame、Pytz等库,提供了一个美观且实用的时间显示工具。欢迎点赞、关注、转发、收藏!
356 94
|
6月前
|
传感器 监控 Java
Java代码结构解析:类、方法、主函数(1分钟解剖室)
### Java代码结构简介 掌握Java代码结构如同拥有程序世界的建筑蓝图,类、方法和主函数构成“黄金三角”。类是独立的容器,承载成员变量和方法;方法实现特定功能,参数控制输入环境;主函数是程序入口。常见错误包括类名与文件名不匹配、忘记static修饰符和花括号未闭合。通过实战案例学习电商系统、游戏角色控制和物联网设备监控,理解类的作用、方法类型和主函数任务,避免典型错误,逐步提升编程能力。 **脑图速记法**:类如太空站,方法即舱段;main是发射台,static不能换;文件名对仗,括号要成双;参数是坐标,void不返航。
240 5
|
7月前
|
人工智能 文字识别 自然语言处理
保单AI识别技术及代码示例解析
车险保单包含基础信息、车辆信息、人员信息、保险条款及特别约定等关键内容。AI识别技术通过OCR、文档结构化解析和数据校验,实现对保单信息的精准提取。然而,版式多样性、信息复杂性、图像质量和法律术语解析是主要挑战。Python代码示例展示了如何使用PaddleOCR进行保单信息抽取,并提出了定制化训练、版式分析等优化方向。典型应用场景包括智能录入、快速核保、理赔自动化等。未来将向多模态融合、自适应学习和跨区域兼容性发展。
|
9月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
516 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】

热门文章

最新文章

推荐镜像

更多
  • DNS