🔥推荐阅读:http://t.csdn.cn/nQfIY🔥
前言
一个简单的网页作业
- 至少包含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>
总结
一个非常适合初学者的期中作业——静态网页设计