静态网页设计——校园官网(HTML+CSS+JavaScript)
前言
声明:该文章只是做技术分享,若侵权请联系我删除。!!
使用技术:HTML+CSS+JS
主要内容:对学校官网的结构进行模仿,对布局进行模仿。
主要内容
1、首页
首页以多个div对页面进行分割和布局,背景颜色使用红色,显得官网比较喜庆。

首页最上方才用li标签和css进行样式设计,编写出一个横向排列的菜单。

往下走,使用js实现动态的轮播图效果。

最后,在首页下方,对学校的一些文字信息进行展示。

代码如下:
<div style="width:100%" class="clearfix"><h1 id="logo">飘嫖缥漂艺术培训学校</h1></div><div id="nav"><ul class="clearfix"><li class="cur"><a href="index.html">首页</a></li><li><a href="brief.html">中心简介</a></li><li><a href="jiao.html">校园一角</a></li><li><a href="zhao.html">招生简章</a></li><li><a href="artlist.html">作品展示</a></li><li><a href="list.html">招生动态</a></li><li><a href="bao.html">在线报名</a></li><li><a href="contact.html">联系我们</a></li></ul></div></div>
2、中心简介
中心简介界面对学校的发展历史进行详细描述。

左侧使用li标签实现了动态信息和联系我们。

代码如下:
<div id="sidebar"><div class="mod newsMod"><div class="hd"><h2>动态信息</h2></div><div class="bd"><ul><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li><li>· <a href="detail.html">飘嫖缥漂艺术培训学校</a></li></ul></div></div><div class="mod contactMod"><div class="hd"><h2>联系我们</h2></div><div class="bd"><p>电 话: </p><p>联系人: </p><p>网址: </p><p>邮 箱: </p><p>地址: </p></div></div></div>
3、校园一交
展示学校的一些照片信息,用来展示学校的风貌,使用img标签实现。

4、其他
其他页面的组成结构都是类似的,这里不做详细说明了。





总结
想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1zK411s7yu/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。
相关文章:
静态网页设计——校园官网(HTML+CSS+JavaScript)
前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 使用技术:HTMLCSSJS 主要内容:对学校官网的结构进行模仿,对布局进行模仿。 主要内容 1、首页 首页以多个div对页面进行分割和布局…...
phpstudy_pro 关于多版本php的问题
我在phpstudy中安装了多个PHP版本 我希望不同的网站可以对应不同的PHP版本,则在nginx配置文件中需要知道不同的PHP版本的监听端口是多少,如下图所示 然而找遍了php.ini配置,并未对listen进行设置,好奇是怎么实现不同的PHP监听不同…...
TemporalKit的纯手动安装
最近在用本地SD安装temporalkit插件 本地安装插件最常见的问题就是,GitCommandError:… 原因就是,没有科学上网,而且即使搭了ladder,在SD的“从网址上安装”或是“插件安装”都不行,都不行!!&am…...
人生重开模拟器
前言: 人生重开模拟器是前段时间非常火的一个小游戏,接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏: 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 (1) 游戏开始的时…...
优化算法3D可视化
编程实现优化算法,并3D可视化 1. 函数3D可视化 分别画出 和 的3D图 import numpy as np from matplotlib import pyplot as plt import torch# 画出x**2 class Op(object):def __init__(self):passdef __call__(self, inputs):return self.forward(inputs)def for…...
魔术表演Scratch-第14届蓝桥杯Scratch省赛真题第1题
1.魔术表演(20分) 评判标准: 4分:满足"具体要求"中的1); 8分:满足"具体要求"中的2); 8分,满足"具体要求"中的3)…...
LLM 中的长文本问题
近期,随着大模型技术的发展,长文本问题逐渐成为热门且关键的问题,不妨简单梳理一下近期出现的典型的长文本模型: 10 月上旬,Moonshot AI 的 Kimi Chat 问世,这是首个支持 20 万汉字输入的智能助手产品; 10 月下旬,百川智能发布 Baichuan2-192K 长窗口大模型,相当于一次…...
深入了解Swagger注解:@ApiModel和@ApiModelProperty实用指南
在现代软件开发中,提供清晰全面的 API 文档 至关重要。ApiModel 和 ApiModelProperty 这样的代码注解在此方面表现出色,通过增强模型及其属性的元数据来丰富文档内容。它们的主要功能是为这些元素命名和描述,使生成的 API 文档更加明确。 Api…...
Linux学习第48天:Linux USB驱动试验:保持热情,保持节奏,持续学习是作为一个技术人员应有的基本素质和要求
Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 最近更新的速度和频率大不如以前,主要原因还是自己有些懈怠了。学习是一个持续努力的过程,一旦中断,再想保持以往的状态可能要…...
数据库索引简析
文章目录 前言一、索引是什么二、索引的有什么用三、索引的分类四、索引的数据结构总结 前言 在我们使用数据库的过程中,往往会碰到一个叫做索引的东西,不管是表的设计,还是数据库性能的优化往往都会涉及到索引。那么他是个什么东西ÿ…...
leetcode贪心(单调递增的数字、监控二叉树)
738.单调递增的数字 给定一个非负整数 N,找出小于或等于 N 的最大的整数,同时这个整数需要满足其各个位数上的数字是单调递增。 (当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时,我们称这个整数是单调递增的。ÿ…...
如何在win7同样支持Webview2 在 WPF 中使用本地 Webview2 ,如何不依赖系统 Runtime
项目运行环境: .Net Framework 4.5.2 Windows 7 x64 Service Pack 1 WebView2 Microsoft.WebView2.FixedVersionRuntime.120.0.2210.91.x64 考虑到很多老项目,本项目使用的是.Net Framework 4.5.2,.Net 更高版本的其实也是可以支持的。 …...
【docker】网络模式管理
目录 一、Docker网络实现原理 二、Docker的网络模式 1、host模式 1.1 host模式原理 1.2 host模式实操 2、Container模式 2.2 container模式实操 3、none模式 4、bridger模式 4.1 bridge模式的原理 4.2 bridge实操 5、overlay模式 6、自定义网络模式 6.1 为什么需要…...
LiveGBS国标GB/T28181流媒体平台功能-国标级联中作为下级平台对接海康大华宇视华为政务公安内网等GB28181国标平台查看级联状态及会话
LiveGBS国标级联中作为下级平台对接海康大华宇视华为政务公安内网等GB28181国标平台查看级联状态及会话 1、GB/T28181级联是什么2、搭建GB28181国标流媒体平台3、获取上级平台接入信息3.1、如何提供信息给上级3.2、上级国标平台如何添加下级域3.2、接入LiveGBS示例 4、配置国标…...
技术发展驱动编程语言走向
未来编程语言的走向可能会受到多种因素的影响,包括技术进步、市场需求、开发人员的偏好和生态系统的演变等。以下是一些可能的发展趋势: 简洁性和易用性 随着技术的进步,编程语言可能会变得越来越简洁和易于使用。一些语言可能会引入更高级的…...
tp5+workman(GatewayWorker) 安装及使用
一、安装thinkphp5 1、宝塔删除php禁用函数putenv、pcntl_signal_dispatch、pcntl_wai、pcntl_signal、pcntl_alarm、pcntl_fork,执行安装命令。 composer create-project topthink/think5.0.* tp5 --prefer-dist 2、配置好站点之后,浏览器打开访问成…...
vscode安装Prettier插件,对vue3项目进行格式化
之前vscode因为安装了Vue Language Features (Volar)插件,导致Prettier格式化失效,今天有空,又重新设置了一下 1. 插件要先安装上 2. 打开settings.json {"editor.defaultFormatter": "esbenp.prettier-vscode","…...
macOS跨进程通信: XPC 创建实例
一:简介 XPC 是 macOS 里苹果官方比较推荐和安全的的进程间通信机制。 集成流程简单,但是比较绕。 主要需要集成 XPC Server 这个模块,这个模块最终会被 apple 的根进程 launchd 管理和以独立进程的方法唤起和关闭, 我们主app 进…...
Ubuntu18.04 升级Ubuntu20.04
文章目录 背景升级方法遇到的问题 背景 因项目环境需要,欲将Ubuntu18.04升级至Ubuntu20.04,参考网上其他小伙伴的方法,也遇到了一个问题,特此记录一下,希望能帮助其他有同样问题的小伙伴。 升级方法 参考:…...
自动化测试怎么做?看完你就懂了。。。
前言 我想应该有很多测试人员应该有这样的疑虑,自动化测试要怎么去做,现在我把自己的一些学习经验分享给大家,希望对你们有帮助,有说的不好的地方,还请多多指教! 对于测试人员来说,不管进行功…...
别再硬改CSS了!ElementUI el-table透明背景的3种正确姿势(含Vue2/Vue3避坑指南)
别再硬改CSS了!ElementUI el-table透明背景的3种正确姿势(含Vue2/Vue3避坑指南) 在深色主题或背景融合的现代Web应用中,ElementUI的el-table组件默认的白色背景常常成为视觉设计的绊脚石。许多开发者第一反应是直接修改CSS文件&am…...
为AI智能体构建持久化记忆系统:Shang Tsung项目实战解析
1. 项目概述:为AI智能体注入“灵魂”与“第二大脑”如果你和我一样,长期与各类AI智能体(Agent)打交道,无论是基于Claude Code、OpenClaw,还是其他本地化部署的LLM工具,你一定经历过那种令人沮丧…...
2026年AI模型API中转站大排名!解析各平台优势,为企业与开发者精准选型
2026年5月,在中国广州,随着AI大模型技术不断迭代并在各产业全面落地,企业级API中转服务市场已步入成熟竞争阶段。技术稳定性、场景适配度以及综合性价比成为企业选择API中转站时的核心考量因素。近日,行业第三方评测机构发布了《2…...
设计师连夜删稿的真相:Onion Skin未启用导致版本错位!3分钟紧急修复+历史帧自动锚定脚本
更多请点击: https://intelliparadigm.com 第一章:设计师连夜删稿的真相:Onion Skin未启用导致版本错位!3分钟紧急修复历史帧自动锚定脚本 当动画师在 Toon Boom Harmony 或 Adobe Animate 中反复导出“看似正确”的中间帧&#…...
【Leona】BoxId 是什么-设备指纹参数
BoxId 是什么?从 Leona.sense() 到 /v1/verdict 的可落地闭环:签名、落库、错误处理与回归验证(基于公开示例) TL;DR BoxId 不是“风险结论”,而是一次“证据报告兑换券”:端上拿 BoxId,后端换证…...
集合进阶(Collection)
一、集合概述和分类1.1 集合的分类如下图所示:一类是单列集合元素是一个一个的,另一类是双列集合元素是一对一对的。 主要学习Collection单列集合。Collection是单列集合的根接口,也称之为顶层接口,Collection接口下面又有两个子接…...
别再为Modbus RTU超时头疼了!STM32CubeMX+FreeModbus从站移植,搞定串口与定时器配置的黄金法则
STM32CubeMXFreeModbus从站移植实战:破解RTU超时难题的工程化思维 当你在深夜调试Modbus RTU从站设备,串口调试助手反复弹出"Timeout"错误提示时,那种挫败感每个嵌入式工程师都深有体会。超时问题就像幽灵般难以捉摸——代码编译通…...
从零构建现代化个人作品集网站:技术选型、架构设计与性能优化实战
1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目,叫“YasirAwan4831/arch-technologies-internship-task-1-portfolio-website”。光看这个仓库名,信息量其实不小。这明显是一个实习生的任务项目,来自一家叫“Arch Technologies…...
别再傻傻分不清了!VB、VBS、VBA到底该用哪个?从Excel自动化到网页脚本的实战选择指南
VB、VBS与VBA实战指南:从Excel自动化到系统脚本的精准选择 每次打开Excel准备处理数据时,你是否纠结过该用VBA还是VBS?当需要批量重命名文件时,是否犹豫过VB和VBS哪个更高效?这三种看似相似的"VB系"语言&am…...
开源工具any2card:任意格式内容智能转换结构化卡片实战指南
1. 项目概述:从“任意格式”到“卡片”的智能转换革命最近在折腾个人知识库和内容管理时,我遇到了一个老生常谈但又无比棘手的问题:信息格式的碎片化。我的资料散落在各处,有PDF论文、网页文章、TXT笔记、甚至是一些图片里的文字。…...
