HTML作业-----学校官网

于 2025-02-03 20:13:21 发布
阅读量1.5k 收藏 28
点赞数 25
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_88860374/article/details/145432726
版权

源代码如下：

<!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 {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f5f5f5;

        }

        header {

            background-color: #fff;

            padding: 10px 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            box-shadow: 0 2px 4px rgba(0,0,0,0.1);

        }

        .logo {

            display: flex;

            align-items: center;

        }

        .logo img {

            height: 40px;

            margin-right: 10px;

        }

        nav ul {

            list-style: none;

            display: flex;

            align-items: center;

        }

        nav ul li {

            margin: 0 15px;

        }

        nav ul li a {

            color: #333;

            text-decoration: none;

            font-weight: bold;

        }

        .search-bar {

            display: flex;

            align-items: center;

        }

        .search-bar input[type="text"] {

            padding: 8px;

            border: 1px solid #ccc;

            border-radius: 4px;

            font-size: 16px;

            outline: none;

        }

        .search-bar button {

            padding: 8px 12px;

            margin-left: 5px;

            background-color: #007bff;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        .search-bar button:hover {

            background-color: #0056b3;

        }

        .banner {

            background-color: #ff7f50;

            color: white;

            text-align: center;

            padding: 50px 0;

            font-size: 24px;

            font-weight: bold;

        }

        .course-section, .live-section {

            padding: 20px;

        }

        .course-section h2, .live-section h2 {

            margin-bottom: 20px;

        }

        .course-list, .live-list {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

        }

        .course-item, .live-item {

            width: 23%;

            background-color: #fff;

            border: 1px solid #ddd;

            border-radius: 8px;

            overflow: hidden;

            box-shadow: 0 2px 4px rgba(0,0,0,0.1);

            margin-bottom: 20px;

        }

        .course-item img, .live-item img {

            width: 100%;

            height: auto;

        }

        .course-item h3, .live-item h3 {

            padding: 10px;

            margin: 0;

            font-size: 18px;

        }

        footer {

            background-color: #003366;

            color: white;

            text-align: center;

            padding: 10px 0;

            position: relative;

            width: 100%;

        }

    </style>

</head>

<body>

    <header>

        <div class="logo">

            <img src="https://s2.yinghuaonline.com/upfiles/2cY2h9kYjBpqre3heT0t.png" alt="银川科技学院在线学堂">

            <span>银川科技学院在线学堂</span>

        </div>

        <nav>

            <ul>

                <li><a href="#">首页</a></li>

                <li><a href="#">全部课程</a></li>

                <li><a href="#">公开课</a></li>

                <li><a href="#">云课直播</a></li>

                <li><a href="#">新闻公告</a></li>

                <li><a href="#">数图资源</a></li>

                <li><a href="#">智汇大讲堂</a></li>

            </ul>

        </nav>

        <div class="search-bar">

            <input type="text" placeholder="请输入课程名称">

            <button type="submit">搜索</button>

        </div>

        <div>

            <button>教师登录</button>

            <button>学生登录</button>

        </div>

    </header>

    <div class="banner">

        面向现代化 面向世界 面向未来

    </div>

    <div class="course-section">

        <h2>公开课</h2>

        <div class="course-list">

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1645663121424.jpg" alt="课程1">

                <h3>一代伟人</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1646626962617.jpg "alt="课程2">

                <h3>法与法律</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1645663064226.jpg" alt="课程3">

                <h3>马克思主义产生的社会根源和阶级基础</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1645663153602.jpg" alt="课程4">

                <h3>毛泽东思想</h3>

            </div>

       

        </div>

    </div>

    <div class="course-section">

        <h2>计算机实训</h2>

        <div class="course-list">

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1667788019716.jpg" alt="课程1">

                <h3>网络安全运维工程师</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1655295971670.jpg"alt="课程2">

                <h3>大学计算机基础</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1676365389801.jpg" alt="课程3">

                <h3>机器人制作</h3>

            </div>

            <div class="course-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1676421601320.jpg" alt="课程4">

                <h3>5G部署仿真</h3>

            </div>

           

        </div>

    </div>

    <div class="live-section">

        <h2>热门直播</h2>

        <div class="live-list">

            <div class="live-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1652924159143.png" alt="直播1">

                <h3>图书馆文化空间再造问卷调查</h3>

            </div>

            <div class="live-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1650260339702.png" alt="直播2">

                <h3>打造执行力高的团队</h3>

            </div>

            <div class="live-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1650260472088.png" alt="直播3">

                <h3>高校资产管理信息化运用</h3>

            </div>

            <div class="live-item">

                <img src="https://s2.yinghuaonline.com/upfiles/1650260500497.png" alt="直播4">

                <h3>新时代智慧校园建设</h3>

            </div>

           

        </div>

    </div>

    <footer>

        <p>版权所有 © 2025 银川科技学院</p>

    </footer>

</body>

</html>

运行结果：

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值