制作学校官方网站

最新推荐文章于 2024-08-14 15:45:18 发布

sgdhshshhs

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量178

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/sgdhshshhs/article/details/137432640

版权

要求：

1.完成学校官方网站页面制作

2.使用动画完成过度+变换效果

制作结果图如下所示：

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延安大学官方网站</title>
    <link rel="stylesheet" href="./学校官方网站.css">
    <style>
        .daohang:hover{
            color: black;
            transform: scale(1.5);
            background-color: rgb(120, 31, 31);
        }
    </style>
</head>
<body>
    <img src="./图2.png"
    width="100%"
    >
    <div class="a">
        <img src="./图3.png"
        width="90px"
        height="90px">
    </div>
    <div class="a1">
        <p>用户名<input type="text" name="username" ></p>
        <p>密  码<input type="password" name="password" id=""></p>
    </div>
    <div class="b">
        <table 
        align="center"
        border="1px"
        cellspacing="0"
        >
            <tr>
                <td class="daohang">首页</td>
                <td class="daohang">校情总览</td>
                <td class="daohang">机构设置</td>
                <td class="daohang">人才培养</td>
                <td class="daohang">招生就业</td>
                <td class="daohang">科学研究</td>
                <td class="daohang">师资队伍</td>
                <td class="daohang">党建思政</td>
                <td class="daohang">学风建设</td>
                <td class="daohang">图书馆</td>
                <td class="daohang">校友总会</td>
                <td class="daohang">公共服务</td>
                <td class="daohang">网办大厅</td>
            </tr>
        </table>
    </div>
    <img src="./图4.png"
    width="100%"
    >
    <div class="c">
        <table 
        border="0"
        cellspacing="0">
            <tr>
                <td class="c1">
                    <h1>延大要闻</h1><hr>
                </td>
            </tr>
            <tr>
                <td>
                    <ul type="disc">
                        <li>我校与嘉盛石油机械有限责任公司举行延安大学科技园科创基地揭牌仪式暨交流座谈会</li>
                        <li>我校成功举办中欧高等教育交流合作国际学术研讨会</li>
                        <li>深入实施延安精神强党建“三一”工程 为更有特色更有水平大学建设提供坚强组织保证写在延安精神强党建“三一”工程方案实施之际</li>
                        <li>延安大学代表队荣获第十六届“尖烽时刻”全国商业模拟大赛二等奖</li>
                        <li>我校召开2024年度科研工作推进会议</li>
                        <li>我校成功举办全国高等医学教育临床医学专业课程思政案例库《系统解剖学》定稿会</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <div class="d">
        <table>
            <tr>
                <td class="c1">
                    <h1>通知公告</h1><hr>
                </td>
            </tr>
            <tr>
                <td>
                    <ul type="disc">
                        <li>关于2024年放假通知</li>
                        <li>延安大学2024年毕业生春季综合类招聘会邀请函</li>
                        <li>延安大学2024年教师岗位招聘公告</li>
                        <li>延安大学能源材料实验室实验台采购项目公开招标公告</li>
                        <li>《延安大学学报（社会科学版）》2024年重点选题</li>
                        <li>关于延安大学教科院实验室改造工程项目（二次）的结果公告</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <div class="d1">
        <a href="https://www.yau.edu.cn/index/ztjy.htm"><img src="./图5.png"></a>
    </div>
    <div class="d2">
        <a href="https://www.yau.edu.cn/yndxwenmingwang/"><img src="./图6.png"></a>
    </div>
    <div class="e">
        <p> &nbsp;&nbsp;杨家岭校区：中国·陕西·延安市圣地路580号<br>
            &nbsp;&nbsp;新城校区：中国·陕西·延安市新区公学北路1号<br>
            &nbsp;&nbsp;邮编：716000 　E-Mail:ydxb@yau.edu.cnbrbr <br>
            &nbsp;&nbsp;电话：86-0911-2650002   86-0911-2650666 <br>
            &nbsp;&nbsp;传真：86-0911-2650004　 陕ICP备05011013号-1
        </p>
    </div>
</body>
</html>

.css文件如下：

.a{
    position: absolute;
    top: 20px;
    left: 20px;
}
.a1{
    position: absolute;
    top: 20px;
    right: 20px;
}
.b{
    color: aliceblue;
    background-color: rgb(120, 31, 31);
    border-radius: 100px;
}
.c{
    width: 43%;
    background-color:aliceblue;
    border-radius: 20px;
    float: left;
}
.c1{
    color: red;
}
.d{
    width: 50%;
    background-color:aliceblue;
    border-radius: 20px;
    float: right;
}
.d1{
    float: right;
}
.d2{
    float: right;
}
.e{
    background-color:rgb(120, 31, 31);
    width: 100%;
    float:left;
}

网站效果说明：

1.当鼠标移动到网站上方的导航栏时，文字放大，且颜色由白色变为黑色

2.鼠标点击如下图所示的两个图片会跳转至相应的网页

3.右上角为用户名和密码输入框

sgdhshshhs

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
制作学校官方网站

1.当鼠标移动到网站上方的导航栏时，文字放大，且颜色由白色变为黑色。2.鼠标点击如下图所示的两个图片会跳转至相应的网页。2.使用动画完成过度+变换效果。3.右上角为用户名和密码输入框。1.完成学校官方网站页面制作。
复制链接

扫一扫