说一哈：此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。
一、网页基本框架
1.站点结构导航
此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。
2.网页结构框架
3.网页预览
二、HTML及CSS代码
1.HTML部分
<div class="div_head"><a name="index"></a>
<div class="div_logo"><img src="img/logo.png" height="100"></div>
<div class="div_bar">
<table width="50%" border="0" align="right">
<tbody>
<tr>
<td><a href="#index"><h2>首页</h3></a></td>
<td><a href="#story"><h2>剧情</h3></a></td>
<td><a href="#switch"><h2>平台</h3></a></td>
<td><a href="#about"><h2>关于</h3></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="div_index">
<div class="div_leftword">
<p class="p_2">超级马里奥</p>
<p class="p_1">奥德赛</p>
<p class="p_3">スーパーマリオ オデッセイ</p>
</div>
<div class="div_rightword"><div id="clock2"></div>
</div>
<div class="div_centerpic">
<img src="img/fengmian.png">
</div>
</div>
<div class="div_story"><a name="story"></a>
<div class="div_leftstory">
<div class="div_leftstoryText">
<p class="p_storyjuqing">剧情设计</p><p class="p_textabout">游戏故事叙述库巴绑走碧姬公主与来自帽子之国的帽子精灵女孩“缇雅菈”，逼迫碧姬公主与它结婚。身为碧姬公主爱人的玛利欧，为阻止婚礼，与缇雅菈的哥哥帽子精灵“恰比”连手，搭乘帽子型飞船“奥德赛号”周游世界，施展恰比附身的神奇帽子，拯救心爱的人归来。</p>
</div>
<div class="div_leftstoryPic">
<img src="img/chara01.png">
</div>
</div>
<div class="div_rightstory">
<div class="div_rightstoryText">
<p class="p_storyjuqing2">主要任务</p><p class="p_textabout2">在途中，马里奥将会收集到散落各地的“威力月亮”，这些月亮可以驱动奥德赛号前往不同国度进行冒险。已经公布的国度有都市之国、砂之国、料理之国、森之国、帽子之国、瀑布之国、雪之国、海之国等国度。当你在通关之后，每个王国都会解锁更多的能量月亮。</p><p class="p_textabout2">在每个王国中，你都能找到金属盒子，而你的帽子“坎比”会对它评论一番。然而，当你看完通关字幕并返回这里后，你可将帽子甩在盒子上将它送上天空。随即，这个盒子会打开并为你解锁更多新的能量月亮通关之后，你将可用游戏中收集的金币为马力欧购买更多帽子及服饰，其中有部分内容可通过amiibo解锁。另外一些物品，则需通过收集能量月亮来解锁。</p>
</div>
<div class="div_rightstoryPic"><img src="img/chara01(1).png" height="500"></div>
</div>
<div class="div_storySwitch">
<img src="img/bar.png" class="pic_bar">
<p> </p><p> </p><p> </p><p> </p>
<table width="100%">
<tbody>
<tr>
<td height="76"><table width="70%" align="center">
<tbody>
<tr>
<td><img src="img/title_joycon01.png" width="150" height="425" alt=""/></td>
<td><marquee bgcolor="#000000" width="100%" align="middle">
<img src="img/marquee/mq1.jpg" height="410px">
<img src="img/marquee/mq2.jpg" height="410px">
<img src="img/marquee/mq3.jpg" height="410px">
<img src="img/marquee/mq4.jpg" height="410px">
<img src="img/marquee/mq5.jpg" height="410px">
<img src="img/marquee/mq6.jpg" height="410px">
</marquee></td>
<td><table width="50%" align="right">
<tbody>
<tr>
<td><img src="img/title_joycon02.png" width="150" height="425" alt=""/></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table><p> </p>
<table width="100%" class="table_switch">
<tbody>
<tr>
<td height="413"><table width="30%">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
<div class="div_switch"><a name="switch"></a>
<div class="div_switchMain">
<img src="img/switch_logo.png" class="pic_switch">
</div>
<div class="div_switchShare">
<table width="80%" border="0" align="center" cellspacing="30">
<tbody>
<tr>
<td><p><img class="pic_about" src="img/switch_pic/pic1.jpg" width="350" height="350" alt=""/></p>
<p class="p_switch"><strong>TV模式</strong></p></td>
<td><p><img class="pic_about" src="img/switch_pic/pic2.jpg" width="350" height="350" alt=""/></p>
<p class="p_switch"><strong>桌面模式</strong></p></td>
<td><p><img class="pic_about" src="img/switch_pic/pic3.jpg" width="380" height="350" alt=""/></p>
<p class="p_switch"><strong>手提模式</strong></p></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="div_about">
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> <a name="about"></a></p><p> </p>
<table width="80%" border="0" align="center" cellspacing="30" class="table_about">
<tbody>
<tr>
<td height="862" valign = "top"><p> </p>
<table width="90%" border="0" align="center">
<tbody>
<tr>
<td valign = "top"><img src="img/about.jpg" width="400" height="238" alt="" class="pic_about" />
<img src="img/about.png" width="400" height="227" alt=""/></td>
</tr>
</tbody>
</table></td>
<td valign = "top"> <h2>超级马里奥：奥德赛</h2><p class="p_textabout">《超级马里奥：奥德赛 》（Super Mario Odyssey）是任天堂游戏公司发行的开放世界动作冒险游戏。2017年10月27日独占登陆新主机NS。本作是睽违15年继承超级马里奥64以及阳光马里奥高自由度血脉的箱庭探索3D马里奥正统续作。游戏对应官方繁体中文和简体中文。EDGE，IGN和Gamestop均给出满分评定，媒体均给出极高的正面评价，综评网站Metacritic奥德赛的综评为97。</p><p class="p_textabout">当我们切换到「掌机模式」游玩。掌机模式如同 TV 模式，画面表现和流畅度丝毫不缩水，带来 TV 和掌机无缝接轨的游玩体验，玩家如果在家以电视探索广大的世界之时，临时有其他要事出门时，也可以马上切换成掌机模式，在外继续完整的游戏体验</p><p class="p_textabout">17年1 月14 、 15 日Nintendo Switch 体验会2017，在『超级马力欧奥德赛』的表演展场上所举办
的与开发者对谈单元邀请到 3D 马力欧生父小泉欢晃以及制作阳光马力欧的元仓健太谈论这款 3D 马力欧究竟该如何呈现。小泉欢晃解释 3D 马力欧有两种之分，一种是像银河或 3D 乐园这种在进入游戏一开始就已经决定好过关方向的通关型及 64 或阳光这种在一个关卡内设置好几种过关点的箱庭探索型。</p><p class="p_textabout">这是继1996年N64平台《超级马里奥64》和2002年GC平台《超级马里奥：阳光》后，系列再度迎来沙箱风格的3D游戏。探索充满秘密和惊喜的大型3D王国，游戏场景涵盖城镇、森林、沙漠、果园等，马里奥将乘坐飞空艇在不同的主题世界来回穿梭，包括纽约风格的大都市“纽当城”（New Donk City）和“树林王国”（Wooded Kingdom）等。</p><p class="p_textabout">游戏故事叙述库巴绑走碧姬公主与来自帽子之国的帽子精灵女孩“缇雅菈”，逼迫碧姬公主与它结婚。身为碧姬公主爱人的玛利欧，为阻止婚礼，与缇雅菈的哥哥帽子精灵“恰比”连手，搭乘帽子型飞船“奥德赛号”周游世界，施展恰比附身的神奇帽子，拯救心爱的人归来。</p></td>
</tr>
</tbody>
</table>
</p><p> </p><p> </p>
<img src="img/bar.png" class="pic_bar">
<p> </p><p> </p><p> </p>
<table width="60%" align="center" class="report_table">
<tbody>
<tr>
<td><form id="form1" name="form1" method="post">
<p class="p_2"> </p>
<p class="p_2">调查问卷</p>
<p class="p_2"> </p>
</form>
<table width="50%" align="center">
<tbody>
<tr>
<td><form id="form2" name="form2" method="post">
<p>
<label for="textfield">姓名:</label>
<input type="text" name="textfield" id="textfield">
</p>
<p>
<label for="select">性别:</label>
<select name="select" id="select">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">随便</option>
</select>
</p>
<p>
<label for="date">哪年生的:</label>
<input type="date" name="date" id="date">
</p>
<p>您是: </p>
<p>
<label>
<input type="radio" name="你是:" value="0" id="你是:_0">
游戏爱好者</label>
<br>
<label>
<input type="radio" name="你是:" value="1" id="你是:_1">
老任忠实粉</label>
<br>
<label>
<input type="radio" name="你是:" value="2" id="你是:_2">
超级社会王</label>
<br>
<label>
<input type="radio" name="你是:" value="3" id="你是:_3">
论坛技术宅</label>
</p>
<p>
<label for="range">"买不买"指数:</label>
不买
<input name="range" type="range" id="range" autocomplete="off">
买
</p>
<table width="40%" align="center">
<tbody>
<tr>
<td><input type="submit" name="submit" id="submit" value="交了吧">
<input type="reset" name="reset" id="reset" value="不想交了"></td>
</tr>
</tbody>
</table>
<p> </p>
<p><br>
</p>
</form></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
</div>
<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
<div class="div_float"><a href="#index" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button"></a>
<p></p>
<a href="#story" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button1','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button1"></a>
<p></p>
<a href="#switch" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button2','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button2"></a>
<p></p>
<a href="#about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button3','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button3"></a></div>
</div>
<div><p class="p_copy">沧州师范学院©</p></div>
2.CSS部分
body {
/*background-color: #AECD7D;*/
background-color:#C90103;
}
.div_head{
width: 100%;
height: 130px;
}
.div_logo{
width:auto;
height:100px;
margin-left: 100px;
margin-top: 20px;
float: left;
}
.div_bar{
width: 800px;
height: 100px;
margin-top: 30px;
margin-right: 80px;
float: right;
}
.div_index{
height: 560px;
width: 100%;
}
.div_leftword{
height: 600px;
width: 500px;
position: absolute;
top: 300px;
left: 50px;
}
.div_rightword{
height: 600px;
width: 500px;
position: absolute;
top: 350px;
left: 1100px;
}
.div_centerpic{
width: 300px;
height: 800px;
margin-left: 200px;
position: absolute;
top: 126px;
left: 450px;
}
.div_story{
height: 2000px;
width: 100%;
}
.div_leftstory{
height: 430px;
width: 100%;
background-color: white;
}
.div_leftstoryText{
width: 30%;
position:absolute;
top: 860px;
left: 200px;
vertical-align: middle;
}
.div_leftstoryPic{
width: 40%;
position:absolute;
top: 820px;
right: 50px;
}
.div_rightstory{
height: 650px;
}
.div_rightstoryText{
width: 30%;
position: absolute;
top: 1350px;
right: 300px;
}
.div_rightstoryPic{
width: 40%;
position: absolute;
top: 1200px;
left: 160px;
}
.div_storySwitch{
height: 600px;
width: 100%;
}
.div_switch{
height: 1000px;
}
.div_switchMain{
height: 800px;
}
.div_switchShare{
width: 100%;
background-color: #FFFFFF;
height: 500px;
}
.div_about{
height: 2200px;
}
.div_float{
height: 300px;
width: 60px;
margin-top: 300px;
}
.pic_switch{
position: absolute;
top: 2600px;
left: 650px;
width: 400px;
height: auto;
}
.pic_bar{
float: right;
}
.p_2{
text-align: center;
color: #000000;
font-family:"font1";
font-size: 40px;
margin: 0 auto;
}
.p_1{
text-align: center;
color: #FFFFFF;
font-family:"font1";
font-size: 80px;
margin: 0 auto;
}
.p_3{
text-align: center;
color: #000000;
font-family:"font1";
font-size: 19px;
margin: 0 auto;
}
.p_about{
font-size: 10px;
color: #FFFFFF;
text-indent: 2em;
font-family: "微软雅黑";
}
.p_copy{
text-align: center;
font-family:"微软雅黑";
color:#FFFFFF;
font-size: 15px;
}
.pic_about{
border-radius: 5px;
}
.p_textabout{
text-indent: 2em;
}
.p_switch{
text-align: center;
font-size: 20px;
font-family: "微软雅黑";
}
.p_storyjuqing{
font-family: "微软雅黑";
font-size: 20px;
font-weight: bold;
}
.p_storyjuqing2{
font-family: "微软雅黑";
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
.p_textabout2{
text-indent: 2em;
color: #FFFFFF;
}
.report_table{
background-color: #FFFFFF;
border-radius: 5px;
}
.table_about{
background: #FFFFFF;
}
li{
list-style:none;
}
@font-face {
font-family:"font1";
src:url(../font1.TTF);
}
三、JQuery的引用和使用
1.JQuery引用
1.下载JQuery库并放在自己网页的目录下 https://jquery.com/download/
2.在html内引入库文件
<script src="js/jquery.js" type="text/javascript"></script>3.尽情造作吧~
2.JQuery的使用
1.流畅的锚点
先在html中写一个浮动的div，在里面写出普通的锚点，格式如下：
<a href="#story"></a>加上鼠标经过图像，成品代码如下：
<div class="div_float"><a href="#index" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button"></a>
<p></p>
<a href="#story" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button1','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button1"></a>
<p></p>
<a href="#switch" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button2','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button2"></a>
<p></p>
<a href="#about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('button3','','img/button/button_af.png',1)"><img src="img/button/button_bf.png" alt="" width="50" height="50" id="button3"></a>
</div>在<script type="text/javascript"><script>中加入如下效果代码
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
});
2.好看的小表za
模板，网上大把大把的，其他使用同理。
html内先引入下网上的模板js文件
<script src="js/jquery.MyDigitclock.js"></script>在<script type="text/javascript"><script>中加入如下效果代码
$(document).ready(function(){
$(function(){
$("#clock2").MyDigitClock({
fontSize:70,
fontFamily:"Century gothic",
fontColor: "#FFF",
fontWeight:"bold",
bAmPm:true,
background:'#C90103',
bShowHeartBeat:true
});
});
});写一个div，id为clock2
<div class="div_rightword"><div id="clock2"></div>完成
四、结束啦
第一次分享自己的东西，很多地方说的不好，以后会慢慢丰富自己的，啾咪！
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
