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

news2025/1/18 6:21:31

校园网站主题网页制作

🥤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;
}