【html网页页面009】html+css制作学校官网主题网页制作含登录（5页面附效果及源码）

校园网站主题网页制作

🥤1、写在前面
🍧2、涉及知识
🌳3、网页效果
🌈4、网页源码
- 4.1 html
- 4.2 CSS
- 4.3 源码获取
- - w034学校网页源码及介绍链接
🐋5、作者寄语

🥤1、写在前面

学校网站主题的网页一共5个页面

网页使用html+css制作
页面可以相互跳转包含图文、菜单列表页面、表单页面
含登录页面等
网页可以使用vscode hbuilder dw等打开修改
里面的图片和文字都可以替换为其他内容
html静态网页没有复杂效果布局简单原创html网页设计适合当作业使用
设计感强，要求质量审美的可以观摩。

静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计,常用的网页设计软件有Dreamwea ver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如家乡、美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🍧2、涉及知识

html+css学校主题网页设计，学校网页制作css+div，学校网页，5页学校网页制作含表单，静态页面html网页。html学校网站主题网页，校园网页制作，大学网页主题网页html

声明:IT黄大大制作，转载请说明出处，感谢支持与理解，官网ithdd.com.cn

🌳3、网页效果

完整效果(5页)：
在这里插入图片描述

page1、登录页
在这里插入图片描述
page2、首页

page3、通知公告
在这里插入图片描述

page4、新闻动态
在这里插入图片描述

page5、联系页

在这里插入图片描述

代码结构：
在这里插入图片描述
声明:IT黄大大制作，转载请说明出处，感谢支持与理解，官网ithdd.com.cn

🌈4、网页源码

4.1 html

<div class="sy-1"><div class="w65"><div class="sy-logo"></div><div class="sy-search"><div class="sy-search1"></div><div class="sy-search2"><input type="text" placeholder="请输入信息"><img width="25" src="imgs/search.png" alt=""></div></div></div></div><div class="sy-2"><div class="w70"><div class="sy2-txt"><p>报警电话:新校区67783110 南校区67766110&nbsp;&nbsp;<a style="color: red;" href="dl.html">登陆</a></p></div><div class="sy2-menu"><ul><li><a href="sy.html" class="inselect"> 首页 </a></li><li><a href="tzgg.html"> 通知公告 </a></li><li><a href="xwdt.html"> 新闻动态 </a></li><li><a href="#"> 法律法规 </a></li><li><a href="#"> 业务办理 </a></li><li><a href="#"> 规章制度 </a></li><li><a href="lxwm.html"> 联系我们 </a></li></ul></div></div></div>

4.2 CSS

* {padding: 0;margin: 0
}body {width: 100%;height: 100%;overflow: hidden;overflow-y: auto;
}.sy-1 {width: 100%;height: 80px;
}.w50 {width: 50%;height: 100%;margin: 0 auto;
}.w65 {width: 65%;height: 100%;margin: 0 auto;
}