web前端网页制作课作业：使用HTML+CSS技术制作中华传统文化网站【文房四宝】学生网页设计作品简单静态HTML网页作品-CSDN博客

本文链接：https://blog.csdn.net/p305114466/article/details/126825531

📂文章目录

👨‍🎓网页题目
✍️网页描述
🌐网页效果
⚙️ 代码实现
- 🧱HTML结构代码
🎁更多干货

👨‍🎓网页题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、xx民间年画文化艺术网站、等网站的设计与制作。

✍️网页描述

🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

🌐网页效果

在这里插入图片描述

⚙️ 代码实现

🧱HTML结构代码




<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="bigbox">
        <div id="banner">
            <img src="picture/banner.png" alt="">
        </div>
        <nav>
            <a href="">首页</a>
            <a href="maobi.html">毛笔</a>
            <a href="moshui.html">墨水</a>
            <a href="zhizhang.html">纸张</a>
            <a href="yantai.html">砚台</a>
        </nav>
        <div id="mian">
            <img src="picture/mian.png" alt="">
            <p>
                笔墨纸砚，是xx独有的文书工具，即文房四宝。“笔、墨、纸、砚”之名，起源于南北朝时期。历史上，“笔、墨、纸、砚”所指之物屡有变化。在南唐时，“笔、墨、纸、砚”特指宣城诸葛笔、徽州李廷圭墨、澄心堂纸，徽州婺源龙尾砚。自宋朝以来“笔墨纸砚”则特指宣笔（安徽宣城)、徽墨（安徽徽州歙县)、宣纸（安徽宣城泾县)、歙砚（安徽徽州歙县）、洮砚（甘肃卓尼县）、端砚（广东肇庆，古称端州），元代以后湖笔（浙江湖州）渐兴，宣笔渐衰，改革开放后，宣笔渐渐恢复了生机。作为文房四宝的故乡的安徽宣城，是我国文房四宝最正宗的原产地和饮誉世界的“xx文房四宝之乡”，所产的宣纸（泾县）、宣笔（泾县/旌德）、徽墨（绩溪/旌德）、宣砚（旌德）举世闻名，为历代文人墨客所追捧。
            </p>
            <p>
                毛笔的历史更为悠久，秦朝之前各地对毛笔的叫法不一，楚国称毛笔谓“聿“（吁），燕国称笔谓“弗”，秦朝统一xx后实行“书同文”，毛笔才有了统一的名称。宣笔可以说是毛笔的起源。因为很久以前宣城就有“毛颖之技先天下”之说。
            </p>
            <p>
                关于宣笔的由来，自古就有蒙恬造笔说法。据唐代韩愈所著的《毛颖传》记载，公元前223年，秦将蒙恬率军南征伐楚，行至中山地区（即宣城境内），具体方位有两种说法，一说中山在今宣城市宣州区和泾县一带；另一说中山在今江苏省溧水县境内。据《元和郡县志》二十八卷记载，中山在宣州溧水县东南十五里处，因唐宋时期宣州府地域广泛，溧水县属宣州管辖。
            </p>
            <p>
                蒙恬发现中山兔肥毛长，质地最佳，于是以竹管为笔杆，兔毛（又称紫毫）为笔头制作毛笔，世人称“蒙恬笔”，为宣笔的鼻祖。
            </p>
        </div>
        <div id="picture">
            <h1>笔墨纸砚</h1>
            <div id="leibie">
                <img src="picture/11.png" alt="">
                <p>笔</p>
            </div>
            <div id="leibie">
                <img src="picture/22.png" alt="">
                <p>墨</p>
            </div>
            <div id="leibie">
                <img src="picture/33.png" alt="">
                <p>纸</p>
            </div>
            <div id="leibie">
                <img src="picture/44.png" alt="">
                <p>砚</p>
            </div>
        </div>
        <footer>
            版权所有©***
        </footer>
    </div>
</body>

</html>