前言

一个简单的网页作业

至少包含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>

总结

一个非常适合初学者的期中作业——静态网页设计

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

(附源码)计算机毕业设计SSM作业批改管理系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
[附源码]计算机毕业设计Python作业查重系统(程序+源码+LW文档)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+N ...
计算机毕业设计（附源码）python-在线作业管理系统
项目运行环境配置: Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs. 项目技术: dj ...
程序员过情人节，实用表白网页附源码
又是一年情人节快到了,虽然我已经结婚,但是浪漫还是要有的.虽然是些老酒,但是对于一些朋友来说,或许是需要的.有没有对象的先收藏起来,留着以后用上. 大家都是程序员,怎么修改使用自己研究去吧.另外,你 ...
（附源码）springboot码头作业管理系统毕业设计 341654
Springboot码头作业管理系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以 ...
（附源码）springboot 网上作业管理系统毕业设计 612317
基于Spring Boot的网上作业管理系统摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻 ...
（附源码）springboot网上作业管理系统毕业设计 612317
基于Spring Boot的网上作业管理系统摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻 ...
HTML5期末大作业：关于餐饮美食网站设计——香港美食介绍(8页) HTML+CSS+JavaScript 大学生毕设网页设计源码HTML 实训大作业HTML
HTML5期末大作业:关于餐饮美食网站设计--香港美食介绍(8页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设 ...
【博主推荐】HTML制作一个美观的个人简介网页（附源码）
文章目录 HTML制作一个美观的个人简介网页模块1(个人信息)示例图模块2(基本资料)示例图模块3(项目经验)示例图模块4(专业技能)示例图模块5(工作经历)示例图模块6(自我评价)示例图 ...

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

文章目录

前言

一、环境及目录

二、页面概览

①主页页面

②读书页面

③关于页面

三、页面主要代码

①主页页面

②读书页面

③关于页面

总结

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

最新文章

热门文章