当前位置: 首页 > news >正文

静态网页设计——校园官网(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>电 话:&nbsp;</p><p>联系人:&nbsp;</p><p>网址:&nbsp;</p><p>邮 箱:&nbsp;</p><p>地址:&nbsp;</p></div></div></div>
3、校园一交

展示学校的一些照片信息,用来展示学校的风貌,使用img标签实现。
在这里插入图片描述

4、其他

其他页面的组成结构都是类似的,这里不做详细说明了。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1zK411s7yu/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

相关文章:

静态网页设计——校园官网(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 使用技术&#xff1a;HTMLCSSJS 主要内容&#xff1a;对学校官网的结构进行模仿&#xff0c;对布局进行模仿。 主要内容 1、首页 首页以多个div对页面进行分割和布局…...

phpstudy_pro 关于多版本php的问题

我在phpstudy中安装了多个PHP版本 我希望不同的网站可以对应不同的PHP版本&#xff0c;则在nginx配置文件中需要知道不同的PHP版本的监听端口是多少&#xff0c;如下图所示 然而找遍了php.ini配置&#xff0c;并未对listen进行设置&#xff0c;好奇是怎么实现不同的PHP监听不同…...

TemporalKit的纯手动安装

最近在用本地SD安装temporalkit插件 本地安装插件最常见的问题就是&#xff0c;GitCommandError:… 原因就是&#xff0c;没有科学上网&#xff0c;而且即使搭了ladder&#xff0c;在SD的“从网址上安装”或是“插件安装”都不行&#xff0c;都不行&#xff01;&#xff01;&am…...

人生重开模拟器

前言&#xff1a; 人生重开模拟器是前段时间非常火的一个小游戏&#xff0c;接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏&#xff1a; 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 &#xff08;1&#xff09; 游戏开始的时…...

优化算法3D可视化

编程实现优化算法&#xff0c;并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.魔术表演&#xff08;20分&#xff09; 评判标准&#xff1a; 4分&#xff1a;满足"具体要求"中的1&#xff09;&#xff1b; 8分&#xff1a;满足"具体要求"中的2&#xff09;&#xff1b; 8分&#xff0c;满足"具体要求"中的3&#xff09…...

LLM 中的长文本问题

近期,随着大模型技术的发展,长文本问题逐渐成为热门且关键的问题,不妨简单梳理一下近期出现的典型的长文本模型: 10 月上旬,Moonshot AI 的 Kimi Chat 问世,这是首个支持 20 万汉字输入的智能助手产品; 10 月下旬,百川智能发布 Baichuan2-192K 长窗口大模型,相当于一次…...

深入了解Swagger注解:@ApiModel和@ApiModelProperty实用指南

在现代软件开发中&#xff0c;提供清晰全面的 API 文档 至关重要。ApiModel 和 ApiModelProperty 这样的代码注解在此方面表现出色&#xff0c;通过增强模型及其属性的元数据来丰富文档内容。它们的主要功能是为这些元素命名和描述&#xff0c;使生成的 API 文档更加明确。 Api…...

Linux学习第48天:Linux USB驱动试验:保持热情,保持节奏,持续学习是作为一个技术人员应有的基本素质和要求

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 最近更新的速度和频率大不如以前&#xff0c;主要原因还是自己有些懈怠了。学习是一个持续努力的过程&#xff0c;一旦中断&#xff0c;再想保持以往的状态可能要…...

数据库索引简析

文章目录 前言一、索引是什么二、索引的有什么用三、索引的分类四、索引的数据结构总结 前言 在我们使用数据库的过程中&#xff0c;往往会碰到一个叫做索引的东西&#xff0c;不管是表的设计&#xff0c;还是数据库性能的优化往往都会涉及到索引。那么他是个什么东西&#xff…...

leetcode贪心(单调递增的数字、监控二叉树)

738.单调递增的数字 给定一个非负整数 N&#xff0c;找出小于或等于 N 的最大的整数&#xff0c;同时这个整数需要满足其各个位数上的数字是单调递增。 &#xff08;当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。&#xff…...

如何在win7同样支持Webview2 在 WPF 中使用本地 Webview2 ,如何不依赖系统 Runtime

项目运行环境&#xff1a; .Net Framework 4.5.2 Windows 7 x64 Service Pack 1 WebView2 Microsoft.WebView2.FixedVersionRuntime.120.0.2210.91.x64 考虑到很多老项目&#xff0c;本项目使用的是.Net Framework 4.5.2&#xff0c;.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、配置国标…...

技术发展驱动编程语言走向

未来编程语言的走向可能会受到多种因素的影响&#xff0c;包括技术进步、市场需求、开发人员的偏好和生态系统的演变等。以下是一些可能的发展趋势&#xff1a; 简洁性和易用性 随着技术的进步&#xff0c;编程语言可能会变得越来越简洁和易于使用。一些语言可能会引入更高级的…...

tp5+workman(GatewayWorker) 安装及使用

一、安装thinkphp5 1、宝塔删除php禁用函数putenv、pcntl_signal_dispatch、pcntl_wai、pcntl_signal、pcntl_alarm、pcntl_fork&#xff0c;执行安装命令。 composer create-project topthink/think5.0.* tp5 --prefer-dist 2、配置好站点之后&#xff0c;浏览器打开访问成…...

vscode安装Prettier插件,对vue3项目进行格式化

之前vscode因为安装了Vue Language Features (Volar)插件&#xff0c;导致Prettier格式化失效&#xff0c;今天有空&#xff0c;又重新设置了一下 1. 插件要先安装上 2. 打开settings.json {"editor.defaultFormatter": "esbenp.prettier-vscode","…...

macOS跨进程通信: XPC 创建实例

一&#xff1a;简介 XPC 是 macOS 里苹果官方比较推荐和安全的的进程间通信机制。 集成流程简单&#xff0c;但是比较绕。 主要需要集成 XPC Server 这个模块&#xff0c;这个模块最终会被 apple 的根进程 launchd 管理和以独立进程的方法唤起和关闭&#xff0c; 我们主app 进…...

Ubuntu18.04 升级Ubuntu20.04

文章目录 背景升级方法遇到的问题 背景 因项目环境需要&#xff0c;欲将Ubuntu18.04升级至Ubuntu20.04&#xff0c;参考网上其他小伙伴的方法&#xff0c;也遇到了一个问题&#xff0c;特此记录一下&#xff0c;希望能帮助其他有同样问题的小伙伴。 升级方法 参考&#xff1a…...

自动化测试怎么做?看完你就懂了。。。

前言 我想应该有很多测试人员应该有这样的疑虑&#xff0c;自动化测试要怎么去做&#xff0c;现在我把自己的一些学习经验分享给大家&#xff0c;希望对你们有帮助&#xff0c;有说的不好的地方&#xff0c;还请多多指教&#xff01; 对于测试人员来说&#xff0c;不管进行功…...

小秋SLAM入门实战opencv所有文章汇总

opencv_core和 opencv_imgcodecs是 OpenCV&#xff08;开源计算机视觉库&#xff09;的两个主要模块 【如何使用cv::erode()函数对图像进行腐蚀操作】 头文件用途 用OpenCV创建一张类型为CV_8UC1的单通道随机灰度图像 用OpenCV创建一张灰度黑色图像并设置某一列为白色 OpenCV创…...

2023年终总结(脚踏实地,仰望星空)

回忆录 2023年&#xff0c;经历非常多的大事情&#xff0c;找工作、实习、研究生毕业、堂哥结婚、大姐买车、申博、读博、参加马拉松&#xff0c;有幸这一年全家人平平安安&#xff0c;在稳步前进。算是折腾的一年&#xff0c;杭州、赣州、武汉、澳门、珠海、遵义来回跑。完成…...

Transforer逐模块讲解

本文将按照transformer的结构图依次对各个模块进行讲解&#xff1a; 可以看一下模型的大致结构&#xff1a;主要有encode和decode两大部分组成&#xff0c;数据经过词embedding以及位置embedding得到encode的时输入数据 输入部分 embedding就是从原始数据中提取出单词或位置&…...

macOS进程间通信的常用技术汇总

macOS进程间通信的常用技术汇总 命令行传参。yyds管道(pipe), 匿名管道&#xff0c; c的技术&#xff0c;可以跨平台使用 只能在父子进程间通信&#xff0c;由于是单向的管道&#xff0c;只能单方面传输数据。 如果需要双向传输&#xff0c;需要建立双向的两条管道才行 匿名管…...

高德地图信息窗体设置

1. 添加默认信息窗体 //构建信息窗体中显示的内容var info [];info.push(<div style"height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置&#xff1a;北京</div>);info.push(<div style"height: 36px; line-heig…...

isEmpty 和 isBlank 的用法区别,居然一半的人答不上来.....

isEmpty 和 isBlank 的用法区别 isEmpty系列isBank系列 hi&#xff01;我是沁禹&#xff5e; 也许你两个都不知道,也许你除了isEmpty/isNotEmpty/isNotBlank/isBlank外,并不知道还有isAnyEmpty/isNoneEmpty/isAnyBlank/isNoneBlank的存在, come on ,让我们一起来探索org.apache…...

数据分析求职-简历准备

简历在整个求职过程中的重要性不言而喻&#xff0c;今天咱们来聊求职过程中简历准备的那些事儿~ 1. 简历究竟有啥用 求职的流程简单说就是&#xff1a;网申->笔试->面试->offer 其中网申环节&#xff0c;简历100%决定了你的通过与否&#xff0c;这个点大家都知道。…...

亚马逊店铺遇到账号申诉模版分享

1.表达诚意&#xff0c;先认错再说&#xff1a;我知道&#xff0c;最近我们在Amazon.com上作为卖家的表现已经低于亚马逊和我们自己的质量标准。 2.清楚分明的格式&#xff1a;我们库存管理的混乱导致了延迟发货&#xff0c;更糟糕的是&#xff0c;物品无法使用。当延迟发货和…...

2023年广东省网络安全A模块(笔记详解)

模块A 基础设施设置与安全加固 一、项目和任务描述&#xff1a; 假定你是某企业的网络安全工程师&#xff0c;对于企业的服务器系统&#xff0c;根据任务要求确保各服务正常运行&#xff0c;并通过综合运用登录和密码策略、流量完整性保护策略、事件监控策略、防火墙策略等多…...

竞赛保研 基于机器视觉的银行卡识别系统 - opencv python

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的银行卡识别算法设计 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…...

中国最大免费h5游戏源码网站/百度云盘登录入口

因为Mac系统是基于UNIX系统的&#xff0c;因此可以在“终端”中输入一些UNIX指令来操作Mac系统。比如&#xff1a;新建文件\文件夹、打开文件\文件夹 常用的UNIX指令&#xff1a;(需要经常使用才不容易忘记) ls –l列出当前目录下的所有内容&#xff08;文件\文件夹&#xff09…...

asp.net.做简单的网站/网络推广公司运作

//C string 函数列表【 C string|C string所有的成员函数】/*----------------------------------------- begin 得到指向字符串开头的Iterator end 得到指向字符串结尾的Iterator rbegin 得到指向反向字符串开头的Iterator rend 得到指向反向字符串结尾的Iterator …...

男女做那事是什 网站/网站网络优化外包

Context initial new InitialContext(); Object objref initial.lookup("java:comp/env/ejb/SimpleConverter"); 一般情况下&#xff0c;intial.lookup("")中的参数就是你的JNDI名称。但是用的应用服务器&#xff0c;是把JNDI名放到java:comp/env/ej…...

网站建设pdf 下载/seo优化排名易下拉软件

Hash Identifier可以用来识别各种类型的哈希值。在kali上使用方法很简单 &#xff08;1&#xff09;搜索hash-identifier &#xff08;2&#xff09;在HASH后面输入要识别的hash内容 &#xff08;3&#xff09;识别成功 windows平台上这款工具&#xff0c;效果都差不多。...

开服网站建设/厦门seo计费

题目&#xff1a; 给定 n 个非负整数 a1&#xff0c;a2&#xff0c;...&#xff0c;an&#xff0c;每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线&#xff0c;垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线&#xff0c;使得它们与 x 轴共同构成…...

推荐网站建设品牌/三亚百度推广公司电话

1、java.lang.Runtime.getRuntime().availableProcessors() Returns the number of processors available to the Java virtual machine&#xff1b;返回JVM上可用的CPU个数 转载于:https://www.cnblogs.com/zhi-leaf/p/10486188.html...