说一哈：此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。
一、网页基本框架
1.站点结构导航
此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。
2.网页结构框架
3.网页预览
www.igrid.top/1
二、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部分
ody { /*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库并放在自己网页的目录下 jquery.com/download/
2.在html内引入库文件
<script src="js/jquery.js" type="text/javascript"></script>
3.尽情造作吧~
三、JQuery的引用和使用
1.JQuery引用
1.下载JQuery库并放在自己网页的目录下 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>复制代码完成
四、结束啦
第一次分享自己的东西，很多地方说的不好，以后会慢慢丰富自己的，啾咪！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
