我的家乡（扬州）部分代码实现（扬州历史）

学前端的土土

已于 2023-04-07 23:26:33 修改

阅读量142

点赞数 1

分类专栏：前端初学文章标签： css html javascript

于 2023-04-07 23:21:45 首次发布

本文链接：https://blog.csdn.net/m0_67409661/article/details/130022447

版权

前端初学专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用CSS和HTML编写的关于扬州历史的简单网页。网页设计中应用了CSS选择器，包括类选择器、ID选择器和后代选择器，以及背景图像、文字修饰等样式。内容部分介绍了扬州自古至今的历史沿革，展示了其丰富的历史文化。

摘要由CSDN通过智能技术生成

这是我完成的一个简单的网页，主要运用了css以及HTML。

下面是部分介绍：

首先是css部分

<!DOCTYPE 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>
</head>
<style>
    div h1
    {
        background-image: url(./picture/lishi\ logo.jpg);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 20%;
        color:#B2CCF7;
        margin: 0;
        height: 200px;
        line-height: 200px;
        font-size: 50PX;
        letter-spacing: 15px;
        text-indent: 6em;
    }
    div p
    {
        margin-top: 0.5em; 
        margin-bottom: 0.5em; 
        text-indent: 2em; 
        line-height: 2; 
        font-family: 宋体; 
        font-size: 12pt;  
        margin: 0;
        
    }
      
</style>

这一部分是对css选择器的使用，包括简单的类选择器、id选择器、后代选择器等等基础

同时也使用了很多css中背景、文字的修饰

如：background-repeat:no-repeat 是不铺开图片。正常情况下是默认铺开的。

line-height:2 是对文字上下间距的调节注意：当line-height的值等于div的高值，文字垂直居中。

用到的背景图片在这

下面是<body>部分


<body>
    <div>
        <h1 align="center">充满历史底蕴的城市----<a href="shouye.html"  style="text-decoration: none;">扬州</a></h1>
    </div>
    <div>
        <HR align=right width=1172 color=黑色 SIZE=2>
    </div>
    <div>
        <p>扬州有<font color="red">2500年</font>有文字可考的历史。</p>
        <p>大约距今7000～5000年前，淮夷人就在扬州一带劳动生息，并有了水稻栽种。</p>
        <p>春秋时期，今扬州市区西北部一带称邗。公元前486年，吴灭邗，筑邗城，开邗沟，连接长江、淮河。越灭吴，地属越；楚灭越，地归楚。公元前319年，楚在邗城旧址上建城，名广陵。</p>
        <p>汉代，今扬州称广陵、江都，长期是诸侯王的封地。吴王刘濞“即山铸钱、煮海为盐”，开盐河（通扬运河前身），促进了经济的发展。</p>
        <p>南北朝时期，广陵屡经战乱，数次变为“芜城”，但由于劳动人民数百年的辛勤开发，经济地位在恢复中不断提高。山东青州、兖州一带的移民南迁广陵一带，促进了扬州的经济发展。</p>
        <p>589年，隋灭陈，建立统一的隋政权，改吴州为扬州，置总管府。</p>
        <p>唐代扬州农业、商业和手工业相当发达，出现了大量的工场和手工作坊，不仅富甲江淮，而且是中国东南第一大都会。</p>
        <p>唐末五代，军阀混战，扬州遭到严重破坏。887年，杨行密开始入主扬州。</p>
        <p>960年，北宋建立。农业、手工业迅速发展，商业进一步繁荣，扬州再度成为中国东南部的经济、文化中心，与都城开封相差无几。</p>
        <p>元、明两代，扬州经济发展加快。</p>
        <p>清代，康熙帝和乾隆帝多次“巡幸”，使扬州出现空前繁华，城市人口超过50万人，成为当时中国八大城市之一，也是18世纪末、19世纪初世界十大城市之一。</p>
        <p>19世纪中叶以后，由于运河山东段淤塞，漕粮改经海上运输，淮盐改由铁路转运，加上其他方面的原因，扬州在经济上逐渐衰落。</p>
        <p>1912年，“中华民国”废扬州府，置江都县。</p>
        <p>1948年底至1949年4月，扬州各县相继解放。1949年1月25日，今扬州市区解放，设置扬州市；以仙女庙镇为治所，另建江都县。</p>
    </div>
    <div>
        
    </div>
</body>
</html>

上面部分就很简单了，大部分是HTML各种标签的运用

今天这部分就到这啦，希望能帮到大家。

刚开始学前端，请多多指教！！