一、效果展示

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.经典语录

二、具体实现

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.简单语录

三、主要问题

四、总结

只用html和css构建了静态网站，选择动漫海贼王为主题构建5个简单页面

一、效果展示

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.经典语录

二、具体实现

1.首页

导航条设置

在首页最上方设置导航条，并设置超链接跳转到其他页面，且其他页面在右上方设置了一个固定在页面的超链接跳转到首页。

html文件如下：

<div id="navLinks"><a href="#">首页</a><a href="JuQing.html">剧情简介</a><a href="person.html">主要人物</a><a href="4.html">悬赏金海报</a>        <a href="5.html">经典语录</a></div>

背景图片和文字设置

给整个首页添加一个背景图片，设置文字把文字设置在屏幕中间

html文件

</nav>  <div class="text"><h1>海贼王</h1><h1>&nbsp;<span class="pulser">one opeice</span>&nbsp;</h1><h3>是真实存在的</h3></div>

首页的部分scss文件如下

 .header {height: 100vh;background-image: url(images/3.webp);background-size: cover;background-position: center;display: flex;flex-direction: column;// 导航nav {display: flex;justify-content: space-between;align-items: center;// 相对父元素的宽度margin: 1.5% 8%;// 小屏幕居中@media(max-width:$medium) {margin: auto;}@media(min-width: $small){margin: 0%;}}.text{text-align: center;color: antiquewhite;margin: auto;h1 {// 夹断函数，动态调整字体大小：期望以5vw显示，但只能在2～5rem之间font-size: clamp(2rem, 5vw, 5rem); color: #133757;// 脉冲动画  .pulser {display: inline-block;color:#6f0707;border-radius: 50%;      animation: pulse 3s infinite;@keyframes pulse {0% {box-shadow: 0 0 0 0px rgba(53, 2, 2, 0.678);}100% {box-shadow: 0 0 20px 20px rgba(44, 5, 5, 0.307);}}}}h3{padding-left: 2%;color: lightcoral;}

2.剧情简介

html文件如下

<body><div class="main"><image src="data:images/4.webp" alt=""width="40%"height="40%"></image><h2>海贼王剧情简介</h2><p>海贼王讲述的是想要成为海贼王的蒙奇·D·路飞在伟大航路上的冒险故事，在整个过程中他遇到了很多的伙伴，经历了很多的故事，在冒险中将一步步揭开整个世界的真相。 海贼王世界上的大陆叫做红土大陆，世界上东，南，西，北四海。 伟大航路是一条环绕海贼王世界的航线，而红土大陆是环形大陆，双方垂直交叉。 而走到伟大航路终点的人就是海贼王，前任海贼王死后将财宝 One piece遗留在了伟大航路的终点拉夫德鲁，充满冒险精神的路飞，为了得到one piece，为了成为海贼王，从东海出发进入了伟大航路。 </p></div><a href="main.html">返回首页</a></body>

部分scss文件如下


.main{width: 80%;float: left;text-align: center;display: flex;margin-top: 10%;margin-left: 10%;h2{padding-left: 8%;color: rgba(42, 37, 6, 0.586);}p{padding-left: 8%;color: rgba(209, 198, 45, 0.685);}

3.主要人物

选择了三个主要人物

html文件

<body><div class="part"><div class="part1"><image src="data:images/luf.webp" alt=""width="50%"height="80%"></image></div><h1>蒙奇&nbsp;<span class="pulser">·D·</span>&nbsp;路飞</h1><p>蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。绰号“草帽”路飞，是草帽一伙、草帽大船团船长、极恶的世代之一。橡胶果实（人人果实·幻兽种·尼卡形态）能力者，悬赏金30亿贝里。梦想是找到传说中的大秘宝（ONE PIECE），成为海贼王。路飞性格积极乐观，爱憎分明，宁死不屈，十分重视伙伴与朋友，对任何危险的事物都超感兴趣。和其他传统的海贼所不同的是，他并不会为了追求财富而杀戮，而是享受着身为海贼的冒险和自由。</p><a href="main.html">返回首页</a>
</div><div class="partb"><div class="part2"><image src="data:images/sl2.jpg" alt=""width="50%"height="80%"></image></div><h1>罗罗诺亚&nbsp;<span class="pulser">·索隆</span>&nbsp;</h1><p>罗罗诺亚·索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽一伙”的战斗员，人称“海贼猎人”。2年前登陆香波地群岛的11位“超新星”其中的一位。同时也是被人称作“极恶的世代”中的一位。东海霜月村出身，是使用三把刀战斗的三刀流剑士。立志成为世界第一大剑豪。之后加入“草帽一伙”，随着“草帽一伙”以成为世界第一大剑豪的目标旅行。加入“草帽一伙”后，索隆时刻尊重着路飞的决定，面对敌人也会冲锋在前。虽然身份已经变为了海贼，却仍然坚守着剑士的原则，并经常在团队迷茫的时候分析局势，切中要点，引导团队的决定。</p></div>
<div class="partc"><div class="part3"><image src="data:images/shazhi2.webp" alt=""width="50%"height="80%"></image></div><h1>文斯莫克·&nbsp;<span class="pulser">山治</span>&nbsp;</h1><p>文斯莫克·山治，日本漫画《航海王》及其衍生作品中的角色。山治（日语：サンジ，英文：Sanji）是日漫《海贼王》及其衍生作品中的人物，草帽海贼团的厨师，文斯莫克家族的第三子。山治有着金发，卷曲眉毛，头发永远遮住半边脸，香烟不离口，最爱女人，花心但有风度，海贼中的绅士，因踢技快准狠被海军称之为“黑足”。山治小时候在红脚哲普那儿学习厨艺，为找到传说之海All Blue而跟随路飞一同进入了伟大航路。</p></div>
</body>

部分scss文件

.partb{overflow: hidden;display: flex;justify-content: space-around;height: 100vh;background-image:url(images/suol.webp);background-size: cover;background-position: center;.part2{position: absolute;margin-top: 10%;margin-left: 5%;margin-right: 50%;width: 100%;padding-left: 1%;float: left;text-align: center;}h1 {position: absolute;// 夹断函数，动态调整字体大小：期望以5vw显示，但只能在2～5rem之间font-size: clamp(2rem, 5vw, 5rem); color: #670c0cea;padding-left: 50%;padding-top: 8%;// 脉冲动画  .pulser {display: inline-block;color:#3f1407b2;border-radius: 50%;      animation: pulse 3s infinite;@keyframes pulse {0% {box-shadow: 0 0 0 0px rgba(53, 2, 2, 0.678);}100% {box-shadow: 0 0 20px 20px rgba(56, 3, 6, 0.885);}}}}p{position: absolute;background-color: rgba(69, 121, 147, 0.8);color: rgba(57, 5, 27, 0.914);padding: 0 0 0 0;top: 140%;right: 14%;width: 23vw;}}

4.悬赏金海报

html文件

<div class="part1"><a href="main.html">返回首页</a><h2>悬赏金代表着海军对海贼实力的评估大部分海贼的悬赏金代表着他的实力，还有一部分海贼的悬赏金侧面反映了他的个人影响力，海贼都是很期待悬赏金的提高。</h2><div class="part1-1"><image src="data:images/42.jpg" alt=""width="70%"height="70%"></image></div></div><div class="part2"><div class="part2-1"><image src="data:images/45.jpg" alt=""width="30%"height="30%"></image></div>
</div>

部分scss文件

 .part1{overflow: hidden;display: flex;justify-content: space-around;height: 100vh;background-image:url(images/rsj-1.jpg);background-size: cover;background-position: center;a {position: fixed;background-color: rgba(61, 20, 3, 0.882);padding: 0%;right: 3%;top: 2%;color:rgba(208, 208, 215, 0.922)}h2{color: rgba(207, 201, 192, 0.964);position: absolute;background-color: rgba(40, 4, 10, 0.682);padding: 0 0 0 0;top: 4%;width: 50vw;}.part1-1{position: absolute;margin-top: 10%;margin-left: 5%;margin-right: 5%;width: 100%;text-align: center;}}

5.简单语录

html文件

<style type="text/css">img{border-radius: 50%;overflow: hidden;width: 100px;}
</style><body><div class="part1"><a href="main.html">返回首页</a><h1>海贼王一些角色的经典语录</h1><div class="part1-1"><image src="data:images/61.jpg" alt=""width="20%"height="20%"></image><h2>海贼是恶?海军是正义?这种玩意儿管他多少都能重新书写!不懂得“和平”的小鬼和不明白“战争”的小鬼，他们的价值观是不同的。站在顶点的人可以重新书写善恶!现在只有这个地方才是中立啊!正义会胜?那是当然的吧，只有胜者，才是正义啊!——多弗朗明哥</h2></div><div class="part1-2"><image src="data:images/62.jpg" alt=""width="20%"height="20%"></image><h2>我是时代的残党，新世界里没有能载我的船。欠下了仁义就要偿命，教会帝奇那个混蛋让他明白这个道理难道不是我的责任吗。儿子比老子先死，这是何等的不孝顺。——白胡子</h2></div><div class="part1-3"><image src="data:images/63.jpg" alt=""width="30%"height="30%"></image><h2>就算你们把酒或食物丢在我头上…或是你们吐口水在我身上，我都会笑笑当作没事…但是…不管你们有什麽样的理由…我都不会饶了伤害我朋友的家伙！——香克斯</h2></div></div></body>

部分scss文件

.part1{overflow: hidden;display: flex;justify-content: space-around;height: 100vh;background-image:url(images/51.webp);background-size: cover;background-position: center;.part1-1{position: absolute;margin-top: 7%;margin-left: 10%;width: 100%;h2{width: 80%;position: absolute;background-color: rgba(40, 4, 10, 0.682);color: rgba(153, 127, 11, 0.763);padding-left: 8%;}}

三、主要问题

1.首页面的导航条设置刚开始不能显示全，经过查找资料后发现是导航条的布局长度没有设置好

2.在已有背景图片后添加图片和文字时刚开始会重叠，重新规划了布局后没有重叠

3.上传项目文件到托管服务器上时没有成功上传到网站，通过同学的帮助上传成功

四、总结

选用喜欢的动漫为主题构建纯css和html构建几个页面，这是第一次做多个页面的网页，还有很多不足的地方，比如内容有点单调、网页页面不太美观等。当通过本次设计，对html和css构建网页熟悉了一些，也体会到了前端与其他程序的设计不同和特殊的地方。

用html和css构建简单的静态网页相关推荐

大一可能用到的使用HTML+CSS做成简单的静态网页
大一可能用到的使用HTML+CSS做成简单的静态网页不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.! 我就做了一个简 ...
AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
利用Html与css从零开始制作基础静态网页(web课设）
首先打好单个网页的基础结构本次我们制作网页主要使用的是外部样式表本次静态网页的主题是合金装备(由个人喜好而定,你可以根据其自己修改) 先定义外部样式表 <link rel="sty ...
python爬虫如何从一个页面进入另一个页面-Python爬虫（一）：爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
python 简单网页_Python爬虫（一）：爬取一个简单的静态网页
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
大熊猫学生网页设计模板静态HTML动物保护学生网页作业成品 DIV CSS大熊猫野生动物主题静态网页
网页介绍本学生网页主题为介绍大熊猫形态特征.栖息环境.生活习性等,采用DIV CSS布局,共4个页面. 样式方面整体网页内容区宽度为1200PX,使用CSS设置了网页背景图,导航部分制作了鼠标经过及 ...
一种非常简单的静态网页生成方法介绍
一.目前的静态页生成方法有简单的模板替换.常见的ASP+FSO等,这里给大家介绍一种更简单的方法.原理就是借助XMLHTTP对象获取目标页面的源代码,然后写入到静态网页文件中.代码如下: Code D ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

用html和css构建简单的静态网页

一、效果展示

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.经典语录

二、具体实现

1.首页

2.剧情简介

3.主要人物

4.悬赏金海报

5.简单语录

三、主要问题

四、总结

用html和css构建简单的静态网页相关推荐

最新文章

热门文章