静态网页设计——校园官网(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
具体的代码也在该链接下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解析为什么Go语言要使用[]rune而不是string来表示中文字符

众所周知&#xff0c;Go语言中有以下这些数据类型。但rune32这个go语言特有的数据类型&#xff0c;比较有意思却经常遭到忽视。所以今天探索学习一下这个数据类型的功能、用法。 Go基本数据类型 布尔&#xff1a;bool 字符串&#xff1a;string 整数&#xff1a; int int8 …

GitHub项目推荐:IDE-3D

项目地址 GitHub - MrTornado24/IDE-3D: [SIGGRAPH Asia 2022] IDE-3D: Interactive Disentangled Editing For High-Resolution 3D-aware Portrait Synthesisx 项目简述 这是一个交互式的3D画图工具。无论是改图还是成图&#xff0c;都能使用。是一个很有意思的项目。 项目…

安卓和Android是两种不同的操作系统?

实际上&#xff0c;安卓和Android并不是同一种操作系统&#xff01; Android是由Google开发并维护更新的一款操作系统&#xff0c;目前仅能运行在Pixel手机上。 Google Pixel 与 iPhone手机&#xff1a;哪个更好&#xff1f;Google Pixel 与 Apple iPhone哪个手机才是性价比最…

(1)(1.13) SiK无线电高级配置(一)

文章目录 前言 1 监控链接质量 2 诊断范围问题 3 MAVLink协议说明 前言 本文提供 SiK 遥测无线电(SiK Telemetry Radio)的高级配置信息。它面向"高级用户"和希望更好地了解无线电如何运行的用户。 &#xff01;Tip 大多数用户只需要 SiK Radio v2 中提供的基本…

74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

三段式电流保护与自动重合闸MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 前加速、后加速的区别&#xff1a; 前加速是保护装置不判别是永久性故障还是瞬时故障&#xff0c;直接跳闸&#xff0c;然后经重合闸装置来纠正&#xff1b;后加速是保护装置是先判别故障类型有选择性跳闸 …

对话惠买集团董事长兼CEO杜瑞勇:直播电商粗放时代结束,如何用AI+XR打造精细化的智慧直播生态?

“ 未来将是专业选手精细化运营的智慧直播时代。“ 整理 | 梦婕 编辑 | 渔舟 出品&#xff5c;极新&#xff06;北京电子商务协会 直播电商在经过爆发式增长后&#xff0c;从业者不断涌入&#xff0c;竞争日趋激烈&#xff0c;行业发展必然将会进入到一个缓慢增长阶段。直播…

MySQL自定义时间间隔抽稀

MySQL自定义时间间隔抽稀 表设计数据如下按分钟抽稀按小时抽稀按天抽稀 表设计 create table monitor (tid varchar(255) not null,save_date datetime not null,tlevel decimal(10, 2) null,primary key (tid, save_date) );数据如下 按分钟抽稀 SELECT t2…

D50|单调栈

739.每日温度 初始思路&#xff1a; 暴力解法但是会超时。 class Solution {public int[] dailyTemperatures(int[] temperatures) {int[] answer new int[temperatures.length];for(int i 0;i<temperatures.length;i){for(int j i;j<temperatures.length;j){if(te…

FS4412系统移植及开发板启动过程

FS4412是基于samsung的arm Cortex-A9的Exynos4412的板子&#xff0c;Exynos4412采用了32nm HKMG工艺&#xff0c;是samsung的第一款四核芯片。 Windows装机过程&#xff1a; 1、准备Windows系统镜像、U盘启动盘 2、进入BIOS选择启动方式&#xff08;U盘启动&#xff09; 3、…

使用valgrind 分析缓存命中

使用valgrind 分析缓存命中 char transpose_submit_desc[] "Transpose submission"; void transpose_submit(int M, int N, int A[N][M], int B[M][N]) { int i,j,tmp;int bsize 8;unsigned long long addrA;unsigned long long addrB;unsigned long long setin…

C++第四天

定义一个Person类&#xff0c;私有成员int age&#xff0c;string &name&#xff0c;定义一个Stu类&#xff0c;包含私有成员double *score&#xff0c;写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数&#xff0c;完成对Person的运算符重载(算术运算符、条件运算…

CentOS7部署Kafka

CentOS7部署Kafka 一、部署1、前置条件2、下载与解压3、修改配置4、启动kafka二、使用详解1、创建一个主题2、展示所有主题3、启动消费端接收消息4、生产端发送消息三、代码集成pom.xmlapplication.propertiesKafkaConfiguration.javaKafkaConsumer.javaKafkaProducer.javaVehi…

Java 将Excel转换为TXT文本格式

TXT文件是一种非常简单、通用且易于处理的文本格式。在处理大规模数据时&#xff0c;将Excel转为TXT纯文本文件可以提高处理效率。此外&#xff0c;许多编程语言和数据处理工具都有内置的函数和库来读取和处理TXT文件&#xff0c;因此将Excel文件转换为TXT还可以简化数据导入过…

可狱可囚的爬虫系列课程 08:新闻数据爬取实战

前言 本篇文章中我带大家针对前面所学 Requests 和 BeautifulSoup4 进行一个实操检验。 相信大家平时或多或少都有看新闻的习惯&#xff0c;那么我们今天所要爬取的网站便是新闻类型的&#xff1a;中国新闻网&#xff0c;我们先来使用爬虫爬取一些具有明显规则或规律的信息&am…

系列六、RestTemplate

一、RestTemplate 1.1、概述 RestTemplate是一种便捷的访问RestFul服务的模板类&#xff0c;是Spring提供的用于访问Rest服务的客户端模板工具集&#xff0c;它提供了多种便捷访问远程HTTP服务的方法。 1.2、API https://docs.spring.io/spring-framework/docs/5.2.2.RELEASE…

【MFC】计算机图形学实验:熟悉开发环境及工具(代码)

实验内容&#xff1a; 【MFC】计算机图形学实验1&#xff1a;熟悉开发环境及工具_绘制多义线mfc-CSDN博客 画笔和字体只给出两处代码&#xff1a; //创建刷子&#xff0c;设置填充色为黑色 CBrush NewBrush; NewBrush.CreateSolidBrush(RGB(0, 0, 0)); pDC->SelectObjec…

Spring动态定时任务异常Cron expression must consist of 6 fields

spring-context-5.3.24版本源码实例化CronTrigger 时判断了cron表达式长度必须是6&#xff0c;spring 4.x中已经不支持7个参数的cronin表达式了 解决方案&#xff1a; &#xff08;1&#xff09;使用别的定时框架 &#xff08;2&#xff09;如果涉及很多业务代码&#xff0c…

Apache Commons BCEL与Java字节码操作

第1章&#xff1a;Apache Commons BCEL简介 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊Apache Commons BCEL&#xff08;Byte Code Engineering Library&#xff09;。你可能会问&#xff0c;BCEL是什么鬼&#xff1f;别急&#xff0c;小黑这就给你娓娓道来。BCEL…

Window10 下同时安装 JDK8 和 JDK11

1、下载两个版本的JDK 从Oracle 官网下载两个版本的 JDK 文件到本地&#xff0c;官网下载地址&#xff1a;JDK 下载 | ORACLE 2、部署环境变量 为方便切换 JDK 版本&#xff0c;这里分别新建&#xff1a;JAVA_HOME、JAVA11_HOME 和 JAVA8_HOME 变量&#xff0c;配置内容如下…