html学校官网

已于 2024-07-23 22:12:47 修改
阅读量230 收藏
点赞数 2
文章标签： html 前端
于 2024-07-23 22:09:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_81782041/article/details/140647276
版权

        使用html制作学校官网的三个页面，效果图和代码如下：

css样式：

body {
    
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: white;
}

header {
    background-image:url(./image.png) ;
    background-size:cover; 
    background-position: center; 
    color: #fff;
    padding-top:40px ;
   
    text-align: left;
}
nav ul {
    
    
    text-align: center;
    background-color: hsla(0, 3%, 6%, 0.7);
    border-collapse: collapse;
}
nav ul li {
    display: inline;
    margin: 0 10px;
    
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
    background-color:#de2828 ;
    transition: background-color 0.5s ease;
}

main {
    padding: 20px;
}

main h2{
    border-left: 5px solid #de2828; 
    padding-left: 10px;             
}
footer {
    background-color: rgb(187, 58, 11);
    color: #fff;
    text-align: left;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

 .h{
    color: #ccc;
 }

 th, td {
    border: 2px solid white; /* 设置边框颜色为红色 */
    padding: 8px;
    text-align: left;
    background: #e9e8e8;
    width: 33.33%; 
    transition: background-color 0.3s, color 0.3s;
    
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    color: white;
    text-decoration: none;
}
th:hover, td:hover {
    background-color:#de2828 ; 
   
}
table{
    
    margin: auto;
}
.login-options ul li a:hover {
    background-color: #ccc;
}

首页：

鼠标悬停时有变色效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务网站 - 首页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>教务网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="overview.html">学校概况</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="welcome">
            <p class="h">COLLEGE NEWS</p>
            <h2>文理要闻</h2>
            <table class="tb">
            <tr>
                <td rowspan="2"><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_wlyw/21515/">
                <img src="./image1.png">
            </a> </td>
                <td><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_wlyw/21508/"><h3>学校举行2024年“十佳教师”“示范教研室”“优秀实验实训中心”“十佳辅导员”“十佳管理服务人员”答辩会</h3>
                    <p>2024-07-13</p>
                    <p>为充分调动教职工的积极性和创造性，激励教职工认真履行岗位职责......</p>
                </a></td>
                <td><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_wlyw/21500/"><h3>成都文理学院与四川师范大学共建研究生联合培养基地</h3>
                    <p>2024-07-12</p>
                    <p>7月11日上午，学校与四川师范大学共建研究生联合培养基地......</p>
                </a></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <td><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_wlyw/21481/"> <h3>学校教代会代表团团长联席会议审议通过专业技术职务评审基本条件修订草案</h3>
                    <p>2024-07-10</p>
                    <p>7月10日下午，学校副书记、工会主席卢元勇主持召开学校第一届......</p>
                </a></td>
                <td><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_wlyw/21455/"><h3>我校开展2024年春季学期期末安全大检查</h3>
                    <p>2024-07-09</p>
                    <p>7月9日，我校开展2024年春季学期期末安全大检查。上午10时，学校在二楼......</p>
               </a> </td>
            </tr>
        </table>
            <p class="h">ANNOUNCEMENT</p>
            <h2>通知公告</h2>
            <table>

            
            <tr><td><a href="https://www.cdcas.edu.cn/xinwengonggao/xwgg_tzgg/19275/"><h3>关于民办高校学费标准调整备案的情况公示</h3></a></td></tr>
            <tr><td><a href="https://www.cdcas.edu.cn/xinwengonggao/18746/"><h3>成都文理学院商业街树围椅采购项目询价公告</h3></a></td></tr>
            <tr><td><a href="https://www.cdcas.edu.cn/xinwengonggao/18741/"><h3>成都文理学院关于向受灾学生提供临时困难资助的通知</h3></a></td></tr></table>
        </section>
    </main>
    <footer>
        <p>成都文理学院</p>
        <p>地址：成都市金堂县学府大道278号（邮编610401）</p>
        <p>电话：61565000（校办），61560112（招办）</p>
        <p>传真：028-61565128</p>
    </footer>
</body>
</html>

登录页面：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务网站 - 登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>教务网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="overview.html">学校概况</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="login-options">
            <h2>选择登录类型</h2>
            <ul>
                <li><a href="student_login.html">学生登录</a></li>
                <li><a href="faculty_login.html">教职工登录</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <p>成都文理学院</p>
        <p>地址：成都市金堂县学府大道278号（邮编610401）</p>
        <p>电话：61565000（校办），61560112（招办）</p>
        <p>传真：028-61565128</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生登录界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>教务网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="overview.html">学校概况</a></li>
            </ul>
        </nav>
    </header>
    <table class="lg">
      <form method="post"> 
        <tr>
            <td>账号:<input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码:<input type="password" name="password"></td>
        </tr>
        <tr>
            <td><button type="submit">登录</button></td>
        </tr>
        <tr>
            <td><a href="">忘记密码？</a></td>
        </tr>
    </form>
    </table>
    <footer>
        <p>成都文理学院</p>
        <p>地址：成都市金堂县学府大道278号（邮编610401）</p>
        <p>电话：61565000（校办），61560112（招办）</p>
        <p>传真：028-61565128</p>
    </footer>
        
         
        
        
       
   
</body>
</html>

教职工登录页面同学生一样。

学校概况：

管理服务一栏每个项都做了超链接连接相应网站：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务网站 - 学校概况</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>教务网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="overview.html">学校概况</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="school-profile">
            <h2>学校简介</h2>
            <div>
                &nbsp&nbsp 扎根天府沃土，深植教育情怀。成都文理学院始建于1999年，前身系四川师范大学文化传播学院和国际商学院（非内设二级学院），2004年联合组建并经教育部批准设立为四川师范大学文理学院（独立学院），2014年经教育部批准转设为成都文理学院（独立设置的普通本科高校）。学校是“全国民办学校党建特色项目建设基地”、建有四川省唯一的哲学社科“书法艺术普及基地”以及四川省首个“知识产权培训基地”；是四川省民办教育协会党建工作专业委员会主任单位；获四川省绿化模范单位、四川省高校“平安校园”优秀单位等荣誉称号。
        建校以来，学校全面贯彻党的教育方针，落实立德树人根本任务，以“缔造常青学府，化育幸福人生”为愿景，秉承“博文、明理、弘毅、笃行”的校训和“创办学生满意的学校、培养社会满意的学生”的办学宗旨，坚持“文以养德、理以求真、兼容并包、与时俱进”的办学理念，尤其是近年来贯彻“以评促建、以评促改、以评促管、评建结合、重在建设”的方针，将评建工作和日常工作有机结合，教学工作的中心地位得到进一步加强，办学条件显著改善，建立了较为完善的教学质量保障体系，教学管理更加规范，应用型人才培养质量不断提高。
        学校现建有13个实验（实训）中心，省级实验教学示范中心3个,建立了300余个稳定的校内外实习实训基地，其中省级大学生校外实训基地4个，满足学生实践教学的需要。网络基础设施完备，校园网覆盖全校。
        学校现有专任教师1600余人，教师中拥有享受国务院政府特殊津贴专家、全国优秀社科普及专家、教育部全国艺术教育委员会委员、国家教材委专家委员会委员、教育部全国普通高校毕业生就业创业指导委员会委员、省级教学名师等20余人；有省级教学团队2个。近3年，学校教师获省级及以上教学比赛奖项40余项。
        
        
                                                                                                                                                                                                                                                                        
            </div>
            <div >（2023年3月更新）</div>
            <h2>校园风光</h2>
            <table>
                <tr>
                    <td><img src="./image2.png"></td>
                    <td><img src="./image3.png"></td>
                    
                </tr>
                <tr>
                    <td><img src="./image4.png"></td>
                    <td><img src="./image5.png"></td>
                    
                    
                </tr>
                
            </table>

            

            <h2>管理服务</h2>
            <table width=100%>
                <tr>
                    <td><a href="https://zsw.cdcas.edu.cn/">招生就业处</a></td>
                    <td><a href="https://jw.cdcas.edu.cn/">教务处</a></td>
                    <td><a href="https://xgb.cdcas.edu.cn/">学生工作部</a></td>
                </tr>
                <tr>
                    <td><a href="https://gqt.cdcas.edu.cn/">团委</a></td>
                    <td><a href="https://tuwen.cdcas.edu.cn/">图文信息中心</a></td>
                    <td><a href="https://fzygh.cdcas.edu.cn/">发展规划与评估处</a></td>
                </tr>
                <tr>
                    <td><a href="https://kyc.cdcas.edu.cn/">科研处</a></td>
                    <td><a href="https://jxddbgs.cdcas.edu.cn/">教学督导办公室</a></td>
                    <td><a href="https://zbb.cdcas.edu.cn/">招标采购办公室</a></td>
                </tr>
            </table>
        </section>
    </main>
    <footer>
        <p>成都文理学院</p>
        <p>地址：成都市金堂县学府大道278号（邮编610401）</p>
        <p>电话：61565000（校办），61560112（招办）</p>
        <p>传真：028-61565128</p>
    </footer>
</body>
</html>

✞⁽⁽ଘSayoriଓ⁾⁾✞
关注
html学校网站
10-30
简单的第一次网站，非常适合第一次做网站的同学下载
学校网站（html）
09-10
html开发的一大专网站！很漂亮！很合适交网页制做课的作业！
html实现学校网站
06-22
用html实现的简单的学校代码。主页里面的对应的附属页。相应有附属页用一个文件夹保存
在HTML中怎么设计学校官网
weixin_70462793的博客
03-24 181
代码：
学校官网制作
m0_65665796的博客
11-09 2850
校园官网
html+js学校官网.rar
04-29
用html+js 制作的一个矿大官网动态网页，界面...（网页可以改成-----******学校官网）需要者可以购买。 1、具有js动态时钟 2、主界面利用js实现图片循环动态切换效果 3、功能齐全，网页美观 *有问题可留言，会及时回复
一个学校主页HTML代码
11-21
一个简洁的学院主页代码，html+css编写，有需要的朋友可以省下自己设计了。
HTML学校后台用户登录界面模板
06-06
在本项目中，"HTML学校后台用户登录界面模板"是一个专为学校后台设计的用户登录页面，它提供了不同的登录选项，以满足不同角色（学生、导师和教务）的需求。这个模板不仅注重界面的美观性，还强调了功能性和用户体验...
建筑规划设计学校网站html静态模板_简单html网页范例
12-04
标题"建筑规划设计学校网站html静态模板_简单html网页范例"指出，这是一个专为建筑规划设计学校设计的HTML静态网站模板。它主要用于展示学校的教学理念、课程设置、师资力量、校园环境等内容，同时具备简洁易用的...
HTML完成我的校园网页实现 HTML+CSS
weixin_67259816的博客
11-09 6617
HTML实现我的校园网页设计，采用HTML和CSS布局，只做了简单的静态页面。导航区域使用一种喜庆的红色，更多的内容使用table标签完成。校园官网网页高仿设计，完成设计与制作。
HTML+CSS模仿大学网站主页
07-23
用HTML+CSS模仿的大学主页 无JS 无FLASH 没有添加超链接
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
热门推荐
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
作业：用html，css进行学校官网页面的大概设计
weixin_51774330的博客
11-23 1918
用html，css进行学校官网页面的大概设计
【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网
而风不止
01-04 1364
📂文章目录二、✍️网站描述三、📚网站介绍四、🌐网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。 二、✍️网站描述 🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+C
静态网页设计——校园官网（HTML+CSS+JavaScript）
爱吃雪糕的小布丁的博客
01-04 2074
声明：该文章只是做技术分享，若侵权请联系我删除。！！使用技术：HTML+CSS+JS主要内容：对学校官网的结构进行模仿，对布局进行模仿。中心简介界面对学校的发展历史进行详细描述。左侧使用li标签实现了动态信息和联系我们。
HTML+CSS仿大学官网
qq_44829421的博客
03-24 2699
html+css仿大学官网模块
前端作业之完成学校官方网页的制作
banliyaoguai的博客
04-03 436
（未使用框架，纯html和css制作）注：由本人技术限制，代码复用性极差。
用html和css制作学校官网
yfy0308的博客
04-02 316
【代码】用html和css制作学校官网。
html学校官网页面仿写
最新发布
08-07
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，如果你想仿写学校官网页面，首先你需要了解一些基本的HTML结构元素和布局技术。以下是一个简单的步骤： 1. **设置基础框架**： - 使用`<!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值