个人介绍静态网页【附源码】初学者的期中作业

MIKE笔记

发布于 2023-03-22 16:25:31

5240

发布于 2023-03-22 16:25:31

文章被收录于专栏：MIKE笔记技术教程MIKE笔记技术教程

文章目录

前言

一个简单的网页作业

至少包含3个页面
网页内容有音频，视频，图片

作为初学者的期中网页作业，再合适不过！ 在线查看静态网页建议电脑打开！

一、环境及目录

目录结构

个人介绍静态网页
    │  audio
   	│  │cannon.mp3
   	│  video
    │  │YMU.mp4
    │  img
   	│  │1.jpg
   	│  │2.jpg
   	│  │3.jpg
   	│  │4.jpg
   	│  │4.jpg
   	│  │6.jpg
   	│  css
   	│  │home.css
   	│  │about.css
   	│  │text.css
   	│home.html
    │text.html
    │About.html

环境：vs code

二、页面概览

①主页页面

②读书页面

③关于页面

三、页面主要代码

①主页页面

<body>
    <div class="wrapper">
        <div class="button">
            <ul>
                <li><a href="#banner">1</a></li>
                <li><a href="#album">2</a></li>
                <li><a href="#text">3</a></li>
                <li><a href="#about">4</a></li>

            </ul>
        </div>
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <ul>
                <li><a href="#"><img src="img/网红帅哥.png" width="40px" style="padding-top:20px;"></a></li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Text.html">读书</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="banner" id="banner">
                <p>Summer</p>
                <p>我们一个像夏天一个像秋天，却总能把冬天变成了春天</p>
                <img src="img/R-C.jpg" />
            </div>
            <div class="album" id="album">
                <div class="box">
                    <h1>相 册</h1>
                    <p>记录美好生活</p>
                </div>
                <ul>
                    <li><img src="img/11.jpg"></li>
                    <li><img src="img/22.jpg"></li>
                    <li><img src="img/33.jpg"></li>
                    <li><img src="img/44.jpg"></li>
                    <li><img src="img/88.jpg"></li>
                    <li><img src="img/99.jpg"></li>
                    <li><img src="img/66.jpg"></li>
                    <li><img src="img/55.jpg"></li>
                </ul>
            </div>
            <div class="video" id="video">
                <div class="box">
                    <h1>视 频</h1>
                    <p>留得住的才叫回忆</p>
                </div>
                <div class="lasa">
                    <video src="video/YMU.mp4" controls="controls">您的浏览器不支持视频</video>
                </div>
            </div>
            <div class="text" id="text">
                <div class="box">
                    <h1>文 字</h1>
                    <p>流淌在字里行间的岁月</p>
                </div>
                <ul class="recommend">
                    <li>
                        <h1 class="title">《秋日》</h1>
                        <p class="content">
                            主啊，是时候了。夏天盛极一时。

                            把你的阴影置于日晷上，

                            让风吹过牧场。

                            让枝头最后的果实饱满。

                            再给两天南方的好天气，

                            催它们成熟，把最后的甘甜压进浓酒。

                            谁此时没有房子，就不必建造，

                            谁此时孤独，就永远孤独，

                            就醒来，读书，写长长的信，

                            在林荫路上不停地，

                            徘徊，落叶纷飞。</p>
                        <p class="cite">———里尔克</p>
                    </li>
                    <li>
                        <h1 class="title">摘抄</h1>
                        <p class="content">
                            那一年我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云，后来我才知道，生活是个缓慢受锤的过程，人一天天老下去，奢望也一天天消逝，最后变得像挨了锤的牛一样。
                            可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。</p>
                        <p class="cite">———王小波</p>
                    </li>
                    <li>
                        <h1 class="title">《我与地坛》</h1>
                        <p class="content">
                            如果以一天中的时间来对应四季，当然春天是早晨，夏天是中午，秋天是黄昏，冬天是夜晚。如果以乐器来对应四季，我想春天应该是小号，夏天是定音鼓，秋天是大提琴，冬天是圆号和长笛。要是以这园子里的声响来对应四季呢？那么，春天是祭坛上空漂浮着的鸽子的哨音，夏天是冗长的蝉歌和杨树叶子哗啦啦地对蝉歌的取笑，秋天是古殿檐头的风铃响，冬天是啄木鸟随意而空旷的啄木声。
                        </p>
                        <p class="cite">———史铁生</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="about" id="about"></div>
    </div>
    <div class="foot">
        <p><img src="img/心情.png" width="20px"> </p>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">空间</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">网易</a></li>
            <li><a href="#">Bilili</a></li>
        </ul>
        <p>@2022.All Right Resoverd <a href="https://blog.csdn.net/m0_51607907?spm=1000.2115.3001.5343">MIKE笔记</a></p>

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

②读书页面

  <div class="box">
            <div class="list">
                <h1>目录</h1>
                <h2>Content</h2>
                <hr>
                <div class="item">
                    <ul>
                        <li><a href="#wydt">《我与地坛》</a></li>
                        <li><a href="#hjsd">《黄金时代》</a></li>
                        <li><a href="#gqnsrdx">《给青年诗人的信》</a></li>
                    </ul>
                </div>

            </div>
            <div class="content">
                <ul>
                    <li id="wydt">
                        <h1 class="title">《我与地坛》</h1>
                        <hr>
                        <div class="neirong">
                            <img src="img/book.jpg">
                            <p class="content">
                                假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。
                                看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。
                                于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。
                                那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
                            </p>
                        </div>
                        <div class="other"></div>
                    </li>
                    <li id="hjsd">
                        <h1 class="title">《黄金时代》</h1>
                        <hr>
                        <div class="neirong">
                            <img src="img/book(2).jpg">
                            <p class="content"> 波哥的小说《黄金时代》最后两段是这么写的：

                                “陈清扬说她真实的罪孽，是指在清平山上。那时她被架在我的肩上，穿着紧裹住双腿的筒裙，头发低垂下去，直到我的腰际。天上白云匆匆，深山里只有我们两个人。我刚在她屁股上打了两下，打得非常之重，火烧火撩的感觉正在飘散。打过之后我就不管别的事，继续往山上攀登。

                                陈清扬说，那一刻她感到浑身无力，就瘫软下来，挂在我肩上。那一刻她觉得如春藤绕树，小鸟依人，她再也不想理会别的事，而且在那一瞬间把一切全部遗忘。在那一瞬间她爱上了我，而且这件事永远不能改变。”
                            </p>
                        </div>
                        <div class="other"></div>
                    </li>
                    <li id="gqnsrdx">
                        <h1 class="title">《给青年诗人的信》</h1>
                        <hr>
                        <div class="neirong">
                            <img src="img/book(3).jpg">
                            <p class="content">
                                在你夜深最寂静的时刻问问自己：我必须写吗？你要在自身内挖掘一个深的答复。若是这个答复表示同意，而你也能够以一种坚强、单纯的“我必须”来对答那个严肃的问题，那么，你就根据这个需要去建造你的生活吧；你的生活知道它最寻常最细琐的时刻，都必须是这个创造冲动的标志和证明。然后你接近自然。你要像一个原人似的练习去说你所见、所体验、所爱以及所遗失的事物。不要写爱情诗；先要回避那些太流行、太普通的格式：他们是最难的；因为那里聚有大量好的或是一部分精美的流传下来的作品，从中再表现出自己的特点则需要一种巨大而熟练的力量。所以你要躲开那些普遍的题材，而归依于你自己日常生活呈现给你的事物；你描写你的悲哀与愿望，流逝的思想与对于某一种美的信念——用深幽、寂静、谦虚的真诚描写这一切，用你周围的事物、梦中的图影、回忆中的对象表现自己。如果你觉得你的日常生活很贫乏，你不要抱怨它；还是怨你自己吧，怨你还不够做一个诗人来呼唤生活的宝藏；因为对于创造者没有贫乏，也没有贫瘠不关痛痒的地方。即使你自己是在一座监狱里，狱墙是人世间的喧嚣和你的感官隔离——你不还永远据有你的童年吗，这贵重的富丽的宝藏，回忆的宝库？你望那方面多多用心吧！试行拾捡起过去久以消沉了的动人的往事；你的个性将渐渐固定，你的寂寞将渐渐扩大，成为一所朦胧的住室，别人的喧扰只远远地从旁走过。——如果从这收视反听，从这向自己世界的深处产生出“诗”来，你一定不会再想问别人，这是不是好诗。
                                ……
                                因为创造者必须自己是一个完整的世界，在自身和自身所连接的自然界里得到一切。</p>
                        </div>
                        <div class="other"></div>
                    </li>
                </ul>
            </div>
     </div>

③关于页面

<div class="box">
                <h1>关于</h1>
            </div>
            <ul class="head">
                <li>
                    <img src="img/1.png" />
                    <h5>one</h5>
                    <p>
                        花儿悄悄冒出了头
                        <br>
                        阵阵芳香轻抚鼻尖，萦绕心头
                    </p>
                </li>
                <li>
                    <img src="img/2.jpg" />
                    <h5>two</h5>
                    <p>粉红的樱花<br>笔盈盈地竞相怒放</p>
                </li>
            </ul>
            <ul class="head">
                <li>
                    <img src="img/3.png" />
                    <h5>three</h5>
                    <p>
                        洁白的梨花<br>

                        从第一朵花苞绽放开始</p>
                </li>
                <li>
                    <img src="img/4.png" />
                    <h5>four</h5>
                    <p>桃李园浅绿色枝叶丛中的梨花<br>

                        朝阳下，一袭白衣伫立于树干边缘</p>
                </li>
            </ul>

            <ul class="head">
                <li>
                    <img src="img/5.jpg" />
                    <h5>five</h5>
                    <p>满树的花儿随风摇曳<br>

                        淡淡的清香扑鼻而来</p>
                </li>
                <li>
                    <img src="img/2.jpg" />
                    <h5>six</h5>
                    <p>每一个生命都很渺小<br>

                        但却都以怒放的姿态<br>

                        向世界表达倔强</p>
                </li>
            </ul>

        </div>