《通信软件开发与应用》课程结业报告

WEIdw666

已于 2022-07-10 01:21:09 修改

阅读量583

点赞数

文章标签： html css

于 2022-07-10 01:14:14 首次发布

本文链接：https://blog.csdn.net/weixin_52886895/article/details/125700847

版权

一.报告要求

二.做的什么

三.开发过程

1.使用开发工具：Visual Studio Code

一.报告要求

任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。

无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等。

二.做的什么

本次实验采用了HTML和CSS对网页进行构造，完成了一个对于中国古代建筑相关的静态网页。这些页面分别有古建首页、古建知识、古建历史、古建典范、古建欣赏，并且网页可以进行音频、视频等的播放。但由于本身知识掌握的不是非常的牢固，构建的界面看起来不是非常的精美，存在着缺陷。

三.开发过程

1.使用开发工具：Visual Studio Code

2.开发过程设计：

（1）.古建首页：

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国古代建筑</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="banner"><img src="images/banner2.jpg" alt=""></div>
    <div class="con">
        <div class="yan">
            <div class="yleft fl">
                <h2>中国古代建筑文化</h2>
                <div class="yline"></div>
                <p>中国古建筑文化是非常雄厚灿烂的，中国古代建筑具有悠久的历史传统和光辉的成就。从陕西半坡遗址发掘的方形及圆形浅穴式房屋发展看，已有六、七千年的历史。修建在崇山峻岭之上、蜿蜒万里的长城，是人类建筑史上的奇迹；建于隋代的河北赵县的安济桥，在科学技术同艺术的完美结合上，早已走在世界桥梁科学的前列。房屋建筑方面故宫则是诠释了什么才是真正的榫卯结构，几千座房屋几乎找不到一颗钉子。全部有木质结构代替水泥混凝土结构，可以说故宫是人类建筑世上的一朵奇葩。中国的这种庭院式的组群布局所造成的艺术效果，与欧洲建筑相比，有它独特的艺术魅力。一般地说，一座欧洲建筑，是比较一目了然的。而中国的古建筑，却象一幅中国画长卷，必须一段段的逐渐展看，不可能同时全部看到。这也从中体现出中欧文化存在较大差异。</p>
            </div>
            <div class="yright fr">
                <img src="images/yr.jpg" alt="">
                <div class="yrtxt">
                    <img src="images/g.jpg" alt="">
                    <h4>故宫，也叫紫禁城，是中国人心中最神圣的一个梦。</h4>
                </div>
                <div class="yrtxt">
                    <img src="images/g1.jpg" alt="">
                    <h4>苏州古典园林，折射出中国文化取法自然而又超越自然的深邃意境。</h4>
                </div>
                <div class="more"><a href="su.html">查看更多</a></div>
            </div>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

（2）.古建知识：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>古代建筑知识</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="con">
        <div class="gai">
            <h2>概况：</h2>
            <p>中国古建筑的平面以长方形为最普遍，一座长方形建筑，在平面上都有两种尺度，即它的宽与深。其中长边为宽，短边为深。如一栋三间北房，它的东西方向为宽，南北方向为深。单体建筑又是由最基本的单元“间”组成的。</p>
            <h3>常见分类：</h3>
            <p>在这最基本的建筑形式中，庑殿又有单檐庑殿、重檐庑殿；歇山有单檐歇山、重檐歇山、三滴水楼阁歇山、大屋檐歇山、卷棚歇山等；硬山、悬山，常见者既有一层，也有两层楼房；攒尖建筑则有三角、四角、五角、六角、八角、圆形、单檐、重檐、多层檐等多种形式。</p>
        </div>
    </div>
    <div class="con">
        <div class="zhishi">
            <h1>古代建筑知识</h1>
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th>面宽与进深</th>
                        <td>柱高与柱径</td>
                        <th>面宽与柱高</th>
                        <td>收分与侧脚</td>
                    </tr>
                    <tr>
                        <th>上出与下出</th>
                        <td>步架与举架</td>
                        <th>台明高度</th>
                        <td>歇山收山</td>
                    </tr>
                    <tr>
                        <th>庑殿推山</th>
                        <td>建筑物各部</td>
                        <th>构件的权衡</th>
                        <td>比例关系</td>
                    </tr>
                </tbody>
            </table>
            <h2>面宽与进深</h2>
            <img src="images/zhishi.jpg" alt="">
            <p>每四棵柱子围成一间，一间的宽为“面宽”，又称“面阔”，深为“进深”。若干个单间面宽之和组成一栋建筑的总面宽，称为“通面宽”；若干个单间的进深则组成一座单体建筑的通进深。</p>
            <p>古建筑面宽（指明间面宽）的确定要考过虑到许多方面的国素，即要考虑实际需要（即所谓适用的原则），又要考虑实际可能（如木材长短、径寸等因素），并要受到封建等级制度的限制。在古代，明间面宽的确定还要受到封建思想的束缚，在考虑面宽时，必须使用门口尺寸符合门尺上“官”“禄”“财”“义”等吉字的尺寸。次间面宽酌减，一般为明间的8/10，或按实际需要确定。</p>
            <h2>柱高与柱径</h2>
            <p>古建筑柱子的高度与直径是有一定比例关系的，柱高与面宽也有一定比例。小式建筑，如长檩或六檩小式，明间面宽与柱高的比例为10：8，即通常所谓面宽一丈，柱高八尺。柱高与柱径的比例为11：1。如清工部《工程做法则例》规定：“凡檐柱以面阔十分之八定高，以十分之七（应为百分之七）定径寸。如面阔一丈一尺，得柱高八尺八寸，径七寸七分。”五檩、四檩小式建筑，面阔与柱高之比为10：7。根椐这些规定，就可以进行推算，已知面宽可以求出柱高，知柱高可以求出柱径。相反，已知柱高、柱径也可以推算出面阔。</p>
            <h2>收分、侧脚</h2>
            <p>中国古建筑圆柱子上下两端直径是不相等的，除去瓜柱一类短柱外，任何柱子都不是上下等径的圆柱体，而是根部（柱脚、柱根）略粗，顶部（柱头）略细。这种根部粗、顶部细的作法，称为“收溜”，又称“收分”。要柱做出收分，既稳定又轻七，给人以舒适的感觉。各式建筑收分的大小一般为柱高的1/100，如柱高3米，收分为3厘米，假定柱根为27厘米，那么，柱头收分后直径为24厘米。大式建筑柱子的收分，《营造算例》规定为7/1000。</p>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

（3）.古建历史：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>古代建筑历史</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="banner"><img src="images/banner1.jpg" alt=""></div>
    <div class="con">
        <div class="zhishi">
            <h1>古代建筑历史</h1>
            <div class="shipin">
                <video width="1000" height="562" controls>
                    <source src="video/lishi.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。
                </video>
            </div>
            <p>建筑，一个可以让人们“读”出一个时代、一个地区、一个民族发展的所有印记</p>
            <p>我国的文化博大精深，建筑则如一位历史使者一路见证着它的变迁，几千年的历史变迁才形成了这样一部博大精深，绚丽多彩的建筑大作。</p>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

（4）.古建典范：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>故宫</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="banner">
        <img src="images/banner3.jpg" alt="">
    </div>
    <div class="main">
        <div class="atwo">
            <div class="chenlie">
                <h3>世界上现存规模最大、保存最为完整的木质结构古建筑-故宫<span></span></h3>
                <p>故宫又称紫禁城。 中国古代讲究“天人合一”的规划理念，用天上的星辰与都城规划相对应，以突出政权的合法性和皇权的至高性。天帝居住在紫微宫，而人间皇帝自诩为受命于天的“天子”，其居所应象征紫微宫以与天帝对应，《后汉书》载“天有紫微宫，是上帝之所居也。王者立宫，象而为之”。 紫微、紫垣、紫宫等便成了帝王宫殿的代称。由于封建皇宫在古代属于禁地，常人不能进入，故称为“紫禁”。明朝初期同外禁垣一起统称“皇城”，大约明朝中晚期，与外禁垣区分开来，即宫城叫“紫禁城”，外禁垣为“皇城”。</p>
                <p>故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</p>
                <p>故宫于明成祖永乐四年（1406年）开始建设，以南京故宫为蓝本营建，到永乐十八年（1420年）建成，成为明清两朝二十四位皇帝的皇宫。民国十四年国庆节（1925年10月10日）故宫博物院正式成立开幕。北京故宫南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的护城河。紫禁城有四座城门，南面为午门，北面为神武门，东面为东华门，西面为西华门。城墙的四角，各有一座风姿绰约的角楼，民间有九梁十八柱七十二条脊之说，形容其结构的复杂。</p>
                <p>故宫内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。三大殿左右两翼辅以文华殿、武英殿两组建筑。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。其后为御花园。后三宫两侧排列着东、西六宫，是后妃们居住休息的地方。东六宫东侧是天穹宝殿等佛堂建筑，西六宫西侧是中正殿等佛堂建筑。外朝、内廷之外还有外东路、外西路两部分建筑。</p>
            </div>
        </div>
        <div class="athr">
            <div class="xinwen fl">
                <img src="images/4.jpg" alt="">
            </div>
            <div class="jiangzuo fr">
                <img src="images/gu2.jpg" alt="">
            </div>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>苏州园林</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="banner">
        <img src="images/banner4.jpg" alt="">
    </div>
    <div class="main">
        <div class="aone">
            <div class="ren fl">
            </div>
            <div class="tag2 fr">
                <h1>“咫尺之内再造乾坤”——苏州园林</h1>
                <p>苏州古典园林，亦称“苏州园林”，是位于江苏省苏州市境内的中国古典园林的总称。苏州古典园林溯源于春秋，发展于晋唐，繁荣于两宋，全盛于明清。苏州素有“园林之城”的美誉，境内私家园林始建于前6世纪，清末时城内外有园林170多处，现存50多处。</p>
                <p>苏州古典园林宅园合一，可赏，可游，可居。这种建筑形态的形成，是在人口密集和缺乏自然风光的城市中，人类依恋自然、追求与自然和谐相处、美化和完善自身居住环境的一种创造。苏州古典园林所蕴涵的中华哲学、历史、人文习俗是江南人文历史传统、地方风俗的一种象征和浓缩，展现了中国文化的精华，在世界造园史上具有独特的历史地位和重大的艺术价值。以拙政园、留园为代表的苏州古典园林被誉为“咫尺之内再造乾坤”，是中华园林文化的翘楚和骄傲。</p>
                <p>苏州古典园林是文化意蕴深厚的“文人写意山水园”。其建筑布局、结构、造型及风格，都巧妙地运用了对比、衬托、对景、借景以及尺度变换、层次配合和小中见大、以少胜多等种种造园艺术技巧和手法，将亭、台、楼、阁、泉、石、花、木组合在一起，在城市中创造出人与自然和谐的居住环境。构成了苏州古典园林的总体特色。苏州古典园林占地面积小，采用变换无穷、不拘一格的艺术手法，以中国山水花鸟的情趣，寓唐诗宋词的意境，在有限的空间内点缀假山、树木，安排亭台楼阁、池塘小桥，使苏州古典园林以景取胜，景因园异，给人以小中见大的艺术效果。</p>
            </div>
        </div>
        <div class="athr">
            <div class="xinwen fl">
                <img src="images/s1.jpg" alt="">
            </div>
            <div class="jiangzuo fr">
                <img src="images/s2.jpg" alt="">
            </div>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

（5）.古建欣赏：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>古代建筑欣赏</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <header>
        <div class="nav">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></li>
                <li><a href="index.html">古建首页</a></li>
                <li><a href="zhishi.html">古建知识</a></li>
                <li><a href="lishi.html">古建历史</a></li>
                <li class="down">
                    <a href="#">古建典范</a>
                    <ul class="drop">
                        <li><a href="gu.html">故 宫</a></li>
                        <li><a href="su.html">苏州园林</a></li>
                    </ul>
                </li>
                <li><a href="xinshang.html">古建欣赏</a></li>
            </ul>
        </div>
    </header>
    <div class="xinshang con">
        <div class="xbox">
            <p>有一种美，是历史沉淀下来的味道，我国两千多年的历史铸就了无数这样的美。这个春天，不如去感受下生机勃勃的时节与浓重的历史底蕴能碰撞出怎样的激情！下面特地为大家挑选出中国最有底蕴与气质的十大古建筑来欣赏，快来感受时光从身体中穿越的心旷神怡吧！</p>
        </div>
    </div>
    <div class="xin">
        <div class="shou">
            <h1>十大古建筑</h1>
            <h2>一、世界上最大的宫殿故宫</h2>
            <img src="images/c10.png" alt="">
            <p>故宫,又名紫禁城，位于老北京城的中轴线上，是明朝和清朝的皇室。占地72万平方米，建筑面积约15万平方米，共有殿宇9999间半，是世界最大的宫殿，也是中国现存最大最完整的古建筑群。整个建筑群按中轴线对称布局，层次分明，主体突出。太和殿，又称金銮殿，是明、清皇帝举行大典的地方。它在故宫三大殿中是最大的一座，也是中国古代宫殿建筑中最大的木结构宫殿。故宫是中国最大的艺术博物馆，收藏着90多万件历史文物和艺术品，其中有许多稀世珍宝。</p>
            <h2>二、世界屋脊的明珠布达拉宫</h2>
            <img src="images/c11.jpg" alt="">
            <p>布达拉宫依山垒砌，群楼重叠，殿宇嵯峨，气势雄伟，有横空出世、气贯苍穹之势，坚实墩厚的花岗石墙体，松茸平展的白玛草墙领，金碧辉煌的金顶，具有强烈装饰效果的巨大鎏金宝瓶、幢和红幡，交相映辉，红、白、黄3种色彩的鲜明对比，分部合筑、层层套接的建筑型体，都体现了藏族古建筑设计迷人的特色。布达拉宫是藏建筑的杰出代表，也是中华民族古建筑的精华之作。</p>
            <h2>二、慈禧太后的寝宫颐和园</h2>
            <img src="images/c12.jpg" alt="">
            <p>颐和园是清代的皇家花园和行宫。乾隆继位以前，在北京西郊一带，已建起了四座大型皇家园林，从海淀到香山这四座园林自成体系，相互间缺乏有机的联系，中间的瓮山泊成了一片空旷地带，乾隆决定在瓮山一带动用巨额银两兴建清漪园，以此为中心把两边的四个园子连成一体，形成了从现清华园到香山长达20公里的皇家园林区。</p>
            <h2>四、道教宫殿式建筑永乐宫</h2>
            <img src="images/c17.jpg" alt="">
            <p>永乐宫修建于元代,施工期前后共110多年,才建成了这个规格宏大的道教宫殿式建筑群。特别是宫殿内部的墙壁上，布满了精心绘制的壁画，其艺术价值之高，数量之多，实属世上罕见。来到山西，自然不能放过去永乐宫欣赏元代壁画的机会。永乐宫是典型的元代建筑风格，粗大的斗拱层层叠叠地交错着，四周的雕饰不多，比起明、清两代的建筑，显得较为简洁、明朗。几个殿以南、北为中轴线，依次排列。</p>
            <h2>五、 中国第一座皇家陵园秦始皇陵</h2>
            <img src="images/c16.jpg" alt="">
            <p>秦始皇陵位于西安以东30公里的骊山北麓，南依骊山，北临渭水。高大的封冢在巍巍峰峦环抱之中与骊山浑然一体，景色优美，环境独秀。秦始皇陵于公元前246年，秦始皇初即位开工修建，前后历时38年，动用徭役、刑徒72万余人。这位叱咤风云的旷世君主不仅为后人留下了千秋伟业，还留有这座神秘莫测的皇家陵园。陵园建制仿都邑，陵墓周围呈回字型，筑有内、外两重城垣，目前探明的大型地面建筑为寝殿、便殿、园寺吏舍等基址。</p>
            <h2>六、天下绝景黄鹤楼</h2>
            <img src="images/c15.jpg" alt="">
            <p>黄鹤楼巍峨耸立于武昌蛇山之巅，原址在湖北武昌蛇山黄鹤矶头，自古与湖南岳阳楼，江西滕王阁并称为江南三大名楼。历代名士都先后到这里游乐，吟诗作赋。而崔颢的诗《黄鹤楼》：昔人已乘黄鹤去，此地空余黄鹤楼。黄鹤一去不复返，白云千载空悠悠。晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是，烟波江上使人愁。一直被认为是唐诗七律压卷之作，很多人都能背诵。因这首诗，成就了黄鹤楼文化名楼的地位。</p>
            <h2>七、天下第一桥赵州桥</h2>
            <img src="images/c14.jpg" alt="">
            <p>赵州桥原名安济桥，俗称大石桥，建于隋炀帝大业年间（595~605年），至今已有1400年的历史，是当今世界上最古老的石拱桥。石拱桥是用石块拼砌成弯曲的拱作为桥身，上面修成平坦的桥面，以行车走人。而赵州桥的特点是敞肩式，即在大拱的两肩上再辟小拱，是石拱桥结构中最先进的一种。她是世界上现存年代最久、单孔跨度最大、保存最完整的一座敞肩型石拱桥，被世人公认为天下第一桥。赵州桥正名安济桥，俗称大石桥。其设计者是隋朝匠师李春。赵州桥是正常的交通运输桥，它的桥身弧线优美，远眺犹如苍龙飞驾，又似长虹饮涧。尤其具有艺术特色的是栏板以及望栓上的浮雕。充分显示了隋代矫健、俊逸、浑厚、严整的石雕风貌。整个大桥堪称一件精美的艺术珍品，称得上是隋唐时代石雕艺术的精品。</p>
            <h2>八、江西赣州客家古建筑欣赏</h2>
            <img src="images/c13.jpg" alt="">
            <p>客家，原是当地土著居民对客居外来户的称呼。在演变、流转、碰撞、融合中，客家逐渐与这里的原住居民一道，成为这块土地的主人。从此，在中国汉民族的谱系中多了一个优秀的民系——客家，并从这里出发，衍播世界、影响五洲。一代代客家人在赣州这片热土上开拓耕耘，创造了璀璨夺目的客家文化，也让客家文化旅游成为赣州独具一格的旅游名片。</p>
        </div>
    </div>
    <footer>
        <div class="ftop">
            <ul>
                <li><a href="index.html">古代建筑概况</a></li>
                <li><a href="zhishi.html">古代建筑知识</a></li>
                <li><a href="lishi.html">古代建筑历史</a></li>
                <li><a href="su.html">古代建筑典范</a></li>
                <li><a href="xinshang.html">古代建筑欣赏</a></li>
            </ul>
        </div>
        <div class="fbtm">
            <p>欢迎了解古代建筑，中国古建筑文化是非常雄厚灿烂的,中国古代建筑具有悠久的历史传统和光辉的成就。</p>
        </div>
    </footer>
</body>

</html>

（6）.CSS：

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

body {
    font-family: 微软雅黑;
    font-size: 14px;
    background: #eee;
}

p {
    text-indent: 2em;
    line-height: 22px;
}

header {
    width: 1200px;
    margin: 0 auto;
    height: 60px;
    margin-bottom: 15px;
}

.nav {
    width: 100%;
    height: 60px;
    padding-top: 15px;
    background: #231815;
}

.nav a {
    display: block;
    line-height: 44px;
    color: #ff7764;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    width: 100%;
    height: 100%;
}

.nav a:hover {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.nav>ul>li {
    float: left;
    width: 182px;
    height: 44px;
}

.nav img {
    vertical-align: middle;
}

.nav .logo {
    margin-left: 15px;
    padding: 0;
    margin-top: -6px;
    width: 240px;
    height: 55px;
    line-height: 55px;
}

.nav .down {
    position: relative;
}

.drop {
    display: none;
    position: absolute;
    left: 0;
    bottom: -60px;
    z-index: 999;
    border: 1px solid #fff;
}

.drop a {
    display: block;
    width: 180px;
    height: 30px;
    line-height: 30px;
    color: #ff7764;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    background: #333;
    border: 1px solid #ccc;
}

.down:hover .drop {
    display: block;
}

.con {
    width: 1200px;
    margin: 0 auto;
}

.banner {
    width: 1200px;
    margin: 0px auto 15px;
}

.banner img {
    display: block;
    width: 1200px;
}

.gai {
    padding: 80px 0 80px 700px;
    color: #fff;
    background: url(../images/li.png) no-repeat;
}

.gai h2,
.li h2 {
    margin-bottom: 18px;
    color: #fff;
}

.gai h3 {
    margin-bottom: 18px;
    padding-left: 10px;
    border-left: 3px solid #fff;
}

.gai p {
    margin-bottom: 18px;
    color: #ccc;
    width: 423px;
    text-indent: 2em;
}

.zhishi h1 {
    padding: 30px 0;
    text-align: center;
    color: #ff7764;
}

.zhishi {
    background: #fff;
    padding-bottom: 90px;
}

.zhishi p {
    line-height: 26px;
    text-indent: 2em;
    padding: 10px 60px;
}

.zhishi h2 {
    color: #ff9b8d;
    padding: 25px 0;
    text-align: center;
}

.zhishi img {
    width: 450px;
    float: left;
    margin: 20px 20px 20px 60px;
}

.shipin {
    width: 1000px;
    margin: 0 auto 40px;
}

table {
    width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

.yan {
    height: 500px;
    position: relative;
    margin-bottom: 15px;
}

.yleft {
    width: 750px;
    background: url(../images/yan.jpg);
    height: 500px;
    color: #333;
}

.yleft h2,
.gtxt h2,
.you h2 {
    padding: 85px 0 25px;
    text-align: center;
}

.yleft p {
    padding: 0 75px;
    margin-bottom: 25px;
    color: #333;
    line-height: 26px;
    font-size: 16px;
}

.yright {
    width: 435px;
    height: 500px;
    background: #fff;
}

.yline {
    width: 66px;
    margin: 0 auto 25px;
    height: 3px;
    background: #b43b59;
}

.yright>img {
    display: block;
    width: 435px;
    height: 170px;
}

.yrtxt {
    width: 435px;
    height: 100px;
    padding-top: 20px;
}

.yrtxt>img {
    float: left;
    margin: 0 10px;
    width: 98px;
    height: 85px;
}

.yrtxt h4 {
    font-weight: 300;
    font-size: 16px;
    padding: 15px 0;
}

.more {
    width: 384px;
    height: 53px;
    border: 1px solid #ccc;
    margin: 20px auto 0;
    border-radius: 5px;
}

.more a {
    display: block;
    width: 384px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    color: #222;
    font-size: 20px;
}

.more a:hover {
    color: #ff7764;
    font-weight: bolder;
}

footer {
    width: 1200px;
    margin: 0 auto;
}

.ftop {
    padding: 47px 234px;
    background: #231815;
    color: #fff;
    overflow: hidden;
}

.ftop li {
    float: left;
    margin-right: 50px;
    color: #fff;
    font-weight: bold;
    width: 96px;
    height: 15px;
    line-height: 24px;
}

.ftop li a {
    color: #ff7764;
    font-size: 16px;
    display: block;
    width: 96px;
    height: 25px;
    line-height: 5px;
    text-align: center;
}

.fbtm {
    height: 60px;
    font-size: 14px;
    background: #000;
}

.fbtm p {
    line-height: 60px;
    text-align: center;
    color: #555;
    font-size: 16px;
}


.main {
    width: 1200px;
    margin: 15px auto 0;
}

.aone {
    overflow: hidden;
    margin-bottom: 18px;
}

.ren {
    width: 368px;
    height: 529px;
    background: url(../images/a3.jpg);
    color: #fff;
}

h3 {
    position: relative;
}

h3 span {
    display: block;
    width: 450px;
    background: red;
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -225px;
}

.tag2 {
    width: 820px;
    height: 529px;
    position: relative;
}

.tag2 h1 {
    padding-top: 30px;
    text-align: center;
}

.tag2 p {
    padding: 20px 36px;
    font-size: 16px;
    line-height: 22px;
}

.atwo {
    height: 736px;
    overflow: hidden;
    margin: 15px 0;
}

.chenlie {
    width: 1200px;
    height: 736px;
    background: url(../images/2.jpg) no-repeat;
    color: #fff;
}

.chenlie h3 {
    padding-top: 50px;
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}

.chenlie h3 span {
    bottom: -15px;
}

.chenlie p {
    width: 1000px;
    margin: 0 auto;
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    text-indent: 2em;
    margin-bottom: 20px;
}

.athr {
    overflow: hidden;
    height: 417px;
    margin-bottom: 18px;
}

.xinwen {
    width: 600px;
    height: 417px;
    color: #fff;
}

.athr img {
    width: 100%;
    height: 100%;
}

.jiangzuo {
    width: 588px;
    height: 417px;
}

.xinshang {
    background: url(../images/banner5.jpg) no-repeat;
    height: 680px;
}

.xbox {
    color: #333;
    padding-top: 93px;
    padding-left: 256px;
    width: 830px;
}

.xbox p {
    font-size: 22px;
    margin-bottom: 50px;
    line-height: 30px;
}

.xin {
    width: 1134px;
    margin: 0 auto;
    padding: 22px 33px 40px;
    background: #fff;
}

.xin h1 {
    border-left: 4px solid #000;
    padding-left: 4px;
    font-size: 33px;
    margin-bottom: 24px;
}

.gimg {
    margin-right: 48px;
}

.shou p {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 24px;
}

.shou h2 {
    margin: 20px 0 12px;
}

四.遇到问题及解决办法

1.不了解github部署项目，经过了上网查阅才完成了对项目的部署。

2.当使用github进行项目托管的时候，对于在网页上需要从网页链接进行加载的图片，加载不出来。需要把图片放到本地中再进行托管，这样就不会发生以上的问题。

五.未解决的问题

对于HTML和CSS的运用不是非常的熟练，导致网页中仍有缺陷存在。并且本次也没有使用Angular框架，没有将网页界面呈现的很好。

六.总结

本次实验我选择的是写静态网站。在本次实验中还是遇到了一些困难，因为对于有的HTML和CSS语言的应用还不是非常的熟练，导致在实验过程中对于网页的显示样式等等处理出现了问题，但是也经过了查阅老师的学习资料和询问同学克服了这些问题。

在本次的实验中还是收获了许多的东西，在实验的过程中，我也对Web的应用更加地熟练了，加深了我对知识点的理解和掌握。对于网页的框架也有了更多的思考，在自己对于网页框架不知如何构建的时候，我也有在网上查询翻阅他人写的网页，学习他们的结构布局，有了更多的体会。通过这次的实验让我对Web课程有了更大的兴趣，觉得写出一个精美的网页是一件很厉害的事情，自己也想去好好研究对于网页编程的相关知识，希望以后能多学习相关的知识，写出更加精美的网页。

总而言之，虽然实验途中是有坎坷，但是最终成功地完成本次实验，使我收获了许多的知识。