html+css制作的图书馆静态网页，一共3页，有登录页面。

? 源码获取 +v：htmlsj

web网页设计制作
DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |?个人博客网站 |
?个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 |
HTML期末大学生网页设计作业，Web大学生网页

网页设计三要素

HTML：网页布局结构，常用标签div+p+a+li等
CSS：css与css3用于对页面的样式控制
JavaScript：制作交互行为，例如轮播图，表单验证等

页面介绍

1.首页
2.图书列表
3.账号登录

网页展示

在这里插入图片描述

html代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>许昌学院图书馆</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box">
    <header>
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="books.html">图书列表</a></li>
                <li><a href="login.html">登录</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="hero">
        <h1>欢迎来到智慧图书馆</h1>
        <p>提供丰富多样的图书资源和优质的服务</p>
        <a href="#" class="cta-button">了解更多</a>
    </section>
    
    <section class="featured-books">
        <h2>特色图书</h2>
        <div class="layout-grid">
            <div class="book-card">
                <img src="images/book1.png" alt="图书1">
                <h3>中国人的音乐</h3>
            </div>
            <div class="book-card">
                <img src="images/book2.png" alt="图书1">
                <h3>中国人的精神</h3>
            </div>
            <div class="book-card">
                <img src="images/book3.png" alt="图书1">
                <h3>走到人生边上：自问自答</h3>
            </div>
            <div class="book-card">
                <img src="images/book4.png" alt="图书1">
                <h3>钱钟书的学术人生</h3>
            </div>
            <div class="book-card">
                <img src="images/book5.png" alt="图书1">
                <h3>人生</h3>
            </div>
            <div class="book-card">
                <img src="images/book6.png" alt="图书1">
                <h3>元素与人类文明</h3>
            </div>
        </div>
    </section>
    
    <section class="services">
        <h2>阅读推荐</h2>
        <div class="layout-grid">
            <div class="service-card">
                <img src="images/service1.png">
                <h3>好书推荐</h3>
                <p>一本书读懂德国史</p>
            </div>
            <div class="service-card">
                <img src="images/service2.png">
                <h3>视频推荐</h3>
                <p>大学从态度谈起</p>
            </div>
            <div class="service-card">
                <img src="images/service3.png">
                <h3>专题推荐</h3>
                <p>计算机二级考试C语言</p>
            </div>
        </div>
    </section>
    
    <section class="additional-content">
        <h2>更多内容</h2>
        <div class="layout-row">
            <div class="content-box">
                <h3>活动日历</h3>
                <p>了解最新的图书馆活动和讲座安排。</p>
                <a href="#" class="cta-button">查看日历</a>
            </div>
            <div class="content-box">
                <h3>数字资源</h3>
                <p>访问我们的数字资源库，获取电子图书和期刊。</p>
                <a href="#" class="cta-button">浏览资源</a>
            </div>
        </div>
    </section>
    
    <footer>
        <p>版权所有 &copy; 智慧图书馆</p>
    </footer>

</div>
</body>
</html>

? 获取完整源码及素材 +V：htmlsj