项目实践——学校官网的制作

已于 2025-01-16 10:18:58 修改
阅读量340 收藏 6
点赞数 5
文章标签： css 前端 html5
于 2025-01-16 10:15:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84797661/article/details/145174186
版权

一、代码的书写

        分为html部分的编写和css部分的编写，在编写html部分的时候，把页面切分成块，用每个<div>标签进行分割，在编写new-list部分的时候，要使用<span>标签进行书写，在css部分的编写的过程中，需要设置合适的参数进行渲染和美化。

​
<!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">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #003366;
            color: white;
            padding: 10px 20px;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            width: 209px;
            height: 100px;
            margin-right: 10px;
        }
        
        nav ul {
            list-style: none;
            display: flex;
        }
        
        nav li {
            margin-left: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        main {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .banner {
            width: 100%;
            max-width: 1200px;
            margin-bottom: 20px;
        }
        
        .banner img {
            width: 100%;
            height: auto;
        }
        
        .content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
        }
        
        .main-news {
            width: 70%;
        }
        
        .main-news img {
            width: 100%;
            height: auto;
        }
        
        .news-description {
            padding: 10px;
        }
        
        .news-description h2 {
            margin: 0;
        }
        
        .news-description p {
            margin: 10px 0;
        }
        
        .news-list {
            width: 30%;
        }
        
        .news-list h3 {
            margin: 0;
        }
        
        .news-list a {
            float: right;
        }
        
        .news-list ul {
            list-style: none;
            padding: 0;
        }
        
        .news-list li {
            margin-bottom: 10px;
        }
        
        .news-list span {
            display: inline-block;
            width: 80px;
        }
        
        .notices {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            margin-top: 20px;
        }
        
        .notice-section {
            width: 30%;
        }
        
        .notice-section h3 {
            margin: 0;
        }
        
        .notice-section a {
            float: right;
        }
        
        .notice-section ul {
            list-style: none;
            padding: 0;
        }
        
        .notice-section li {
            margin-bottom: 10px;
        }
        
        .notice-section span {
            display: inline-block;
            width: 50px;
            text-align: center;
            margin-right: 10px;
        }
        
        .quick-links {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 1200px;
            margin-top: 20px;
        }
        
        .quick-links a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: black;
        }
        
        .quick-links img {
            width: 150px;
            height: 100px;
            margin-bottom: 5px;
        }
        
        footer {
            background-color: #003366;
            color: white;
            padding: 20px;
            margin-top: 20px;
            width: 100%;
        }
        
        .footer-links {
            display: flex;
            justify-content: space-around;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="./photo/4.jpg.png" alt="浙江中医药大学logo">
            <h1>浙江中医药大学</h1>
        </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>
                <li><a href="#">国际交流</a></li>
                <li><a href="#">信息资源</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="banner">
            <img src="./photo/2.jpg.png" alt="校园风景横幅">
        </div>
        <div class="content">
            <div class="main-news">
                <img src="./photo/3.jpg" alt="主新闻图片">
                <div class="news-description">
                    <h2>衢州市深化中医药传承创新发展合作签约仪式顺利举行</h2>
                    <p>我校与衢州市人民政府签署合作协议，深化中医药传承创新发展合作。校党委书记黄文秀、副校长吴承亮，衢州市委、市政府副秘书长毛晓荣等出席签约仪式。学校和衢州市有关部门负责人参加仪式。黄...</p>
                    <a href="#">查看更多>></a>
                </div>
            </div>
            <div class="news-list">
                <h3>新闻动态</h3>
                <a href="#">进入新闻网>></a>
                <ul>
                    <li>
                        <span>01-13</span>
                        <a href="#">学校召开科研创新大会和科学技术协会、社会科学联...</a>
                    </li>
                    <li>
                        <span>01-12</span>
                        <a href="#">学校举行2025年离退休老同志迎春团拜会暨2024年度...</a>
                    </li>
                    <li>
                        <span>01-11</span>
                        <a href="#">我校金华研究院获批中国数智中医药产学研协同创新平台</a>
                    </li>
                    <li>
                        <span>01-10</span>
                        <a href="#">陈忠教授团队最新研究成果在《Neuron》杂志发表</a>
                    </li>
                    <li>
                        <span>01-06</span>
                        <a href="#">我校新增1个省级导师工作室</a>
                    </li>
                    <li>
                        <span>01-04</span>
                        <a href="#">"零磁医学"研究机构落户我校附属第一医院</a>
                    </li>
                    <li>
                        <span>01-01</span>
                        <a href="#">我校与衢州市深化中医药传承创新发展合作签约仪式...</a>
                    </li>
                    <li>
                        <span>12-31</span>
                        <a href="#">学校附属第二医院举行申花院区二期工程奠基仪式</a>
                    </li>
                    <li>
                        <span>12-31</span>
                        <a href="#">学校2025年新年贺词</a>
                    </li>
                    <li>
                        <span>12-30</span>
                        <a href="#">我校举办首届医学人文与管理西湖论坛</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="notices">
            <div class="notice-section">
                <h3>通知公告</h3>
                <a href="#">查看更多>></a>
                <ul>
                    <li>
                        <span>14</span>
                        <span>2025-01</span>
                        <a href="#">关于滨文校区1月18日（周六）停电的通知</a>
                    </li>
                    <li>
                        <span>13</span>
                        <span>2025-01</span>
                        <a href="#">关于富春校区预防性试验停电的通知</a>
                    </li>
                    <li>
                        <span>07</span>
                        <span>2025-01</span>
                        <a href="#">讲座预告：糖科学-药物研发的新赛道</a>
                    </li>
                    <li>
                        <span>07</span>
                        <span>2025-01</span>
                        <a href="#">讲座预告：未来医学虚拟仿真实验室建设的探索与实践</a>
                    </li>
                    <li>
                        <span>13</span>
                        <span>2024-12</span>
                        <a href="#">关于四六级考试期间学校班车调整的通知</a>
                    </li>
                </ul>
            </div>
            <div class="notice-section">
                <h3>学术动态</h3>
                <a href="#">查看更多>></a>
                <ul>
                    <li>
                        <span>...</span>
                        <span>11-29</span>
                        <a href="#">求真科学系列讲座预告（12月1日）</a>
                    </li>
                    <li>
                        <span>...</span>
                        <span>11-13</span>
                        <a href="#">求真科学系列讲座预告（11月22日）</a>
                    </li>
                    <li>
                        <span>...</span>
                        <span>11-05</span>
                        <a href="#">关于组织申报2025年度省软科学研究计划项目的通知</a>
                    </li>
                    <li>
                        <span>...</span>
                        <span>10-30</span>
                        <a href="#">关于组织征集“社科赋能山区海岛县高质量发展行动”优秀案例的通知</a>
                    </li>
                    <li>
                        <span>...</span>
                        <span>10-25</span>
                        <a href="#">国家自然科学基金申报系列讲座专家巡讲预告（11月1日）</a>
                    </li>
                    <li>
                        <span>...</span>
                        <span>10-08</span>
                        <a href="#">国家自然科学基金申报系列讲座专家巡讲预告</a>
                    </li>
                </ul>
            </div>
            <div class="notice-section">
                <h3>媒体关注</h3>
                <a href="#">查看更多>></a>
                <ul>
                    <li>
                        <span>13</span>
                        <span>2025-01</span>
                        <a href="#">中国中医药报：南宋丰厚的医药文化遗产</a>
                    </li>
                    <li>
                        <span>07</span>
                        <span>2025-01</span>
                        <a href="#">学习强国：观·有闻｜浙中医大这个样板党支部开展“科技下乡 服务三农”主题党日活动</a>
                    </li>
                    <li>
                        <span>30</span>
                        <span>2024-12</span>
                        <a href="#">湖新闻：这个暖心“新年邮局”，坚持了36年！</a>
                    </li>
                    <li>
                        <span>30</span>
                        <span>2024-12</span>
                        <a href="#">国际在线、中国新闻网：“首届医学人文与管理西湖论坛”在杭州举行</a>
                    </li>
                    <li>
                        <span>30</span>
                        <span>2024-12</span>
                        <a href="#">光明日报：第八届浙江省大学生护理竞赛在浙中医大举行</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="quick-links">
            <a href="#">
                <img src="./photo/5.jpg.png" alt="校友链接">
                <span>校友，你好！母校欢迎你！</span>
            </a>
            <a href="#">
                <img src="./photo/6.jpg.png" alt="报考链接">
                <span>欢迎报考浙江中医药大学</span>
            </a>
            <a href="#">
                <img src="./photo/7.jpg.png" alt="医药领域链接">
                <span>医药领域腐败问题集中整治举报信箱、电子邮箱</span>
            </a>
            <a href="#">
                <img src="./photo/8.jpg.png" alt="人才招聘链接">
                <span>人才招聘信息</span>
            </a>
            <a href="#">
                <img src="./photo/9.jpg.png" alt="本科教育教学链接">
                <span>本科教育教学审核评估网</span>
            </a>
            <a href="#">
                <img src="./photo/10.jpg.png" alt="招标采购链接">
                <span>招标采购</span>
            </a>
        </div>
        <footer>
            <div class="footer-links">
                <a href="#">常用服务</a>
                <a href="#">信息公开</a>
                <a href="#">精品课程</a>
                <a href="#">浙中医大校友</a>
                <a href="#">中医药继续教育</a>
                <a href="#">学术期刊投稿</a>
                <a href="#">中医药博物馆</a>
                <a href="#">国有房屋减租公开晾晒</a>
            </div>
        </footer>
    </main>
</body>
</html>

​

二、效果图的展示

三、总结

        虽然页面做出来有一定的不美观，但是需要实现的内容大致都实现了，有什么建议或想法，欢迎大家来进行批评指正和交流！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值