静态网页高仿正方教育系统网页（HTML+CSS）
2024-06-22 20:33:54
今天来给大家分享一下高仿正方教育系统的首页，先来看看要模仿的网页！
原图
效果图
接下来上高仿的静态页面效果图：
代码
废话不多说，下面直接上硬核内容：
<!--* @Author: OriginalCoder* @Date: 2020-09-23 14:12:55* @version: * @LastEditTime: 2020-09-23 19:14:18* @LastEditors: OriginalCoder* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>XXXXXXX教学信息服务平台</title><style type="text/css">body {background: #fafafa;}a {text-decoration: none;}p {padding: 0 15px;}/* 自动适应屏幕宽度 *//* @media screen and (max-width: 1599px) and (min-width: 1440px){.all{width: 1170px !important;}} */.all {/* display: flex;flex-direction: column; */padding-right: 200px;padding-left: 137px;margin-right: auto;margin-left: auto;}.row {padding-left: 15px;padding-right: 15px;}.top-content *{/* 文字在图片后面居中对齐 */display:inline-block;vertical-align: middle;padding: 20px 0 30px 0;/* left: 120px; */}.container {width: 1160px;height: 520px;margin: 0 auto;display: flex;border: 4px solid #ededed;border-radius: 4px;background: #f5f5f5;}.edu-system-title {font-size: 24px;color: #1069a4;}.middle-left {float: left;}.middle-right {float: right;width: 400px;height: 520px;padding-left: 20px;color: #333;font-size: 14px;box-sizing: border-box;margin: 0;font-weight: normal;background-color: rgba(255, 255, 255, 0.7);padding: 15px;}.form-group {color: #333;font-size: 14px;font-weight: normal;box-sizing: border-box;margin-bottom: 8px !important;margin: 0px 0px 15px;padding-left: 15px;padding-right: 15px;}.input-group {color: #333;font-size: 14px;font-weight: normal;box-sizing: border-box;position: relative;display: table;border-collapse: separate;}.input-group-addon {font-size: 14px;box-sizing: border-box;display: table-cell;width: 1%;white-space: nowrap;vertical-align: middle;font-size: 14px;font-weight: normal;line-height: 1;color: #555;text-align: center;border: 1px solid #ccc;border-radius: 4px;padding: 4px 18px;border-right: 0;background: #fff;}.form-control {font-size: 14px;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;line-height: 28px;padding: 0 5px;height: 30px;position: relative;z-index: 2;float: left;width: 96%;margin-bottom: 0;}#secret {float: right;line-height: 30px;}.btn {width: 320px;height: 30px;background: #0076c1;border: 1px solid rgba(0, 0, 0, 0.05);border-radius: 5px;box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);color: #fff;text-decoration: none;}.tips {background-color: #f2dede;width: 310px;height: auto;line-height: 22px;border: 1px solid transparent;color: #a94442;border-color: #ebccd1;border-radius: 10px;margin: 40px 20px 10px 20px;}.footer {left: 0;right: 0;bottom: 0;font-size: 12px;color: #8099af;text-align: center;}.sl_log_ewm {display: flex;padding: 30px 20px 20px 20px;}</style></head><body><div class="all"><div class="top-content"><imgsrc="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/logo/logo_jw_d.png"alt=""/><span class="edu-system-title">XXXXXXX教学信息服务平台</span></div><div class="container"><div class="middle-left row"><imgsrc="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/login_bg_pic.jpg"alt=""style="background-size: 100% 100%"/></div><div class="middle-right row"><form action=""><input type="hidden" /><div><div class="tab-pane"><h2>用户登录</h2><div class="form-group"><div class="input-group"><div class="input-group-addon"><imgsrc="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/log_ic01.png"alt=""width="16"height="16"/></div><inputtype="text"class="form-control"placeholder="用户名"autocomplete="off"/></div></div><div class="form-group"><div class="input-group"><div class="input-group-addon"><imgsrc="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/log_ic02.png"alt=""width="16"height="16"/></div><input type="password" style="display: none" /><inputtype="text"class="form-control"placeholder="密码"onfocus="this.type='password'"/></div><input type="password" style="display: none" /></div><div class="form-group" id="secret"><a href="" target="blank">忘记密码？</a></div><div class="form-group"><button type="button" class="btn">登录</button></div><div class="tips"><p>1：学生账号为学号，教职工账号为职工号，初始密码均为证件号码后六位<br>2：密码忘记请联系学院的教学秘书或辅导员</p></div><div class="sl_log_ewm"><imgsrc="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/login_ewm.gif"width="90"height="90"/> <div style="margin-top: 30px">用手机扫一扫,<br />安全、便捷登录</div></div></div></div></div></form></div></div></div><div id="footerID" class="footer"><p>版权所有© Copyright 1999-2017正方软件股份有限公司 中国·杭州西湖区紫霞街176号互联网创新创业园2号301</p></div></div></body>
</html>其他
前端入门菜鸟写的代码，难免有些不合理之处，还望见解！如有不正确之处，烦请指出，鄙人感激不尽！！
静态网页高仿正方教育系统网页（HTML+CSS）相关推荐
- 在线教育系统网页版，观看视频直播功能更多，更适合用户学习
与传统教育相比,线上教育是一种更符合如今社会大背景的教育模式,在强大的互联网技术的支撑下,让教育与学习突破时间与空间的限制,更具开放性.交互性.自主性的优势,且根据系统平台的不同功能,又能实现教育的异 ...
- 高仿英雄联盟游戏网页制作作业 英雄联盟LOL游戏HTML网页设计模板 简单学生网页设计 静态HTML CSS网站制作成品
- html/京东项目/京东网页高仿/js/jq/css/java web/
登录部分HTML+CSS: <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- 我的大学期末网页作业 仿学校网站制作实现 HTML+CSS西北大学新闻网带psd带js
- 雨林木风 发布高仿XP系统
雨林木风在2009/12/24平安夜发布高仿XP,系统.目前:www.ylmf.org已提供下载,有兴趣的朋友可以下载试试看看,待本人测试完成后再上传图片,希望不要让人失望. Ylmf OS 详细特性 ...
- Win7系统网页视频无法播放怎么办
Win7系统网页视频无法播放怎么办?最近有Win7系统用户反映,网页视频无法播放,用户反复试了几次,结果都一样,这让用户非常苦恼.那么Win7系统网页视频无法播放怎么办呢?下面就和小编一起来看看详细的 ...
- 基于SSM红色教育系统的设计与实现毕业设计源码211757
SSM红色教育系统的开发 摘 要 红色文化在高校廉政文化建设中具有重要价值,为高校廉政文化建设提供了本源性优质资源和优秀文化根基,提供了正确的价值观导问.积极挖掘和深入研究红色文化资源,运用红色文化研 ...
- android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
- HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodej ...
最新文章
- mysql3.0数据库修复_mysql3.0监控mysql数据库
- Android之EventBus框架源码解析下（源码解析）
- [树状数组] Inverse
- 做后台支付系统，你要注意这些！！！
- python pandas中关于DataFrame行，列显示不完全（省略）的解决办法
- [云炬创业学笔记]第三章商业创意的发掘与评估测试5
- SaltStack安装Redis-第十篇
- 如何为 Horizon View 配置 VMware VSAN？
- mapreduce原理_Hbase Bulkload 原理面试必备
- 网钛CMS PHP版蓝色响应式UI美化模板
- php 正则表达式 匹配 字符串,PHP 字符串与正则表达式匹配
- 程序员代码面试指南：IT名企算法与数据结构题目最优解（第2版） 左程云
- 关于游戏开发流程解析
- java程序员的电脑配置_JAVA程序员笔记本电脑推荐？
- 获取路由器内的ADSL上网账号和密码或者获取电脑内的ADSL上网账号和密码教程(by 星空武哥)
- allure报告本地执行，显示趋势图
- java.lang.NoClassDefFoundError: javax/servlet/http/HttpServlet
- 有趣的java代码_求一些有趣的java小程序?
- windows中显示文件后缀名
- Markdown - Emoji表情大全