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

静态网页设计——校园官网（HTML+CSS+JavaScript）

news 2025/8/21 3:50:14

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！

使用技术：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>