HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻
❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、更多干货
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漫点看首页</title>
<!-- link连接style.css样式 -->
<link rel="stylesheet" href="../CSS/icomoon/style.css">
<link rel="stylesheet" href="../CSS/mystyle.css">
<link rel="icon" href="../images/myico.ico" type="image/x-icon">
<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/my.js" type="text/javascript"></script>
</head>
<body>
<!-- 1.头部区域开始 -->
<div class="header">
<div class="header-first">
<!-- logo部分 -->
<img src="../images/logo.png" alt="" class="logo">
<p class="mylogo">ONE PIECE</p>
<!-- 左导航栏部分 -->
<ul class="lnav-box">
<li>
<div class="box">
<div class="front">首页</div>
<a href="index.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">周边</div>
<a href="javascript:;">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">资讯</div>
<a href="content.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
</ul>
<!-- 搜索框部分 -->
<div class="search">
<input type="text" placeholder="请输入你想找的内容">
<button></button>
</div>
<!-- 右导航栏部分 -->
<div class="rnav-box">
<li>
<div class="box">
<a href="javascript:;">
<div class="front">历史</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">收藏</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">消息</div>
</a>
</div>
</li>
</div>
<!-- 用户名字模块 -->
<div class="user">
<!-- 登录注册链接部分 -->
<div class="register">
<a href="javascript:;">登录/注册</a>
</div>
<img src="../images/xin.png" alt="">
</div>
</div>
</div>
<!-- 头部区域结束 -->
<!-- 吸顶效果js -->
<script type="text/javascript">
headerrolling();
</script>
<!-- 2.banner模块儿开始 -->
<div class="banner">
<div class="internal w">
<div class="img-wrap">
<ul>
<li class="item" style="display: block">
<img src="../images/banner1.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner2.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner3.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner4.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner5.jpg" alt="" class="lunbo">
</li>
</ul>
</div>
<div class="lr-tab">
<div class="left btn">
<span class="icon-arrow-left2"></span>
</div>
<div class="right btn">
<span class="icon-arrow-right2"></span>
</div>
</div>
<div class="tab-btn">
<ul>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>
<!-- 侧边栏开始 -->
<div class="subnav">
<div class="diversity">篇章简介</div>
<ul>
<li class="subnav-itd">
<a href="javascript:;">东海篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，蒙奇·D·路飞童年时受到海贼“红发”杰克斯的启蒙，自小就立志要成为“海贼王”。17岁时他出海之后，接续遇见了海贼猎人罗罗亚·佐罗、航海士奈美、狙击手撒谎布、厨师文斯莫克·山智等人并结为伙伴。他们组成了草帽海贼团准备进入伟大的航道来到了罗格镇。
</p>
<div class="photo">
<img src="..//images/east.png" alt="">
<span>东海篇</span>
</div>
<p>
路飞出海当海贼，打败了胖妹海贼，来到摩卡大佐控制的城镇，认识了克比，救下了索隆，并成为伙伴！索隆和路飞来到小丑巴基统治的城镇，打败了巴基，遇到了偷财宝的娜美，并暂时结伴！三人来到了一个小村庄，靠岸遇到爱说谎的乌索普，并帮助乌索普打倒了赛巴斯觉醒的船长洛克，救下病娇青梅竹马可雅，好感度+10，乌索普成为伙伴。四人来到海上餐厅，遇到加经验的海军，被出场的香吉士打倒，大舰队提督克里克来袭，被路飞打败，鹰眼出场，索隆挑战失败！香吉士加入！娜美偷了一伙人的船走了，四人尾随娜美去了娜美的家乡所在小岛，打败了统治小岛的鱼人恶龙。一伙人来到罗杰的处刑地罗格镇，进入伟大的航路之前的最后一个小岛！巴基再次出现，还遇到海军上校斯摩格拦路，幸而革命军首领龙现身救了他们。成功进入伟大的航路！
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">冬岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，进入伟大航路后，由于娜美感染了一种不知名的病，使得全员必须前往有医生的岛屿寻找医生，但在此时，他们又从三天前的报导中得知阿拉巴斯坦的内乱越来越严重，身为一国公主的薇薇担忧著国内一百万名国民的性命，因此希望在治好娜美的病后让船以最快的速度航向阿拉巴斯坦。
</p>
<div class="photo">
<img src="..//images/cold.jpg" alt="">
<span>冬岛篇</span>
</div>
<p>草帽一行人来到了有“医疗大国”之称的磁鼓岛，不巧的是磁鼓岛因为先前统治者的关系，使得岛上只剩下一个医生，那就是住在山上城堡里的“魔女”Dr.库蕾哈，路飞和香吉士背著重病的娜美为此踏上征山之途，途中受到一大群食肉兔拉邦和雪崩的影响，香吉士为了掩护路飞而受重伤，路飞带著两人徒手爬上Dr.库蕾哈所在的磁鼓山，但由于穿著单薄导致严重冻伤晕倒，三人一起接受了Dr.库蕾哈的治疗，并在此遇见了她的助手，一只蓝鼻子的驯鹿托尼托尼·乔巴，路飞想拉拢乔巴成为自己的伙伴，但乔巴因为过去的心灵创伤而不愿与人类接触，与此同时，前统治者—海贼团船长"白铁"瓦尔波刚好回到磁鼓岛来抢回他的国家。在经历与瓦波尔的战斗后，乔巴决定和路飞等人出海，乔巴以船医身份加入草帽海贼团。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">阿拉巴斯坦篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，阿拉巴斯坦王国，位于伟大航道前半段的超级大国，首都是阿尔巴那，前王下七武海克洛克达尔主导的秘密犯罪组织“巴洛克工作社”在此施行“理想乡作战”。抵达阿拉巴斯坦后，当地因为鳄鱼的煽动爆发内战，路飞最后击败鳄鱼，内战亦随之结束。其后薇薇向路飞等人道别，而原巴洛克华克副社长妮古·罗宾，因失去人生目标，以考古学家的身份加入了草帽海贼团。
</p>
<div class="photo">
<img src="..//images/Alabasta_Saga.png" alt="">
<span>阿拉巴斯坦篇</span>
</div>
<p>前王下七武海克洛克达尔主导的秘密犯罪组织“巴洛克工作社”在此施行“理想乡作战”。国内除了首都阿尔巴那外完全不下雨的日子持续了三年，在巴洛克工作社的故意安排下，让国民以为旱灾是国王私下使用催雨剂“跳舞粉”所致，因而引发内战死伤惨重。后来在薇薇公主和草帽海贼团的努力下，克洛克达尔被打败，国家下的第一场雨同时也平息了战火。纪录指针存满需五天。阿拉巴斯坦事件(包括颠倒山篇、威士忌山峰篇、小花园篇、磁鼓岛篇、拿哈那沙漠篇和阿拉巴斯坦篇)出现于漫画的第100话-第216话。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">空岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，空岛存在于白海（7000米上空）之上的白白海（10000米上空）。在这样的高度空气非常 稀薄，到此的青海（普通的海）人的运动能力会因此大幅度下降。
空岛是贝的原产地。岛上一部分居民（主要是天使岛居民）背上生有两片羽状物。天使岛居民是月球人，因能源不足而飞往蓝星，空岛的货币单位是伊克（エクストル），而青海的货币单位是贝里。换算关系是“1贝里”对应“1万伊克”。外来人入境时每个人必须缴纳10亿伊克（10万贝里）的费用，而居民或外来人出国时需要缴纳20亿伊克（20万贝里）的出国费。
</p>
<div class="photo">
<img src="..//images/ainilu.png" alt="">
<span>空岛篇</span>
</div>
<p>离开阿拉巴斯坦王国之后，草帽海贼团撞见一艘从天而降的大船，同时纪录指针竟然向上指向天空。对空岛产生兴趣的路飞靠着上升海流前往空岛。认为空岛不存在的人有很多。路飞等人经由有“生或死的危险航路”之称的激突而上的上升海流到达白海，最近几乎没有船只沿此海路进入白海。若沿着其它的海路，出发的100人中只有几个人可以生存下来。如果沿海流而上只有全部生存或者全部死亡两种可能性。误入了空岛统治者“神”艾尼路的领地，草帽海贼团、神的军团、以及领地原住民“香狄亚”展开激战，艾尼路最终被击败，而空岛居民和香狄亚一族长达400年的战争也终止。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">长环长岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，结束空岛的冒险后，草帽一伙在海上遇到一艘既没有帆也没有旗帜的海贼船，还因为少了指挥一切的船长和航海士让船员变的没有组织性。整艘船在他们面前遭到海猴子引起的巨浪吞噬。一行人后来来到了长环长岛，遇到狡猾的海贼团船长弗克西，拥有迟缓果实能力的弗克西向鲁夫挑战Davy
Back Fight比赛。 胜利者可以从败方选择得到一名成员或选择标志。
被夺走标志后不得再挂上该标志，以及被夺走的同伴、标志等，都必须在由Davy Back Fight夺回。
</p>
<div class="photo">
<img src="..//images/fkx.jpg" alt="">
<span>长环长岛篇</span>
</div>
<p>草帽海贼团与弗克西海贼团比了三场（动画是六场），分别为“环形赛艇”、“火爆斗球”、“滚轴溜冰追逐战(动画追加)”、“Hit &
Deadball(动画追加)”、“D.T.D(动画追加)”，第三场（动画第六场）是“双方船长一对一决斗”，弗克西的迟缓能力一度让鲁夫居于劣势，最后因为想要守护所有伙伴的心意以及爆炸头的野性力量爆发，让他战胜了弗克西。事情结束后，他们又遇上了海军本部最高战力上将库山，而他的目的，就是要歼灭曾经从他手中逃走的妮可·罗宾。为了保护罗宾，路飞一行人和这个可怕的强敌战斗，败得一塌糊涂，最后却被放过一马。遭到青雉冷冷果实能力攻击导致全身被冰冻的罗宾和鲁夫，则在团员们的合力抢救下捡回一命。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">水之七岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，与佛克西对决Davy Back
Fight、还有随后的青雉。一行人接着来到水之七岛，在那边碰上接二连三的麻烦：先是罗宾莫名失踪；接着前进梅利号被判定无法继续航行；骗人布因为船只问题而与鲁夫闹翻；最后一行人因为罗宾和的骗人布的行动，而与卡雷拉公司及佛朗基家族结下梁子。
</p>
<div class="photo">
<img src="..//images/w7.jpg" alt="">
<span>水之七岛篇</span>
</div>
<p>为修缮伤痕累累的前进梅利号，草帽海贼团来到以造船业闻名的水之七岛，却得知梅莉号已经无法修复的消息，骗人布又惨败给拆船流氓弗兰奇，因而离团。另一方面，罗宾遇见了政府机关CP9，由于害怕过去发生在自己故乡的悲剧重演在草帽海贼团上，因此自愿被CP9带走。而骗人布又因为不满路飞换掉梅利号的决定而决定离开，草帽海贼团陷入分崩离析的危机。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">艾尼爱斯大厅篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，爱尼爱斯大厅，又称司法岛
(司法の岛)，是世界政府所属，象征司法的重要岛屿，也是司法岛篇的主要场所。由于司法岛没有黑夜，常年白昼，所以又称不夜之岛。爱尼爱斯大厅内，尽是些有名无实的法院：因为只要是被押到司法岛的人，必定已被认定为犯人。加上陪审团也都是从前被判刑的不安好心的海贼，无法得到公平审判的情况下，犯人只会被押解着到达一扇冰冷巨大的钢铁之门，即正义之门。
</p>
<div class="photo">
<img src="..//images/sfd.jpg" alt="">
<span>艾尼爱斯大厅篇</span>
</div>
<p>司法岛不会给犯人任何慈悲，只会将犯人们送往形式上的司法机关，是与世界政府中枢相连的大门。被押往司法岛的犯人，之后将看不到明天的太阳、并面对炼狱般的命运：因为从司法岛的港口出海后能到达的地方只有两处，一处是整个世界正义战斗力的最高峰海军本部，而另一处则是到处是拷问室和死刑台、囚禁这个世界上无恶不作的囚犯的深海大监狱推进城。世界政府直属的CP9为了夺取古代兵器，而以非常召集威胁罗宾就范、同时也打算把知情人士灭口。草帽一伙成功救了知情人士并了解真相后，决定前往司法岛营救罗宾。在一阵激烈打斗后，一行人终于救出罗宾、并借由前进梅利号的奇迹而逃离生天。接着前进梅利号因为大限已至而被送葬。在一切重整后，帮忙建造新船千阳号的佛朗基加入、骗人布也为先前的行为道歉，大伙终于重新出发。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">恐怖三桅帆船篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，恐怖三桅帆船编是故事的第五编。剧情从水之七岛编开始，草帽一伙前往恐怖三桅帆船，在那边碰上第八位伙伴布鲁克，并打倒其敌人月光·摩利亚。这是全故事篇幅最少的大编：只有五卷48话；同时也是拥有最少小篇的大编：只有一个。
</p>
<div class="photo">
<img src="..//images/mly.jpg" alt="">
<span>恐怖三桅帆船篇</span>
</div>
<p>面对最强敌人——装有路飞影子的特别僵尸欧斯。欧斯虽然拥有与路飞同等的破坏力，却也因路飞的白痴性格而数度被草帽一行人耍得团团转。后来，摩利亚在甩掉路飞后加入战局，使欧斯成为力量和头脑兼备的凶恶怪物。草帽一伙面临全军覆没的危机，所幸身上塞了一百人份影子的“噩梦•路飞”及时出现，加上同伴们的齐心合力，最终仍将摩利亚和欧斯打败。然而，事情并未就此结束，王下七武海之一的巴索罗缪·大熊却在此时来袭，执行世界政府的指令，将所有目睹摩利亚被击败的人抹杀。面对巴索罗缪•大熊强大的力量，加上体力耗尽，船上全部人均无能为力并处于劣势，几乎被冲击晕倒，仅剩下索隆尚能勉强战斗。为了捍卫路飞成为海贼王的梦想，索隆愿意牺牲自己的生命以换取路飞头颅。面对如此友情，熊也只得网开一面，只将路飞所有的痛苦和疲劳转到索隆身上便放过他们一马，但是经过此事件后，索隆觉得自己的道行还未够高，还需努力。事情结束后，布鲁克为了完成和拉布的约定，以音乐家身份加入草帽一伙。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">香波地诸岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，香波地群岛篇 (Sabaody Archipelago
Arc)是漫画连载第十九个小篇章，也是顶上战争编第一个小篇章。本篇代表着草帽海贼团的转折点，因为他们首次被众多实力强大的对手如大将黄猿、和平主义者和巴索罗缪·大熊轻松打败，得知自己的实力远远不足。香波地群岛是草帽一伙于伟大航路登陆的第十个岛屿。
</p>
<div class="photo">
<img src="..//images/xdz.jpg" alt="">
<span>香波地诸岛篇</span>
</div>
<p>在寻找上膜工人的途中，海咪被猎狗宠物团绑走了，草帽海贼团召集“飞鱼骑士团”将他们载到人类拍卖会场，后来在会场上小八被天龙人开枪射击，路飞愤而打伤天龙人，导致天龙人事件发生，一行人得到上膜工人席尔巴斯.雷利的帮助而顺利离开人类拍卖会场。
回到夏姬的酒吧后，一行人才得知原来雷利是罗杰海贼团副船长。
为感谢路飞等人帮助小八，雷利答应替“千阳号”免费上膜，并给他们每人一张生命纸，接下来给船上膜的三天时间全员得在岛上躲避海军。而受“天龙人事件”影响，海军本部上将黄猿来到香波地诸岛，所幸雷利来此帮助，但也引发混战。
后来全团船员更被突然出现的巴索罗缪.大熊的能力传送到别的地方去。
而在同时，由于抓了艾斯，四皇之一白胡子极为愤怒，决定要和海军交战。 海军本部也正在召集所有王下七武海，准备要和白胡子海贼团战斗。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">女人岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，女儿岛亚马逊·百合是海贼王中的神秘岛屿，女性战斗名族“九蛇族”的国家，特色是身上都缠着一条蛇，拥有随意变换成武器的能力，国家被建在被丛林覆盖的高山中，建筑有着十足的中国风味，岛上有着数百年前“男人禁令”的绝对规范，男人一旦进入此地，下场就是被消灭。
</p>
<div class="photo">
<img src="..//images/9s.jpg" alt="">
<span>女人岛篇</span>
</div>
<p>
路飞被大熊传送到亚马逊百合，路飞因为食用毒菇而中毒，并被雏菊及其同伴所救。
但因他不知女人岛上不准男人靠近的规定，且劫持了雏菊而遭到追杀，而后更在那遇上了自称因为“诅咒”而拥有“石化”能力，王下七武海之一波雅·汉考克。岛上有一支海贼团，名叫九蛇海贼团。船上的海贼全是强悍的女海贼。得知自己的兄长“火拳”波特夹斯·D·艾斯要被处决，便请蛇姬将自己偷渡至海底大监狱“因佩尔”。另外，本篇也简短说明了在鲁夫来到亚马逊百合的同时草帽海贼团其他同伴的去向。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">推进城篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，推进城，或称深海大监狱 (海底监狱 Kaitei Kangoku)、大监狱 (大监狱 Dai
Kangoku)，和原海军本部及艾尼爱斯大厅都是位于乐园的政府要塞。这里是世界政府最大的监狱，囚禁的都是最危险的重刑犯和海贼。位于无风带下方的海底，只有位于海面上的入口例外。
推进城是推进城篇的主舞台，而推进城内的员工则是本篇的反派。
</p>
<div class="photo">
<img src="..//images/tjc.jpg" alt="">
<span>推进城篇</span>
</div>
<p>
推进城的访客都必须经过搜身检查，以确保没有携带危险物品之虞；如果是能力者的话，还必须额外加上海楼石制的手铐，以防万一。囚犯则是必须在正式入狱前先接受“洗礼”──赤裸的接受沸水加身，这是入狱前的必要步骤，除了消毒以外也隐隐有测试囚犯能耐的意味。
除了参观者与政府官员外，透过合法手段离开推进城的极少：实例有执行死刑的押解、临时囚禁后的逃脱、或其他特殊理由。要从推进城逃狱是几乎不可能的，这是因为推进城位处无风带、正义之门的护卫、还有着极其强大的陷阱和守卫。在金狮子狮鬼逃狱后的二十年，推进城并没有任何逃狱纪录，直到蒙其·D·路飞打破为止。
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">顶上战争篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，距离艾斯被处刑只剩不到3个小时，处刑地点马林福特召集了各支部有名且具实力的海军及五位王下七武海前来助阵，总人数达十万，并由三名“海军本部”大将率领。元帅战国于处刑前，公布艾斯为哥尔·D·罗杰的儿子。艾德华·纽盖特率领白胡子海贼团及旗下海贼团前往马林福特迎救艾斯，与海军和王下七武海开战。随着小欧斯Jr拼死开出一条血路，白胡子海贼团顺利攻入内湾，为此海军本部打算对艾斯提早行刑。
</p>
<div class="photo">
<img src="..//images/aisi.jpg" alt="">
<span>顶上战争篇</span>
</div>
<p>经过一番激战后，路飞终成功救出艾斯；而白胡子则决定用尽自己最后的力量，掩护所有旗下海贼撤退。当大伙逃亡之际，海军本部上将萨卡斯基竭力追击艾斯和路飞。艾斯受不住赤犬的言语挑衅，欲与之开打却被岩浆重创；赤犬乘势攻击已然力尽的鲁夫，被艾斯挺身抵挡，拳头贯穿他的身体。白胡子旗下的船医马上前去抢救，但艾斯拒绝了治疗，因为内脏被烧烂，已无救。并出口感谢路飞和前来营救他的所有人，随后在路飞怀里含笑而逝；路飞也因而精神崩溃。
</p>
</div>
</li>
</ul>
</div>
<!-- 侧边栏结束 -->
</div>
</div>
<!-- 轮播图js -->
<script type="text/javascript">
turnpicture();
</script>
<!-- banner模块儿结束 -->
<!-- 3.历史播放模块儿开始 -->
<div class="goods w">
<h3>历史播放</h3>
<ul>
<li><a href="javascript:;">945集</a></li>
<li><a href="javascript:;">947集</a></li>
<li><a href="javascript:;">946集</a></li>
<li><a href="javascript:;">944集</a></li>
<li><a href="javascript:;">947集</a></li>
<li><a href="javascript:;">945集</a></li>
<li><a href="javascript:;">945集</a></li>
<li><a href="javascript:;">945集</a></li>
</ul>
<a href="javascript:;" class="mod">清除记录</a>
</div>
<!-- 历史播放模块儿结束 -->
<!-- 4.新话速递大盒子开始 -->
<div class="box w">
<div class="box-hd">
<h3>新话速递</h3>
<a href="javascript:;">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<li>
<img src="../images/new.png" alt="">
<div class="photo">
<img src="../images/1.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>大蛇的追兵 忍者军团VS索隆</h6>
<p class="a">951集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/2.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>士兵们的梦想! 路飞镇压兔丼!</h6>
<p class="a">950集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/3.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>我是来赢的! 路飞拼死的呐喊</h6>
<p class="a">949集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/4.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>开始反击! 路飞与赤鞘武士!</h6>
<p class="a">948集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li class="first">
<div class="photo">
<img src="../images/5.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>最凶恶兵器! 瞄准路飞的疫灾炸弹</h6>
<p class="a">947集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/6.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>阻止四皇! 奎因的秘策</h6>
<p class="a">946集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/7.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>红豆年糕汤之恨 路飞陷入绝境</h6>
<p class="a">945集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/8.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>暴风雨袭来! 大肆暴虐BIG MOM!</h6>
<p class="a">944集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li>
<div class="photo">
<img src="../images/9.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>路飞的决意 打破大相扑大地狱!</h6>
<p class="a">943集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
<li class="second">
<div class="photo">
<img src="../images/10.png" alt="">
<a href="video.html">
<div class="mask"></div>
</a>
</div>
<div class="text">
<h6>草帽一伙乱入! 动荡不安! 处刑场的激斗</h6>
<p class="a">942集</p>
<p class="b">•</p>
<p class="c">1125人在观看</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 新话速递大盒子结束 -->
<!-- 新漫速看模块儿开始 -->
<div class="introduction w">
<div class="introduction-hd">
<h3>新漫速看</h3>
<a href="javascript:;" class="all">查看全部</a>
</div>
<div class="introduction-bd">
<ul>
<li>
<img src="../images/new.png" alt="" class="new">
<a href="comic.html">
<img src="../images/m995.jpg" alt=""></a>
</li>
<li>
<img src="../images/new.png" alt="" class="new">
<a href="comic.html">
<img src="../images/m994.jpg" alt=""></a>
</li>
<li>
<img src="../images/new.png" alt="" class="new">
<a href="comic.html">
<img src="../images/m993.jpg" alt=""></a>
</li>
<li>
<img src="../images/new.png" alt="" class="new">
<a href="comic.html">
<img src="../images/m991.jpg" alt=""></a>
</li>
<li>
<img src="../images/new.png" alt="" class="new">
<a href="comic.html">
<img src="../images/m990.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
<!-- 新漫速看模块儿结束 -->
<!-- 漫点网底部开始 -->
<div class="footer">
<div class="w">
<div class="left">
<img src="../images/onepiece.png" alt="">
<p>漫点看致力于为海迷们提供最新最好的海贼王资讯和视频。<br />
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="javascript:;" class="app">下载APP</a>
</div>
<div class="right">
<dl>
<dt>关于漫点看</dt>
<dd><a href="javascript:;">关于</a></dd>
<dd><a href="javascript:;">管理团队</a></dd>
<dd><a href="javascript:;">会员服务</a></dd>
<dd><a href="javascript:;">加入我们</a></dd>
<dd><a href="javascript:;">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="javascript:;">如何注册</a></dd>
<dd><a href="javascript:;">如何观看</a></dd>
<dd><a href="javascript:;">如何成为会员</a></dd>
<dd><a href="javascript:;">积分是什么</a></dd>
<dd><a href="javascript:;">视频无法播放怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="javascript:;">合作机构</a></dd>
<dd><a href="javascript:;">合作企业</a></dd>
</dl>
</div>
</div>
</div>
<!-- 漫点网底部结束 -->
<!-- 右边工具栏设计开始 -->
<div class="sidenav">
<ul>
<li class="contact">
<div class="leftcode">
<img src="../images/my.jpg" alt="">
<p>扫码将您的建议反馈给作者</p>
</div>
<a href="javascript:;">
<p class="icon-phone"></p>
<span class="content">联系我们</span>
</a>
</li>
<li>
<a href="javascript:;">
<p class="icon-user"></p>
<span class="content">个人中心</span>
</a>
</li>
<li class="contact">
<div class="leftcode">
<img src="../images/yong.png" alt="">
<p>扫码向客服咨询相关疑问</p>
</div>
<a href="javascript:;">
<p class="icon-user-tie"></p>
<span class="content">人工客服</span>
</a>
</li>
<li class="contact">
<div class="leftcode">
<p style="margin-top: 50px;">本站仅供广大海迷交流观看所用不做商业用途</p>
</div>
<a href="javascript:;">
<p class="icon-bullhorn"></p>
<span class="content">最新公告</span>
</a>
</li>
<li>
<a href="javascript:void(0)" id="toTop">
<p class="icon-eject"></p>
<span class="content">回到顶部</span>
</a>
</li>
</ul>
</div>
<!-- 回到顶部效果js -->
<script type="text/javascript">
returntop();
sidenavrolling();
</script>
<!-- 右边工具栏设计结束 -->
</body>
</html>
2.CSS代码
.header-first {
width: 1200px;
margin: auto;
padding-top: 7px;
}
.logo {
float: left;
width: 34px;
height: 34px;
}
.mylogo {
float: left;
width: 200px;
height: 34px;
color: #666666;
font-size: 28px;
}
/* 导航æ 设计开始 */
.lnav-box,
.rnav-box {
float: left;
height: 35px;
display: block;
margin-left: -42px;
margin-top: -35px;
}
.lnav-box li,
.rnav-box li {
float: left;
margin: 0 5px;
list-style: none;
width: 50px;
height: 35px;
}
.lnav-box .box,
.rnav-box .box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.lnav-box .box a,
.rnav-box .box a {
text-decoration: none;
color: #666;
}
.lnav-box .box:hover {
transform: rotateX(90deg);
}
.lnav-box .front,
.lnav-box .bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
color: #666;
}
.lnav-box .front {
z-index: 1;
transform: translateZ(17.5px);
}
.lnav-box .bottom {
/* transform: rotateX(-90deg);
transform: translateY(17.5px); */
/* æˆ‘ä»¬å¦‚æžœæœ‰ç§»åŠ¨æˆ–è€…å…¶ä»–æ ·å¼é‚£ä¹ˆæˆ‘们è¦å…ˆç§»åŠ¨åŽæ—‹è½¬ */
transform: translateY(17.5px) rotateX(-90deg);
color: orange;
}
.rnav-box {
float: left;
margin-left: 12px;
margin-top: -28px;
}
.rnav-box li a:hover {
color: orange;
}
/* 导航æ è®¾è®¡ç»“æŸ */
.search {
float: left;
width: 470px;
height: 34px;
margin-left: 146px;
}
.search input {
outline: none;
float: left;
width: 398px;
height: 34px;
border: 1px solid #f6f7f8;
border-right: 0;
border-radius: 16px 0 0 16px;
background-color: #f6f7f8;
color: #757575;
font-size: 14px;
padding-left: 18px;
}
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
