web前端网页制作小组作业（制作一个简单的小网页）

下面是web前端的小作业一个关于中国传统文化（详细页面）的页面

下面是效果图

当鼠标悬浮在图片上面时弹出文字框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/style1.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <h1>中华诗词文化</h1>
        <p>诗词，是指以古体诗、近体诗和格律词为代表的中国汉族传统诗歌。亦是汉字文化圈的特色之一。通常认为，诗较为适合“言志”，而词则更为适合“抒情”。
            诗词是阐述心灵的文学艺术，而诗人、词人则需要掌握成熟的艺术技巧，并按照严格韵律要求，用凝练的语言、绵密的章法、充沛的情感以及丰富的意象来高度集中地表现社会生活和人类精神世界。</p>
    </div>
    <div class="nav">
        <p>中国是一个爱诗的国度，中国人是一个爱诗的民族。</p>
    </div>
    <div class="search"><div class="search bar7">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div></div>
    <div class="content">
       <ul>
           <li>
               <a href="https://baike.baidu.com/item/%E4%B8%83%E8%A8%80%E5%BE%8B%E8%AF%97"><h3>七言律诗</h3>
                <p>七言律诗，是中国 传统诗歌的一种 体裁，简称七律，属于 近体诗范畴。起源于 南朝齐永明时 沈约等讲究声律、对偶的新体诗，至初唐 沈佺期、 宋之问等进一步发展定型，至盛唐 杜甫手中成熟。七言律诗 格律严密，要求诗句字数整齐划一，由八句组成，每句七个字，每两句为一联，共四联，分 首联、 颔联、 颈联和 尾联，中间两联要求 对仗。代表作品有 崔颢的《 黄鹤楼》、杜甫的《 登高》、 李商隐的《 安定城楼》等。</p>
                <div></div>
           </a>           
                </li>
        <li>
            <a href="https://baike.baidu.com/item/%E7%BB%9D%E5%8F%A5/96019?fr=aladdin">
                <h3>绝句</h3>
                <p>绝句，又称截句、断句、绝诗，四句一首，短小精萃。它是唐朝流行起来的一种汉族诗歌体裁，属于近体诗的一种形式。 [1]绝句一词最早在南朝的齐、梁时代就已出现。
                    各家对其解释并不一致，有人以为“截取律之半”以便入乐传唱。绝句由四句组成，分为 律绝和 古绝，其中律绝有严格的格律要求。常见的绝句有 五言绝句和 七言绝句， 六言绝句较为少见。</p>
            </a>
                 </li>
        <li>
            <a href="https://baike.baidu.com/item/%E5%9B%9B%E8%A8%80%E8%AF%97/1007972?fr=aladdin">
                <h3>四言诗</h3>
                <p>四言诗是中国传统诗歌的一种体裁，“四言”指四字组成的 诗句，属于 古体诗范畴。四言诗指通首都是或基本是四字句写成的诗歌。在 上古歌谣及《周易》韵语中，已有所见，到中国第一部诗歌总集《诗经》中，虽杂有三、五、七、八、 九言之句，而基本上是四言体。代表作有《观沧海》、《龟虽寿》等起源于汉楚，盛行于西周。</p>
            </a>
             </li>
        <li>
            <a href="https://baike.baidu.com/item/%E4%BA%94%E8%A8%80%E5%8F%A4%E8%AF%97/654220?fr=aladdin">
                <h3>五言诗</h3>
            <p>五言诗，古代诗歌体裁之一。是指每句五个字的诗体，全篇句数不定，但每句皆为五字。五言诗属于吸收民歌的形式而成。五言诗可以容纳更多的词汇，从而扩展了诗歌的容量，能够更灵活细致地抒情和叙事。在音节上，奇偶相配，也更富于音乐美。因此，它更为适应汉以后发展了的社会生活，从而逐步取代了四言诗的正统地位，成为古典诗歌的主要形式之一。初唐以后，产生了近体诗，其中即有五言律诗、五言绝句。</p>
      
            </a>
              </li>
    </ul>
        </div>
        <div id="container">
            <div id="photo"><img src="images/k.jpg" style="width:250px;
                height:400px;"/></div>
            <div id="content">
              <div id="text"><h2>李白</h2></div>
              <div id="news"><p>李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”， 唐代伟大的 浪漫主义诗人，被后人誉为“诗仙”，与 杜甫并称为“ 李杜”，为了与另两位诗人 李商隐与 杜牧即“ 小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授 李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。“ [1]《旧唐书》记载李白为山东人 [2]；《新唐书》记载，李白为兴圣皇帝 李暠九世孙，与 李唐诸王同宗。其人 爽朗大方，爱饮酒作诗，喜交友 [3]。
                李白深受 黄老列庄思想影响，有《 李太白集》传世，诗作中多以醉时写的，代表作有《 望庐山瀑布》《 行路难》《 蜀道难》《 将进酒》《 明堂赋》《 早发白帝城》等多首。 [3]
                李白所作词赋，宋人已有传记（如 文莹《 湘山野录》卷上），就其开创意义及艺术成就而言，“李白词”享有极为崇高的地位。</p></div>
           </div>
         </div>
         <div id="container1">
            <div id="photo1"><img src="images/k1.jpg" style="width:250px;
                height:400px;"/></div>
            <div id="content1">
              <div id="text1"><h2>杜甫</h2></div>
              <div id="news1"><p>杜甫（712年2月12日 [1]～770年），字子美，自号少陵野老， 唐代著名现实主义诗人，与 李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。 [2] [3]为了与另两位诗人 李商隐与 杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”。 [2]
                杜甫少年时代曾先后游历 吴越和齐赵，其间曾赴 洛阳应举不第。三十五岁以后，先在 长安应试，落第；后来向皇帝献赋，向贵人投赠。官场不得志，目睹了唐朝上层社会的奢靡与社会危机。天宝十四载（755年）， 安史之乱爆发，潼关失守，杜甫先后辗转多地。乾元二年（759年）杜甫弃官入川，虽然躲避了战乱，生活相对安定，但仍然心系苍生，胸怀国事。杜甫创作了《 登高》《 春望》《 北征》以及“ 三吏”、“ 三别”等名作。虽然杜甫是个现实主义诗人，但他也有 狂放不羁的一面，从其名作《 饮中八仙歌》不难看出杜甫的豪气干云。
                杜甫的思想核心是 仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对 中国文学和 日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《 杜工部集》。 [4]
                大历五年（770年）冬，病逝，享年五十九岁。杜甫在 中国古典诗歌中的影响非常深远，被后人称为“ 诗圣”，他的诗被称为“ 诗史”。后世称其杜拾遗、杜工部，也称他杜少陵、杜草堂。</p></div>
           </div>
         </div>

         <div id="container">
            <div id="photo"><img src="images/k5.jpg" style="width:250px;
                height:400px;"/></div>
            <div id="content">
              <div id="text"><h2>李清照</h2></div>
              <div id="news"><p>李清照（1084年3月13日－1155年） [1]，号 易安居士，济南人 [2]。 宋代女词人，婉约词派代表，有“千古第一才女”之称。
                李清照出生于书香门第，早期生活优裕，其父 李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与丈夫 赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对以作诗文之法作词。能诗，留存不多，部分篇章感时咏史，情辞慷慨，与其词风不同。
                有《 李易安集》《易安居士文集》《 易安词》，已散佚。后人辑有《 漱玉集》《 漱玉词》。今有《 李清照集》辑本。李清照出生于一个爱好文学艺术的士大夫的家庭。父亲 李格非是济南历下人（也有济南章丘人一说） [4]，进士出身， 苏轼的学生，官至提点刑狱、礼部 员外郎。藏书甚富，善属文，工于词章。现存于曲阜孔林思堂之东斋的北墙南起第一方石碣刻，上面写有：“提点刑狱、历下李格非，崇宁元年（1102年）正月二十八日率褐、过、迥、逅、远、迈，恭拜林冢下。”母亲是状元 王拱辰的孙女（一说宰相王珪长女），很有文学修养。</p></div>
           </div>
         </div>

         <div id="container1">
            <div id="photo1"><img src="images/k7.jpg" style="width:250px;
                height:400px;"/></div>
            <div id="content1">
              <div id="text1"><h2>屈原</h2></div>
              <div id="news1"><p> 屈原（约公元前340—公元前278年）， 芈姓，屈氏，名平，字原，又自云名正则，字灵均，出生于楚国丹阳 秭归（今湖北宜昌）， 战国时期 楚国诗人、政治家。 [1]楚武王 熊通之子 屈瑕的后代。少年时受过良好的教育，博闻强识，志向远大。早年受 楚怀王信任，任 左徒、 三闾大夫，兼管内政外交大事。 提倡“美政”，主张对内举贤任能，修明法度，对外力主联齐抗秦。因遭贵族排挤诽谤，被先后流放至 汉北和 沅湘流域。 [2]楚国 郢都被秦军攻破后，自沉于 汨罗江，以身殉楚国。
                屈原是中国历史上一位伟大的爱国诗人，中国 浪漫主义文学的奠基人，“ 楚辞”的创立者和代表作家，开辟了“ 香草美人”的传统，被誉为“楚辞之祖”，楚国有名的辞赋家 宋玉、 唐勒、 景差都受到屈原的影响。 [3]屈原作品的出现，标志着中国诗歌进入了一个由大雅歌唱到浪漫独创的新时代 [4]，其主要作品有《 离骚》《 九歌》《 九章》《 天问》等。以屈原作品为主体的《 楚辞》是中国浪漫主义文学的源头之一，以最著名的篇章《 离骚》为代表的《 楚辞》与《 诗经》中的《 国风》并称为“ 风骚” [5] [6]，对后世诗歌产生了深远影响。成为中国文学史上的璀璨明珠，“逸响伟辞，卓绝一世”。 [1]“路漫漫其修远兮，吾将上下而求索”，屈原的“求索”精神，成为后世仁人志士所信奉和追求的一种高尚精神。 [1]
                1953年，在屈原逝世2230周年之际， 世界和平理事会通过决议，确定屈原为当年纪念的 世界四大文化名人之一</p></div>
           </div>
         </div>
    <div class="footer">
        <a href="主页面（中国传统文化）.html"><h2>返回介绍页面</h2></a>
    </div>
</body>
</html>

style.css部分代码（跟html）文件在同一个文件夹下面

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: darkgreen;
}

h1 {
    text-align: center;
    color: bisque;
    font-size: 2.5em;
    font-family: "楷体";
}

.top {
    width: 100%;
    height: 100px;
    background-color: darkcyan;
    color: bisque;
    font-family: "楷体";
}

.nav {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    font-family: "楷体";
    text-align: center;
    font-size: 2.5em;
    color: rgb(160, 76, 8);
    background-image: url(images/background.gif);
}

.search {
    width: 100%;
    height: 100px;
    border-radius: 30px;
    background-color: dodgerblue;
    margin-bottom: 5px;

}

.content {
    margin: auto;
    width: 88%;
    height: 450px;
}

.copyright p {
    float: left;
}

ul {
    float: left;
    width: 98%;
    padding-top: 10px;
    overflow: hidden;
    margin-left: 8px;
}

ul li {
    list-style: none;
    float: left;
    width: 265px;
    height: 400px;
    background-size: cover;
    margin-left: 5px;
}


ul li:nth-of-type(1) {
    background-image: url(images/b10.jpg);
}

ul li:nth-of-type(2) {
    background-image: url(images/b7.jpg);
}

ul li:nth-of-type(3) {
    background-image: url(images/b14.jpg);
}

ul li:nth-of-type(4) {
    background-image: url(images/b15.jpg);
}

ul li a {
    text-decoration: none;
    color: #ddd;
    display: block;
    width: 265px;
    height: 400px;
    background-color: rgb(0, 0, 0, 0.5);
    transform: translateY(400px);
    transition: all linear 1s;
}

ul li:hover a {
    transform: translateY(0);
}

ul li a h3 {
    font-size: 30px;
    margin-left: 20px;
    margin-top: 50px;
    font-family: "楷体";
}

ul li a p {
    font-size: 15px;
    margin-left: 20px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid 1px #F9F0DA;
    font-family: "楷体";

}

.footer {
    clear: both;
    width: 100%;
    height: 50px;
    border: 1px solid rgba(0, 110, 255, 0.842);
    border-radius: 20px;
    background-color: rgba(68, 160, 190, 0.685);
    text-align: center;
}

body {
    margin: 0;
    padding: 0;
    font-weight: 500px;
}

form {
    position: relative;
    width: 300px;
    margin: 0 auto;
}

input,
button {
    border: none;
    outline: none;
    text-align: center;
}

input {
    width: 100%;
    height: 42px;
    padding-left: 13px;
}

button {
    height: 42px;
    width: 42px;
    cursor: pointer;
    position: absolute;

}

.bar7 {
    background: #7BA7AB;
}

.bar7 form {
    height: 42px;
}

.bar7 input {
    width: 250px;
    border-radius: 42px;
    border: 2px solid #24b42b;
    background: #F9F0DA;
    transition: .3s linear;
    float: right;
    vertical-align: middle;
}

.bar7 input:focus {
    width: 300px;
}

.bar7 button {
    background: none;
    top: -2px;
    right: 0;
}

.bar7 button:before {
    content: "\f002";
    font-family: FontAwesome;
    color: #24b42b;
}

style1.css部分代码（在css的站点文件夹里面）

#container {
    border: ivory 2px solid;
    clear: both;
    width: 100%;
}

#photo {
    float: left;
    margin: 10px;
    margin-left: 30px;
}

#content {
    float: right;
    width: 65%;
}

#text h2 {
    margin-top: 15px;
    color: ivory;
    font-size: 30px;
    text-align: center;
    font-family: "楷体";
}

#news p {
    margin-right: 40px;
    font-size: 20px;
    margin: 15px;
    color: lavenderblush;
    font-family: "楷体";
}




#container1 {
    margin: 10px;
    border: ivory 2px solid;
    clear: both;
    width: 100%;
}

#photo1 {
    margin-top: 30px;
    margin-right: 40px;
    float: right;
    margin: 10px;
    margin-left: 30px;
}

#content1 {
    float: left;
    width: 65%;
}

#text1 h2 {
    margin-top: 15px;
    color: ivory;
    font-size: 30px;
    text-align: center;
    font-family: "楷体";
}

#news1 p {
    margin-right: 40px;
    font-size: 20px;
    margin: 15px;
    color: lavenderblush;
    font-family: "楷体";
}

#wenzi p {
    float: left;
    color: white;
    font-size: 20px;
    font-family: "楷体";
}

#min {
    clear: both;
    width: 100%;
    border-top: 1px white solid;
}

.test {
    width: 100%;
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/39158.html

web前端网页制作 小组作业（制作一个简单的小网页）

相关推荐

发表回复

web前端网页制作小组作业（制作一个简单的小网页）