news 2026/7/17 17:00:15

简易html静态网页

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
简易html静态网页

成都文理学院实训平台:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 1500px; height: 1500px; } .box1{ width: 1500px; height: 100px; } .box12{ width: 400px; height: 100px; float: left; } .box13{ width: 250px; height: 100px; text-align: center; line-height: 100px; float: left; } .box14{ width: 250px; height: 100px; line-height: 100px; float: left; } .box15{ width: 250px; height: 100px; line-height: 100px; float: left; font-size: large; } .box15{ width: 250px; height: 100px; line-height: 100px; float: left; font-size: large; } .item{ width: 125px; height: 50px; margin-top: 21px; line-height: 35px; text-align: center; background-color: aqua; } .item2{ width: 125px; height: 50px; margin-top: 21px; line-height: 35px; text-align: center; background-color: rgb(225, 81, 122); float: left; } .picture{ width: 1500px; height: 546px; } .gongkai{ width: 200px; height: 50px; } span{ font-size: xx-large; font-weight: 1000; } .class1{ width: 1500px; height: 300px; float: left; } .class2{ width: 1500px; height: 300px; float: left; } .class11{ width: 370px; height: 300px; float: left; } .class12{ width: 370px; height: 300px; float: left; } .class13{ width: 370px; height: 300px; float: left; } .class14{ width: 370px; height: 300px; float: left; } .class21{ width: 370px; height: 300px; float: left; } .class22{ width: 370px; height: 300px; float: left; } .class23{ width: 370px; height: 300px; float: left; } .class24{ width: 370px; height: 300px; float: left; } </style> </head> <body> <div class="box"> <div class="box1"> <div class="box12"><img src="https://s3.canghuikeji.com/upfiles/kmUUpz1Efzaqbq4Rajg9.png" alt=""></div> <div class="box13"> <b><big>首页</big></b> &nbsp;&nbsp;&nbsp; <b><big>全部课程</big></b> &nbsp;&nbsp; &nbsp; <b><big>公开课</big></b> &nbsp;&nbsp; &nbsp; </div> <div class="box14"> <input type="text" name="keyword" style="width: 150px;" placeholder="请输入课程名称" value="" class="inp"> <span class="icon"></span> <input type="submit" value=" " class="btn"> </div> <div class="box15"> <div class="item"><a href="/manage/index" class="btn1">教师登录</a></div> </div> <div class="16"> <div class="item2"><a href="/user/login" class="btn2">学生登录</a></div> </div> </div> <div class="picture"> <img width="1500px" src="./zxshixun.cdcas.com_ (1).png" ></div> <div class="gongkai"> <span> 公开课 </span> </div> <div class="class1"> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718615411292.png" alt=""><b><big><big>儿童口腔医学</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718694395881.jpg" alt=""><b><big><big>投资经济学</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718689537441.png" alt=""><b><big><big>玩具设计</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718766927847.jpg" alt=""><b><big><big>和声学</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> </div> <div class="class2"> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718676140846.png" alt=""><b><big><big>劳动教育</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718612937065.jpg" alt=""><b><big><big>投资学</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718778321619.jpg" alt=""><b><big><big>程光学</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> <div class="class11"><img width="375px" src="https://s3.canghuikeji.com/upfiles/1718764519828.jpg" alt=""><b><big><big>智能制造</big></big></b>&nbsp;&nbsp;&nbsp;&nbsp;成都文理学院实训平台</div> </div> </div> </body> </html>

实训平台登录界面:

<!DOCTYPE html> <html> <head> <title>成都文理学院登录</title> <style> .head{ width: 1500px; height: 100px; } .body{ width: 1500px; height: 800px; float: left; } .picture{ width: 800px; height: 560px; float: left; } .join{ background-image: url(https://zxshixun.cdcas.com/static/login/images/loginnew-box.jpg); width: 690px; height: 500px; text-shadow: 10px 10px 10px rgb(216, 196, 196); display: flex; align-items: center; justify-content: center; float: left; } </style> </head> <body> <div class="head"> <img src="https://s3.canghuikeji.com/upfiles/kmUUpz1Efzaqbq4Rajg9.png" alt=""></div> <div class="body"> <div class="picture"> <img width="800px" height="500px" src="https://zxshixun.cdcas.com/static/login/images/loginnew-img.jpg" alt=""></div> <div class="join"> <form action=""> <h2>学生登录</h2> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> </div> </div> </body> </html>
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/17 16:59:19

Vue3中customRef详解

Vue3中customRef详解1. 核心概念与工作原理2. 为什么需要 customRef&#xff1f;3. 常见应用场景与代码示例场景一&#xff1a;实现防抖 Ref&#xff08;最经典用例&#xff09;场景二&#xff1a;实现带验证的 Ref场景三&#xff1a;LocalStorage 同步 Ref场景四&#xff1a;异…

作者头像 李华
网站建设 2026/7/17 16:58:25

高级调试指南:PyTorch Elastic常见故障排除与性能优化终极教程

高级调试指南&#xff1a;PyTorch Elastic常见故障排除与性能优化终极教程 【免费下载链接】elastic PyTorch elastic training 项目地址: https://gitcode.com/gh_mirrors/ela/elastic PyTorch Elastic是PyTorch分布式弹性训练框架的核心组件&#xff0c;它允许深度学习…

作者头像 李华
网站建设 2026/7/17 16:58:05

情感 AI 的多模态对话架构:文本、语音与表情信号的协同推理设计

情感 AI 的多模态对话架构&#xff1a;文本、语音与表情信号的协同推理设计 一、单一文本通道的情感识别局限 AI 情感陪伴产品仅通过文本判断用户情绪时&#xff0c;准确率在 72% 左右。"我今天还好"这句话&#xff0c;平静状态下是真实表达&#xff0c;焦虑状态下是…

作者头像 李华
网站建设 2026/7/17 16:54:51

Shiply Kuikly动态化适用场景解析

Shiply Kuikly动态化适用场景解析 在移动端存量竞争加剧的当下&#xff0c;业务对"快速迭代"与"原生级体验"的双重诉求日益尖锐。H5、React Native、Flutter 等已有方案各自尝试破局&#xff1a;H5 开发快却普遍带有"白屏感"&#xff0c;严重拖累…

作者头像 李华
网站建设 2026/7/17 16:54:31

Cantera输运性质计算:气体、液体与等离子体输运模型全解析

Cantera输运性质计算&#xff1a;气体、液体与等离子体输运模型全解析 【免费下载链接】cantera Chemical kinetics, thermodynamics, and transport tool suite 项目地址: https://gitcode.com/gh_mirrors/ca/cantera Cantera是一款强大的化学动力学、热力学和输运性质…

作者头像 李华
网站建设 2026/7/17 16:51:43

Codex AI编程助手核心能力与工程实践指南

1. Codex 核心能力解析Codex作为AI编程辅助工具的代表作&#xff0c;其核心价值在于将自然语言理解与代码生成能力深度融合。不同于传统代码补全工具仅能提供片段级建议&#xff0c;Codex具备完整的上下文理解能力——它能解析开发者注释中的业务逻辑描述&#xff0c;自动生成符…

作者头像 李华