web前端-homework 学校官方网页制作&CSS动画

smileleooo
141 阅读4分钟

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

html源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算机科学学院</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="box">
<!-- 头部 -->
<div class="top">
    <div class="icon"><a href="#"><img src="images/icon.png"></a></div>
    <div class="search">
        <input class="text" placeholder="请输入关键词搜索">
        <input class="button" type="submit" value="搜索">
    </div>
</div>
<!-- 导航栏 -->
<div class="navbar">
    <ul class="ul1">
        <li class="drop-dowm"><a href="#">网站首页</a></li>
        <div class="drop-dowm">
            <a href="#" class="drop-button">学院概况</a>
            <div class="drop-dowm-content">
                <a href="#">学院简介</a>
                <a href="#">学院领导</a>
                <a href="#">组织机构</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">本科生教育</a>
            <div class="drop-dowm-content">
                <a href="#">考试信息</a>
                <a href="#">选课重修信息</a>
                <a href="#">通知公告</a>
                <a href="#">资料下载</a>
                <a href="#">公选课教师视频</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">研究生教育</a>
            <div class="drop-dowm-content">
                <a href="#">招生简章</a>
                <a href="#">研究生导师</a>
                <a href="#">研究生奖助体系</a>
                <a href="#">通知公告</a>
                <a href="#">资料下载</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">师资队伍</a>
            <div class="drop-dowm-content">
                <a href="#">教授</a>
                <a href="#">副教授</a>
                <a href="#">讲师</a>
                <a href="#">实验人员</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">科学研究</a>
            <div class="drop-dowm-content">
                <a href="#">科研团队</a>
                <a href="#">科研平台</a>
                <a href="#">科研成果</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">学生工作</a>
            <div class="drop-dowm-content">
                <a href="#">工作动态</a>
                <a href="#">通知公告</a>
                <a href="#">课外创新实践</a>
                <a href="#">毕业生就业</a>
                <a href="#">资料下载</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">招生工作</a>
            <div class="drop-dowm-content">
                <a href="#">学院介绍</a>
                <a href="#">毕业生就业去向</a>
                <a href="#">优秀毕业生简介</a>
                <a href="#">学生获奖</a>
                <a href="#">招生工作宣传报道</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">实验中心</a>
            <div class="drop-dowm-content">
                <a href="#">中心简介</a>
                <a href="#">实验分室</a>
                <a href="#">规章制度</a>
                <a href="#">资料下载</a>
                <a href="#">开放预约</a>
            </div>
        </div>
        <div class="drop-dowm">
            <a href="#" class="drop-button">规则制度</a>
        </div>
    </ul>
</div>
<!-- 内容 -->
<div class="con">
    <div class="picture">
        <a href="#"><img src="images/school2.png" style="width: 400px;height: 200px;"></a>
    </div>
    <div class="q">
        <div class="t">新闻速递</div>
        <p>
            <ul>
                <li class="li"><a href="#">学院召开党委中心组学习会暨党风廉政建设专题会</a></li>
                <li class="li"><a href="#">学院召开教职工大会学习传达中层干部大会精神 部署学院学期工作</a></li>
                <li class="li"><a href="#">计科院工会组织学院女教职工庆祝第109个“三八妇女节”</a></li>
                <li class="li"><a href="#">学术讲座——人工智能改变我们的未来生活</a></li>
                <li class="li"><a href="#">计算机科学学院各年级辅导员集中走访学生寝室</a></li>
                <li class="li"><a href="#">学院召开年度领导班子民主生活会</a></li>
            </ul>
        </p>
    </div>
    <div class="q">
        <div class="t">学术交流</div>
        <p>
            <ul>
                <li class="li"><a href="#">计算时代的虚假信息传播</a></li>
                <li class="li"><a href="#">人工智能+：视界充满AI</a></li>
                <li class="li"><a href="#">零行列式策略及其网络演化动力学</a></li>
                <li class="li"><a href="#">视频遇上云服务</a></li>
                <li class="li"><a href="#">计科院关于举行年校庆论文报告会的通知</a></li>
            </ul>
        </p>
    </div>
    <div class="q">
        <div class="t">通知公告</div>
        <p>
            <ul>
                <li class="li"><a href="#">关于组织参加陕西省大学生职业规划报名工作的通知</a></li>
                <li class="li"><a href="#">2023年度“2023希望工程圆梦行动大型公益助学活动”评选结果公示</a></li>
                <li class="li"><a href="#">2024年推荐优秀应届本科毕业生免试攻读研究生工作实施方案</a></li>
                <li class="li"><a href="#">关于做好2022-2023学年本科生国家奖学金评审工作的通知</a></li>
                <li class="li"><a href="#">关于2022级计算机类专业分流名单公示的通知</a></li>
            </ul>
        </p>
    </div>
</div>
<!-- 底部 -->
<div class="tail">
    Copyright(c)2024 西安工程大学计算机科学学院 地址：中国·西安·临潼区·陕鼓大道58号[710600]
</div>
</div>
</body>

css源码：

body{
    background-color: rgb(235, 235, 235);
}

.box{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    width: 80%; 
}

.top{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #d7dee0;
}

.icon{
    margin: 20px;
    margin-right: 100px;
}

.search{ 
    margin: 20px;
    margin-left: 300px;
}

.text{
    padding: 8px 16px;
    background-color: white;
    border:0.5px solid #e1e1e1;
    border-radius: 5px;
}

.button {
    padding: 8px 16px;
    text-align: center;
    background-color: white;
    border:0.5px solid #e3e3e3;
    border-radius: 5px;
}

.button:hover {
    background-color: #cfcfcf;
}

.navbar{
    display: flex;
    justify-content: space-around;
    width: 100%;
    background-color: #02425B;
    height: 60px;
    margin-bottom: 20px;
}

a,.drop-button{
    display: flex;
    align-items: center;
    margin-right: 15px;
    color: white;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
}

.drop-dowm{
    display:inline-block;
}

.drop-dowm-content{
    display:none;
    position: absolute;
    background-color: #558089;
    min-width: 160px;
}

.drop-dowm-content a {
    display: block;
    color: white;
    margin: 5px;
    padding: 5px;
    text-decoration: none;
}


.drop-dowm-content a:hover {
    background-color: #d7dee0;
}

.drop-dowm:hover .drop-dowm-content{
    display:block;
}

.con{
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.picture{
    margin: 20px;
    width: 400px;
    height: 200px;
    border: #6da6b1 solid 2px;
}

.q{
    margin: 20px;
}

.t{
    font-size: 16px;
    font-weight: 600;
}

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

.li a:hover{
    color: blue;
}
.tail{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background-color: #02425B;
    color: white;
}

效果：

image.png

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

html源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡+变换效果</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .box {
        width: 100px;
        height: 100px;
        position: relative;
        animation: moveUp 3s infinite;
    }

    @keyframes moveUp {
        0% {
            transform: translateY(0) rotate(0deg);
            background-color: #3498db;
        }
        50% {
            transform: translateY(-100px) rotate(45deg) scale(0.5);
            background-color: #ce3f2f;
        }
        100% {
            transform: translateY(0) rotate(90deg);
            background-color: #3498db;
        }
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果：颜色由蓝色变为红色，向上运动并旋转。

avatar
文章
阅读
粉丝