HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
目录
前言
此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
提示：以下是本篇文章正文内容，下面案例可供参考
一、网页编辑
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
二、知识应用
技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、表单、二级三级页面等，视频、 音频元素 所需的知识点。
三、部分代码与页面展示
1.网站首页代码与展示：
<!DOCTYPE html>
<html lang="en">
<head><!--网页首页，该网页主要实现背景设置、网页菜单、多照片向斜上方滚动展示、音频播放、动态指定事件、使用css对网页个性化设置等功能-->
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" /><!--网页设计主要样式-->
<link href="css/anime.css" rel="stylesheet" /><!--实现多照片向斜上方滚动展示-->
<link href="css/body1.css" rel="stylesheet" /><!--设置网页背景照片，使其不随向下滚动变动以及自适应页面-->
<script type="text/javascript">
window.onload = function(){//页面加载完毕后判断音频是否自动播放，若无则播放指定音频文件
setInterval("toggleSound()",100);
}
function toggleSound() {
var music = document.getElementById("vd");//获取ID
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
}
</script>
<title>动漫-唯美</title>
</head>
<body >
<div class="bjimg"></div><!--设置页面背景照片-->
<div class="con">
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.ico"width="70" height="70"/>唯美动漫</a>
</div>
<div class="nav"><!--多页面跳转-->
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="register.html">动漫推荐</a>
<ul>
<li><a href="register.html#1">AIR</a></li><!--有序列表-->
<li><a href="register.html#2">CLANNAD</a></li>
<li><a href="register.html#3">Charlotte 夏洛特</a></li>
<li><a href="register.html#4">JUST Because!</a></li>
<li><a href="register.html#5">ISLAND</a></li>
<li><a href="register.html#6">GOSICK</a></li>
<li><a href="register.html#7">Angel Beat!</a></li>
<li><a href="register.html#8">Plastic Memories</a></li>
<li><a href="register.html#9">Summer Pockets</a></li>
<li><a href="register.html#10">ATRI</a></li>
</ul>
</li>
<li><a href="shopping.html">周边购买</a></li>
<li><a href="user.html">用户登录</a></li>
</ul>
</div>
<div class="clear"></div>
</header>
<div class="clear"></div>
<div class="banner">
</div>
<div class="main">
<h2>动漫美文节选</h2>
<p>1.人生就是一列开往坟墓的列车，路途上会有很多站，很难有人可以自始至终陪着走完。当陪你的人要下车时，即使不舍也该心存感激，然后挥手道别。假如有个人愿在自己身边，就算没有任何语言只是在身边，我也觉得是一种幸福，即使失去了一切，只要停下脚步看一下四周，一定会有某个人在你看得见的地方。请别伤心、不要绝望，无论如何也请别忘记，自己决不是孤单一人的。</p>
<p style="text-align: right;">——动漫《千与千寻》</p>
<p>2.在我们乡下，有一种神奇的小精灵，他们就像我们的邻居一样，居住在我们的身边嬉戏、玩耍。但是普通人是看不到他们的，据说只有小孩子纯真无邪的心灵可以捕捉他们的形迹。如果静下心来倾听，风声里可以隐约听到他们奔跑的声音。</p>
<p style="text-align: right;">——动漫《龙猫》</p>
<p>3.这里是葱葱郁郁的山神之森，一定，要有一段时间，无法再盼望夏天了。心若刀绞，泪水夺眶而出。然而，留在手中的温暖，与夏日的回忆，都将永远伴随我。</p>
<p style="text-align: right;">——动漫《萤火之森》</p>
<p>4.人生就像一场无成果的游戏，幸福的分量是固定的，假设世上存在的幸福和不幸的总量是固定的，那这就是“有人获得幸福，势必会有人遭遇不幸”的游戏，任谁都觉得自己是世上最不幸的人，认为自己的这般不幸，肯定会有人获得了巨大的幸福。</p>
<p style="text-align: right;">——动漫《游戏人生》</p>
<p>5.If the sound has a shape, it must be the way I love you.</p>
<p>  如果声音有形状，那一定是我爱你的样子。</p>
<p style="text-align: right;">——动漫《声之形》</p>
<p>6.我试着弹了下那把流下来的琴，却再也没发出那么美妙的声音了，那个声音不是透过我的手指，而是由她的心所演奏出来的吧。</p>
<p style="text-align: right;">——动漫《夏目友人帐》</p>
<p>7.世界这么大，而找到真正喜欢可以落脚的地方，又实在是难。</p>
<p style="text-align: right;">——动漫《魔女宅急便》</p>
<p>8.假如有个人愿在自己身边，就算没有任何语言只是在身边，我也觉得是一种幸福，即使失去了一切，只要停下脚步看一下四周，一定会有某个人在你看得见的地方。请别伤心、不要绝望，无论如何也请别忘记，自己决不是孤单一人的。</p>
<p style="text-align: right;">——动漫《AIR》</p>
<p>9.世界是美丽的，就算充满悲伤和泪水。也请睁开你的双眼，去做你想要做的事情，成为你想要成为的人，去找到你的朋友。不必焦躁，慢慢地去长大。</p>
<p style="text-align: right;">——动漫《CLANNAD》</p>
<p>10.从前有个美丽的怪物，在她身边有一只为她效劳的兔子，兔子凭借着自己迷惑方位的本领，驱逐所有接近或伤害怪物的人。怪物赐予那些不被眷顾者恩惠，作为使者送达恩惠的就是兔子。被人们爱着的怪物，不知不觉，当权者认为得到怪物就是得到权力的象征，因此盯上了她。但每次当权者想接近怪物时，总在怪物身边的兔子会变的非常凶狠从而赶走贵族。于是，当权者出一个办法，只要把兔子杀死就能得到怪物了。某天，当权者杀掉了想要保护怪物的兔子，本以为这样就能得到怪物。贵族们兴奋的冲向怪物待着的屋子。但是在他们打开门后出现的景象让所有人都不敢相信，怪物死掉了。原来，兔就是怪物的心脏，他们是异体同心的，怪物的心脏已经死了，怪物随之也会死去。正如你就是我的心脏，没有你我怎能活下去？</p>
<p style="text-align: right;">——动漫《GOSICK》</p>
<P>11.要因这种扭曲的记忆而消失！我们活过的人生是真实存在的，是没有半点虚假的人生！大家都努力活过！就是这样记录下来的记忆，是拼命活过的记忆，无论那是什么样的记忆，都是我们所活过的人生！</P>
<p style="text-align: right;">——动漫《Angel Beats!》</p>
<h2>温馨治愈类动漫欣赏</h2>
<p>治愈系的动漫，或清新淡雅、节奏舒缓，或温情动人、感人肺腑，或激励人心、抚平创伤，往往具有令人心情舒畅，带给人正面鼓励的力量。</p>
<div class="page" style="width:100% ;height: 576px;"><!--照片斜上滚动动画html部分，具体动画实现见anime.css-->
<div class="container" >
<div class="photo-container">
<div class="photo-cont-item animation-1">
<div class="photo-item photo-1"></div>
<div class="photo-item photo-2"></div>
<div class="photo-item photo-3"></div>
<div class="photo-item photo-4"></div>
<div class="photo-item photo-5"></div>
<div class="photo-item photo-6"></div>
<div class="photo-item photo-1"></div>
<div class="photo-item photo-2"></div>
<div class="photo-item photo-3"></div>
<div class="photo-item photo-4"></div>
<div class="photo-item photo-5"></div>
<div class="photo-item photo-6"></div>
</div>
<div class="photo-cont-item animation-2">
<div class="photo-item photo-7"></div>
<div class="photo-item photo-8"></div>
<div class="photo-item photo-9"></div>
<div class="photo-item photo-10"></div>
<div class="photo-item photo-11"></div>
<div class="photo-item photo-12"></div>
<div class="photo-item photo-7"></div>
<div class="photo-item photo-8"></div>
<div class="photo-item photo-9"></div>
<div class="photo-item photo-10"></div>
<div class="photo-item photo-11"></div>
<div class="photo-item photo-12"></div>
</div>
<div class="photo-cont-item animation-3">
<div class="photo-item photo-13"></div>
<div class="photo-item photo-14"></div>
<div class="photo-item photo-15"></div>
<div class="photo-item photo-16"></div>
<div class="photo-item photo-17"></div>
<div class="photo-item photo-18"></div>
<div class="photo-item photo-13"></div>
<div class="photo-item photo-14"></div>
<div class="photo-item photo-15"></div>
<div class="photo-item photo-16"></div>
<div class="photo-item photo-17"></div>
<div class="photo-item photo-18"></div>
</div>
</div><!-- .photo-container -->
</div><!-- .container -->
</div>
<p>你总能在这些影片中得到心灵上的洗礼和灵魂上的升华。那种一股暖流淌过心窝的感受，总能够给人无言的鼓励与安慰。</p>
</div>
<div class="clear"></div>
<div class="xc">
<div class="left">
<img src="images/V3.webp">
</div>
<div class="right">
<ul>
<li>
<div class="wz">
<h1>Angel Beats!</h1>
<h2>作品主题围绕着“人生”展开，以死后的世界为舞台，讲述了反抗着命运的少男少女们的故事。作品中的“人生哲理”与“战斗要素”，当剧中的人物完成生前的遗憾后便会解脱，就是所谓的投胎转世，作品围绕其对人性的体现是其精彩看点。</h2>
<div class="gd"><a href="register.html#7">更多+</a></div>
</div>
<div class="tp"><img src="images/angel.webp"></div>
</li>
<li>
<div class="wz1">
<h1>Summer Pockets</h1>
<h2>主人公鹰原羽依里为了整理过世祖母的遗物，利用暑假独自一人来到鸟白岛。与眺望大海的少女相遇，与寻找不可思议蝴蝶的少女相遇，与寻找回忆与海盗船的少女相遇，与住在宁静灯塔中的少女相遇，在岛上结识了新的伙伴——当时的他想，如果这个暑假永远都不结束就好了。</h2>
<div class="gd"><a href="register.html#9">更多+</a></div>
</div>
<div class="tp1"><img src="images/summer.jpg"></div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<center>
<audio controls loop autoplay id="vd"><!--创建背景音乐-->
<source src="audio/summer.mp3" type="audio/ogg">
<source src="audio/summer.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</center>
<footer><!--页脚-->
动漫-唯美
</footer>
<div class="clear"></div>
</div>
</body>
</html>2.动漫推荐页代码与展示：
<!DOCTYPE html>
<html lang="en">
<head><!--动漫推荐页，该网页主要实现图片在鼠标移入时放大、页面导航、多照片水平滚动展示、艺术字设置、视频页对应跳转等功能-->
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" />
<link href="css/gundong1.css" rel="stylesheet" /><!--实现多照片水平滚动展示-->
<link href="css/body2.css" rel="stylesheet" />
<!--下面css实现图片在鼠标移入时放大功能-->
<style type="text/css">
#div1{
width: 150px;
height: 100px;
border: #000 solid 0px;
margin: 10px 5px 15px 20px;
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
overflow: auto;
transform: scale(2);
}
</style>
<title>动漫-唯美</title>
</head>
<div class="bjimg1"></div>
<body>
<div class="con">
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.ico"width="70" height="70"/>唯美动漫</a>
</div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="register.html">动漫推荐</a>
<ul>
<li><a href="#1">AIR</a></li>
<li><a href="#2">CLANNAD</a></li>
<li><a href="#3">Charlotte 夏洛特</a></li>
<li><a href="#4">JUST Because!</a></li>
<li><a href="#5">ISLAND</a></li>
<li><a href="#6">GOSICK</a></li>
<li><a href="#7">Angel Beat!</a></li>
<li><a href="#8">Plastic Memories</a></li>
<li><a href="#9">Summer Pockets</a></li>
<li><a href="#10">ATRI</a></li>
</ul>
</li>
<li><a href="shopping.html">周边购买</a></li>
<li><a href="user.html">用户登录</a></li>
</ul>
</div>
<div class="clear"></div>
</header>
<div class="clear"></div>
<div class="banner">
<a href="#.html"><img src="images/chang.jpg" width=100% /></a>
</div>
<div class="clear"></div>
<div class="main">
<h2>动漫推荐</h2>
<div class="loopimg" >
<ul>
<li>
<img src="images/jx1.jpg" width=100px height=85px alt="AIR">
</li>
<li>
<img src="images/jx2.jpg" width=100px height=85px alt="CLANNAD">
</li>
<li>
<img src="images/jx3.jpg" width=100px height=85px alt="Charlotte 夏洛特">
</li>
<li>
<img src="images/jx4.jpg" width=100px height=85px alt="JUST Because!">
</li>
<li>
<img src="images/jx5.jpg" width=100px height=85px alt="ISLAND">
</li>
<li>
<img src="images/jx6.jpg" width=100px height=85px alt="GOSICK">
</li>
<li>
<img src="images/jx7.jpg" width=100px height=85px alt="Angel Beat!">
</li>
<li>
<img src="images/jx8.jpg" width=100px height=85px alt="Plastic Memories">
</li>
<li>
<img src="images/jx9.jpg" width=100px height=85px alt="Summer Pockets">
</li>
<li>
<img src="images/jx10.jpg" width=100px height=85px alt="ATRI">
</li>
</ul>
</div>
<p class="colortxt" ><a name="1"></a><strong>AIR</strong><a href="video.html#1"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx1.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>故事的主题是“希望与传承”，讲述了一个跨越千年的翼人传说。一位懂“法术”的、以表演人偶为生的青年国崎往人，一天来到一个海边小镇，遇上了神尾观铃。国崎往人和他的祖先们一直都在寻找一位在天空中有翼的女孩子，而在和观铃一路相处之下，发现观铃可能就是他要寻找的女孩子……</p>
</div>
<div class="main">
<p><a name="2"></a><strong>CLANNAD</strong><a href="video.html#2"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx2.jpg" / style="width: 70%; height: 110%"></div>
<p>剧情概要:</p>
<p>在某个小镇，主角冈崎朋也因为家庭的因素而丧失了生活在这个地方的希望；与春原阳平为朋友，在光坂高等学校过著潦倒的生活，盼望终有一天能够离开所在的小镇。在高三的一个早晨，通往学校的坡道前发现了一个止步不前的女孩，在朋也认识了这个名为古河渚的女孩后，他的生活开始有了重大的变化……</p>
</div>
<div class="main">
<p><a name="3"></a><strong>Charlotte 夏洛特</strong><a href="video.html#3"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx3.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>主角乙坂有宇是一位不太普通的高中生，他拥有可以附身在他人身上5秒的能力。利用这样的能力，乙坂有宇在校园中叱诧风云。他在考试中附身在他人的身上，以此获得考试的答案，从而屡次获得学校总成绩第一，成为传说中的一代“学神”。此外，乙坂有宇又通过这一“附身”能力取得了他一直憧憬的女生的好感。就在他爱情、事业双丰收的时候，他突然被学生会点名。学生会长指控他考试作弊，并要求他进行重新考试以示清白。在乙坂有宇手足无措的时候，他决定附身到学生会长身上以获得答案。在他附身结束后，他身边突然凭空出现了一位少女，自称是星之海学院的学生会长——友利奈绪。友利奈绪告诉乙坂有宇，他是在学生时代短暂拥有特殊能力的“超能力者”。这种短暂的超能力会被一些疯狂的科学家所盯上，进行人体实验，所以这样的学生需要需要受到保护。所以，友利奈绪邀请乙坂有宇加入基本由超能力者组成的星之海学院的学生会，以保护其他学生。乙坂有宇便转校进入了星之海学院，并且加入了学生会；同时，为了保护家属，他的妹妹乙坂步未也转入了这个学校‧‧‧‧‧‧</p>
</div>
<div class="main">
<p><a name="4"></a><strong>JUST Because!</strong><a href="video.html#4"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx4.jpg" / style="width: 70%; height: 110%"></div>
<p>剧情概要:</p>
<p>高中三年级的冬天。</p>
<p>高中生活剩下的时间已经不多。</p>
<p>这样下去总有一天会迎来毕业，任谁都是这么想的。</p>
<p> </p>
<p>直到他的突然归来。</p>
<p> </p>
<p>初中时一度搬迁到遥远城市的同级生。</p>
<p>与不合时节的转学生的重逢，</p>
<p>在他们想着“总有一天”会迎来结束的心情当中，</p>
<p>鸣响了一声小小的起跑信号。</p>
</div>
<div class="main">
<p><a name="5"></a><strong>ISLAND</strong><a href="video.html#5"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx5.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>远离本土的“浦岛”。</p>
<p>住在那里的人们，过着缓慢的生活。</p>
<p>但在五年前，岛上的名门御三家接连发生不幸，</p>
<p>被疑心暗鬼驱使的岛民断绝了与本土的交流，岛也因此不断地衰退。</p>
<p>成为拯救岛的钥匙的是，属于御三家的三位少女。</p>
<p>但她们也被古老的习俗和传统束缚，在内心产生纠结。</p>
<p>此时，一位青年漂流到这座岛上。</p>
<p>主张自己是来自未来的这名青年，为了改变岛的未来，开始了独自一人的奋斗……</p>
</div>
<div class="main">
<p><a name="6"></a><strong>GOSICK</strong><a href="video.html#6"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx6.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>距离遮天盖地的大破坏带来的黑暗已经十年，西欧虽然暂时重返和平，但也预告下一次黑暗的到来——少年身处荡漾的孤独波纹之中。由东方国度来到西欧小国苏瓦尔的山中学园圣玛格丽特学园，这名少年名为久城一弥。不知为何总是冷淡以待的贵族学生、笼罩整个学园的各种怪异传闻、以及语言与文化的障壁。一弥一边听着周围的人们要求自己认真向学，一边过着有如在薄膜之中挣扎的日子。然而故事终究由一起杀人事件揭开序幕。以此为契机，拥有智慧之泉的少女维多利加在学园的图书馆塔顶层与一弥相遇。少年与少女由此踏入巨大旋涡之中。</p>
</div>
<div class="main">
<p><a name="7"></a><strong>Angel Beat!</strong><a href="video.html#7"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx7.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>整个故事内容发生在一个死后的世界，描述着一名已死去的青年音无结弦在此处的校园生活以及众人所拥有不合理的过去人生。由于采用角色们已经逝世且不会再度死去的设定，使得在故事剧情上可以一方面可以过着普通的学校生活，另一方面也可以有着不合常理的事件发生，前者如参与学校的棒球竞赛或者是于食堂用餐等，后者则包括使用枪支与刀械和“天使”交战。故事开头为音无死后突然被送进一所位于死后世界的学校生活着，在那里并遇见了一名名叫仲村由理的女孩邀请他加入死后世界战线（死んだ世界战线）。在故事中由由理所领导的死后世界战线其目的便是要向神表示抗议，而此时他们所认为战线的敌人便是担任学生会会长一职的“天使”，在故事的进展双方随即引发了武装冲突。</p>
</div>
<div class="main">
<p><a name="8"></a><strong>Plastic Memories</strong><a href="video.html#8"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx8.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>这是一个比现在的科学还要有少许进步的世界。18岁的“水柿司”，是一名高考失败的考生，依靠着双亲的关系才得以进入世界大企业SAI社工作。SAI社是进行拥有感情的人形智能机器人（通称：Giftia）的制造管理的企业，司被分配至其终端服务部门工作。只不过，这个部门进行的是从机器人主人那里，回收即将到达约9年固定使用期限的Giftia的业务，即“窗边部门（不被重视的部门）”罢了。由此，司与有着派不上用场的迷糊属性的打杂Giftia少女“艾拉”成为了搭档，一起开始了工作，他们将要面对的，是各种与「Giftia」离别的故事......</p>
</div>
<div class="main">
<p><a name="9"></a><strong>Summer Pockets</strong><a href="video.html#9"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx9.jpg" / style="width: 60%; height: 120%"></div>
<p>剧情概要:</p>
<p>主人公鹰原羽依里为了整理过世祖母的遗物，利用暑假独自一人来到鸟白岛。走下一天只有几趟的联络船的时候，他与一名少女相遇。她任海风吹拂着发丝，只是一直眺望着那条说不出是海是空的界线，渐行渐远……恍然回神，那少女已不知走到哪里了。羽依里的心像是被狐狸揪了一下似的，但他依旧向祖母家走去。那里住了名亲戚——姑妈，她正在整理遗物。羽依里在帮忙整理祖母的回忆之物时，虽然对于初次接触的「岛上生活」感到困惑，却也逐渐适应着这样的生活。</p>
<p>都市生活里是没法感受到与大自然的亲密接触的,这样的岛上生活让他想起了不知从什么时候起便已遗忘的记忆。</p>
<p>与眺望大海的少女相遇，</p>
<p>与寻找不可思议蝴蝶的少女相遇，</p>
<p>与寻找回忆与海盗船的少女相遇，</p>
<p>与住在宁静灯塔中的少女相遇，</p>
<p>在岛上结识了新的伙伴——</p>
<p>当时的他想，如果这个暑假永远都不结束就好了。</p>
</div>
<div class="main">
<p><a name="10"></a><strong>ATRI</strong><a href="video.html#10"><strong style="font-size:15px; ">    视频播放</strong></a></p>
<div id="div1"><img src="images/jx10.jpg" / style="width: 100%;"></div>
<p>剧情概要:</p>
<p>在不远的未来，海平面原因不明地急速上升，导致了地表多数都沉入海中。</p>
<p>小时候因为事故而失去一条腿的少年：斑鸠夏生，
厌倦了都市的生活，移居到了海边的乡村小镇。</p>
<p>曾经身为海洋地质学家的祖母留给他的，
就只有船、潜水艇还有债务。</p>
<p>夏生为了取回“失去的未来”，与迷之讨债人凯瑟琳一起，
潜海前往据说保存着祖母遗产的海底仓库。</p>
<p>在那里，</p>
<p>他遇到了一位沉睡在如同棺材一般装置中不可思议的少女――亚托莉。</p>
<p>她是一位构造精密到与人类别无二致，而有着又丰富感情的机器人。</p>
<p>「我想完成主人留给我的最后的命令。</p>
<p>在此之前，我会成为夏生先生的腿！」</p>
<p>从海底被打捞起来的亚托莉如是说到。</p>
<p>在一个逐渐沉入海中的平和小镇，</p>
<p>少年和机器人少女的难忘夏日就这么开始了——</p>
</div>
<footer>
动漫-唯美
</footer>
</div>
<script src="js/gundongtu.js"></script>
</body>
</html>3.周边购买页代码与展示：
<!DOCTYPE html>
<html lang="en">
<head><!--周边购物页，该网页主要参考书上案例改编而成的，主要实现通过js、css、按钮等功能实现商品选取，计算价格、列出购物清单等功能-->
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" />
<link href="css/yanse.css" rel="stylesheet" />
<link href="css/body3.css" rel="stylesheet" />
<title>周边购买</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<style type="text/css">
table{height: 800px; width: 100%;border-collapse: separate;table-layout: auto;}
td{text-align: center;vertical-align: middle;}
.myBtn {margin: 20px;width: 120px; height: 45px;border: 1px ridge #44FFEE;}
</style>
<script type="text/javascript">
var result = ""; //存放选购信息
var price = new Array(99.00, 199.00, 298.00, 499.00, 648.00, 999.00);
var product = new Array("CLANNAD团子大家族 古河渚 二次元 毛绒公仔", "Summer Pocket 游戏 本体 硬盘PC版", "Charlotte夏洛特 男女二次元动漫周边 乙坂有宇 友利奈绪 短袖t恤圆领", "ATRI -My Dear Moments- 亚托莉 等比手办 1/5", "Angel Beats! 天使 立华奏 和服礼裝Ver. 等比手办 1/8", "CAworks Angel Beats! 立华奏 Key20周年纪念哥特萝莉版 新配色 等比手办 1/8");
var isSelected = new Array(0, 0, 0, 0, 0, 0);
var count1 = new Array(0,0,0,0,0,0);
var jx=2;
window.attachEvent("onland",jx1);
window.attachEvent("onland",jx2);
window.attachEvent("onland",jx3);
window.attachEvent("onland",jx4);
window.attachEvent("onland",jx5);
window.attachEvent("onland",jx6);
function jx1(){
var num = document.getElementById('num1'),
btn = document.getElementById('btn1');
btn.onclick = function(){
b = Number(num1.value);
//console.log(Number(num1.value));
i=0;
count1[i]=Number(b);
}
}
function jx2(){
var num = document.getElementById('num2'),
btn = document.getElementById('btn2');
btn.onclick = function(){
b = Number(num2.value);
//console.log(Number(num1.value));
i=1;
count1[i]=Number(b);
}
}
function jx3(){
var num = document.getElementById('num3'),
btn = document.getElementById('btn3');
btn.onclick = function(){
b = Number(num3.value);
//console.log(Number(num1.value));
i=2;
count1[i]=Number(b);
}
}
function jx4(){
var num = document.getElementById('num4'),
btn = document.getElementById('btn4');
btn.onclick = function(){
b = Number(num4.value);
//console.log(Number(num1.value));
i=3;
count1[i]=Number(b);
}
}
function jx5(){
var num = document.getElementById('num5'),
btn = document.getElementById('btn5');
btn.onclick = function(){
b = Number(num5.value);
//console.log(Number(num1.value));
i=4;
count1[i]=Number(b);
}
}
function jx6(){
var num = document.getElementById('num6'),
btn = document.getElementById('btn6');
btn.onclick = function(){
b = Number(num6.value);
//console.log(Number(num1.value));
i=5;
count1[i]=Number(b);
}
}
function clearAll() {
isSelected = [0, 0, 0, 0, 0, 0]; //选择状态全部置0
//所有复选框状态变为未选中状态
myForm.sp0.checked = false;
myForm.sp1.checked = false;
myForm.sp2.checked = false;
myForm.sp3.checked = false;
myForm.sp4.checked = false;
myForm.sp5.checked = false;
count1[0]=0;
count1[1]=0;
count1[2]=0;
count1[3]=0;
count1[4]=0;
count1[5]=0;
document.getElementById("num1").value="";
document.getElementById("num2").value="";
document.getElementById("num3").value="";
document.getElementById("num4").value="";
document.getElementById("num5").value="";
document.getElementById("num6").value="";
}
function checkOut() {
var total = 0;//存放小计金额
var count = 0;//存放选购产品件数
for(var i = 0; i < isSelected.length; i++) {
count += Number(count1[i])*isSelected[i];
}
for(var i = 0; i < price.length; i++) {
total = total + price[i] * count1[i]*isSelected[i];//累计金额
}
alert("您所选购的" + count + "件,产品总价=" + total+"\n"+"请去支付！");
}
function shoppingCart() {
//判断有多少个复选框被选中
var selectList = ""; //保存所选产品清单
for(var j = 0; j < product.length; j++) {
if(isSelected[j]) {//分行显示
selectList += (j + 1) + "-" + product[j] + ",价值=" + price[j] + ",数量="+ count1[j] +"\n";
}
}
var info = (selectList == "") ? "您的购物车为空，请选购！" : selectList;
alert(info);//生成一个结算清单，显示输出
}
function checkSelect(number) {
var temp;//暂存复选框状态
switch(number) {
case 0:
temp = myForm.sp0.checked; break;
case 1:
temp = myForm.sp1.checked; break;
case 2:
temp = myForm.sp2.checked; break;
case 3:
temp = myForm.sp3.checked; break;
case 4:
temp = myForm.sp4.checked; break;
default:
temp = myForm.sp5.checked; break;
}
isSelected[number] = (temp) ? 1 : 0; //记录下选中产品，1-选中，0-未选
}
</script>
<style>
p.colortxt{
font-size: 30px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
<title>动漫-唯美</title>
</head>
<div class="bjimg2"></div>
<div id="myDiv" class="con" style="background: rgba(255,255,255,.6);margin-top: 20px;">
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.ico"width="70" height="70"/>唯美动漫</a>
</div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="register.html">动漫推荐</a>
<ul>
<li><a href="register.html#1">AIR</a></li>
<li><a href="register.html#2">CLANNAD</a></li>
<li><a href="register.html#3">Charlotte 夏洛特</a></li>
<li><a href="register.html#4">JUST Because!</a></li>
<li><a href="register.html#5">ISLAND</a></li>
<li><a href="register.html#6">GOSICK</a></li>
<li><a href="register.html#7">Angel Beat!</a></li>
<li><a href="register.html#8">Plastic Memories</a></li>
<li><a href="register.html#9">Summer Pockets</a></li>
<li><a href="register.html#10">ATRI</a></li>
</ul>
</li>
<li><a href="shopping.html">周边购买</a></li>
<li><a href="user.html">用户登录</a></li>
</ul>
</div>
<div class="clear"></div>
</header>
<div class="clear"></div>
<div class="banner"><img src="images/chang.jpg"></div>
<div class="main">
<h2>周边购买</h2>
</div>
<input type="button" value="粉红色" onclick="color('pink')"/>
<input type="button" value="紫色" onclick="color('purple')"/>
<input type="button" value="蓝色" onclick="color('blue')"/>
<input type="button" value="原色" onclick="color('rgba(255,255,255,.6)')"/>
<div>
<form name="myForm" method="post" action="">
<table align="center" border="1">
<caption>周边购买-商品备选区</caption>
<tr align="center" valign="middle";>
<td ><img src="images/s1.jpg" height="200" width="220" /><br />
<h4 name="h41">CLANNAD团子大家族 古河渚 二次元 毛绒公仔</h4><input type="checkbox" name="sp0" value="99" onclick="checkSelect(0);">¥ 99.00<br />
<input type="number" name="1" id="num1" placeholder="数量" onclick="jx1();">
<input type="button" name="1" value="确认" id="btn1" >
</td>
<td ><img src="images/s2.jpg" height="200" width="200"/><br />
<h4 name="h421">Summer Pocket 游戏 本体 硬盘PC版</h4>
<input type="checkbox" name="sp1" value="199" onclick="checkSelect(1);">¥ 199.00<br />
<input type="number" name="1" id="num2" placeholder="数量" onclick="jx2();">
<input type="button" name="2" value="确认" id="btn2" >
</td>
<td ><img src="images/s3.jpg" height="200" width="200"/><br />
<h4 name="h43">Charlotte夏洛特 男女二次元动漫周边 乙坂有宇 友利奈绪 短袖t恤圆领</h4>
<input type="checkbox" name="sp2" onclick="checkSelect(2);"> ¥ 298.00<br />
<input type="number" name="1" id="num3" placeholder="数量" onclick="jx3();">
<input type="button" name="3" value="确认" id="btn3" >
</td>
</tr>
<tr>
<td ><img src="images/s4.jpg" height="200" width="220"/><br />
<h4 name="h44">ATRI -My Dear Moments- 亚托莉 等比手办 1/5</h4><input type="checkbox" name="sp3" value="499" onclick="checkSelect(3);"> ¥ 499.00
<br />
<input type="number" name="1" id="num4" placeholder="数量" onclick="jx4();">
<input type="button" name="4" value="确认" id="btn4" >
</td>
<td ><img src="images/s5.jpg" height="200" width="200"/><br />
<h4 name="h45">Angel Beats! 天使 立华奏 和服礼裝Ver. 等比手办 1/8</h4>
<input type="checkbox" name="sp4" value="648" onclick="checkSelect(4);">¥ 648.00<br />
<input type="number" name="1" id="num5" placeholder="数量" onclick="jx5();">
<input type="button" name="5" value="确认" id="btn5" >
</td>
<td ><img src="images/s6.jpg" height="200" width="200"/><br />
<h4 name="h46">CAworks Angel Beats! 立华奏 Key20周年纪念哥特萝莉版 新配色 等比手办 1/8</h4>
<input type="checkbox" name="sp5" value="999" onclick="checkSelect(5);">¥ 999.00<br />
<input type="number" name="1" id="num6" placeholder="数量" onclick="jx6();">
<input type="button" name="6" value="确认" id="btn6" >
</td>
</tr>
<tr>
<td colspan="3">
<input class="myBtn" type="button" value="查看购物车" onclick="shoppingCart();">
<input class="myBtn" type="button" value="收银台结算" onclick="checkOut();">
<input class="myBtn" type="button" value="初始化参数" onclick="clearAll();">
</td>
</tr>
</table>
</form>
</div>
<div class="clear"></div>
<footer>
周边-购买
</footer>
</div>
<div class="clear"></div>
</div>
<script src="js/yanse.js">//
</script>
</body>
</html>
总结
一套合格的网页应该包含：
1.页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
2.所有页面相互超链接，可到三级页面，有5-10个页面组成；
3.页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
4.菜单美观、醒目，二级菜单可正常弹出与跳转；
5.要有JS特效，如定时切换和手动切换图片新闻；
6.页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
7.页面清爽、美观、大方，不雷同。
8.网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
扫一扫
2916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
