web期末设计 自选3 明日方舟网站
web设计 自选3 明日方舟网站
首页
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于title>
<link rel="stylesheet" href="mystyle/style.css" type="text/css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
script>
<script src="mystyle/STYLE.js">script>
head>
<body style="width: auto; height: 760px;">
<div id="top1">
<a href="index.html">
<div style="margin-left: 20px;">首页div>
a>
<a href="people.html">
<div>干员立绘div>
a>
<a href="fashion.html">
<div>时装回廊div>
a>
<a href="#" class="no">
<div>材料图鉴div>
a>
<a href="#" class="no">
<div>活动详情div>
a>
<a href="how.html">
<div>如何使用div>
a>
<a href="about.html">
<div style="border-bottom: 5px solid #ffd04b;">关于div>
a>
div>
<br><br>
<div style="width: 700px; height: 500px;position: absolute;font-size: 24px;">
<br><br><br><br>
如何联系我们：漂流瓶
div>
<div id="bottom" style="margin-top: 650px;">
瓦坎达ICP备66666666号
div>
body>
html>
分页1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时装回廊title>
<link rel="stylesheet" href="mystyle/clo.css" type="text/css">
<script src="modernizr.js">script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script src="mystyle/fashion.js">script>
<script src="mystyle/modernizr.js">script>
<style class="cp-pen-styles">
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
@media (max-width: 767px) {
body {
font-size: 70%;
}
}
style>
head>
<body>
<div id="bottom">
瓦坎达ICP备66666666号
div>
<div class="wrapper active-page1">
<div class="page page1">
<div class="top">
<a href="index.html">
<div style="margin-left: 20px;">首页div>
a>
<a href="people.html">
<div>干员立绘div>
a>
<a href="#">
<div style="border-bottom: 5px solid #ffd04b;">时装回廊div>
a>
<a href="#" class="no">
<div>材料图鉴div>
a>
<a href="#" class="no">
<div>整合运动div>
a>
<a href="how.html">
<div>如何使用div>
a>
<a href="about.html">
<div>关于div>
a>
div>
<div>
<div class="banner" style="margin-top: 48px;">
<div class="pic">
<a href="#" style="display: none; opacity: 1;"><img src="images/寒武纪1.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: inline; opacity: 1;"><img src="images/寒武纪2.webp" height="307.8px"
width="504px" />a>
div>
<div class="btn">
<ul>
<li class="">li>
<li class="one">li>
ul>
div>
<img src="images/135px-Skin_logo_寒武纪系列.png" class="logo" />
<div class="names"><b>寒武纪™系列b>div>
<div class="text">
<p>无惧寒冷p>
<p>寒武纪品牌以防寒性能闻名。最早在寒冷p>
<p>地区大受好评，随后也逐渐推广至气候变p>
<p>化较大的地区。作为最早面向信使的品牌p>
<p>之一，寒武纪不断推出更多的产品，以美观p>
<p>、安全、保暖为不变宗旨。p>
div>
div>
<div class="clothes">
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_198_blackd_winter%231.png?x-oss-process=style/small-test"
class="img2" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_143_ghost_winter%231.png?x-oss-process=style/small-test"
class="img2" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_102_texas_winter%231.png?x-oss-process=style/small-test"
class="img2" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_123_fang_winter%231.png?x-oss-process=style/small-test"
class="img2" />a>
div>
div>
div>
<div class="page page2">
<div class="top">
<a href="index.html">
<div style="margin-left: 20px;">首页div>
a>
<a href="people.html">
<div>干员立绘div>
a>
<a href="#">
<div style="border-bottom: 5px solid #ffd04b;">时装回廊div>
a>
<a href="#" class="no">
<div>材料图鉴div>
a>
<a href="#" class="no">
<div>整合运动div>
a>
<a href="how.html">
<div>如何使用div>
a>
<a href="about.html">
<div>关于div>
a>
div>
<div>
<div class="banner" style="margin-top: 48px;">
<div class="pic">
<a href="#" style="display: none; opacity: 1;"><img src="images/冰原信使1.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: inline; opacity: 1;"><img src="images/冰原信使2.webp" height="307.8px"
width="504px" />a>
div>
<div class="btn">
<ul>
<li class="">li>
<li class="one">li>
ul>
div>
<img src="images/135px-Skin_logo_冰原信使.png" class="logo" />
<div class="names"><b>冰原信使b>div>
<div class="text">
<p>盛礼迎门，不求回报p>
<p>从古至今，大地上流传着一位信使的传说p>
<p>。他身披红衣，脚踏雪橇，穿过茫茫雪原p>
<p>为他人送去救命物资。为了纪念这位信使p>
<p>，他的故事成为品牌，承载起人们简单而p>
<p>美好的愿望。p>
div>
div>
<div class="clothes">
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_340_shwaz_snow%231.png?x-oss-process=style/small-test"
class="img4" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_174_slbell_snow%231.png?x-oss-process=style/small-test"
class="img4" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_172_svrash_snow%231.png?x-oss-process=style/small-test"
class="img4" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_209_ardign_snow%231.png?x-oss-process=style/small-test"
class="img4" />a>
div>
div>
div>
<div class="page page3">
<div class="top">
<a href="index.html">
<div style="margin-left: 20px;">首页div>
a>
<a href="people.html">
<div>干员立绘div>
a>
<a href="#">
<div style="border-bottom: 5px solid #ffd04b;">时装回廊div>
a>
<a href="#" class="no">
<div>材料图鉴div>
a>
<a href="#" class="no">
<div>整合运动div>
a>
<a href="how.html">
<div>如何使用div>
a>
<a href="about.html">
<div>关于div>
a>
div>
<div>
<div class="banner" style="margin-top: 48px;">
<div class="pic">
<a href="#" style="display: none; opacity: 1;"><img src="images/斗争血脉1.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: none; opacity: 1;"><img src="images/斗争血脉2.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: inline; opacity: 1;"><img src="images/斗争血脉3.webp" height="307.8px"
width="504px" />a>
div>
<div class="btn">
<ul>
<li class="">li>
<li class="">li>
<li class="one">li>
ul>
div>
<img src="images/135px-Skin_logo_斗争血脉.png" class="logo" />
<div class="names"><b>斗争血脉b>div>
<div class="text">
<p>斗争不断，血脉相承p>
<p>斗争血脉是罗德岛与其他合作组织基于干p>
<p>员实际需求合力研制的实验性个人装备。p>
<p>装备中浓缩了先进甚至接近危险的技术，p>
<p>只为让干员应对最严苛的任务。罗德岛与p>
<p>干员们从不放弃。p>
div>
div>
<div class="clothes">
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_122_beagle_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_283_midn_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_367_swllow_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_279_excu_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_140_whitew_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_291_aglina_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_202_demkni_boc%231.png?x-oss-process=style/small-test"
class="img3" />a>
div>
div>
div>
<div class="page page4">
<div class="top">
<a href="index.html">
<div style="margin-left: 20px;">首页div>
a>
<a href="people.html">
<div>干员立绘div>
a>
<a href="#">
<div style="border-bottom: 5px solid #ffd04b;">时装回廊div>
a>
<a href="#" class="no">
<div>材料图鉴div>
a>
<a href="#" class="no">
<div>整合运动div>
a>
<a href="how.html">
<div>如何使用div>
a>
<a href="about.html">
<div>关于div>
a>
div>
<div>
<div class="banner" style="margin-top: 48px;">
<div class="pic">
<a href="#" style="display: none; opacity: 1;"><img src="images/生命之地1.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: none; opacity: 1;"><img src="images/生命之地2.webp" height="307.8px"
width="504px" />a>
<a href="#" style="display: inline; opacity: 1;"><img src="images/生命之地3.webp" height="307.8px"
width="504px" />a>
div>
<div class="btn">
<ul>
<li class="">li>
<li class="">li>
<li class="one">li>
ul>
div>
<img src="images/135px-Skin_logo_生命之地.png" class="logo" />
<div class="names"><b>生命之地b>div>
<div class="text">
<p>生命风雨无阻p>
<p>生命之地品牌注重野外服饰用品设计。该p>
<p>产品源于用户对于探索特别自然环境的需p>
<p>求，以轻便耐用和优秀设计博得市场青睐p>
<p>。在完成量产设计后，生命之地走向普通p>
<p>用户，成为一种新的潮流。p>
div>
div>
<div class="clothes">
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_112_siege_wild%232.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_103_angel_wild%231.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_173_slchan_wild%231.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_150_snakek_wild%231.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_117_myrrh_wild%231.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_158_milu_wild%232.png?x-oss-process=style/small-test"
class="img1" />a>
<a href="#"><img
src="https://andata.somedata.top/dataX/char/halfPic/char_235_jesica_wild%232.png?x-oss-process=style/small-test"
class="img1" />a>
div>
div>
div>
div>
<div class="nav-panel">
<div class="scroll-btn up">
div>
<div class="scroll-btn down">
div>
<nav>
<ul>
<li data-target="1" class="nav-btn nav-page1 active">li>
<li data-target="2" class="nav-btn nav-page2">li>
<li data-target="3" class="nav-btn nav-page3">li>
<li data-target="4" class="nav-btn nav-page4">li>
ul>
nav>
div>
<script type="text/javascript" src="jquery.js">script>
<script type="text/javascript"> 'use strict';
$(document).ready(function () {
var $wrap = $(".wrapper"),
pages = $(".page").length,
scrolling = false,
currentPage = 1,
$navPanel = $(".nav-panel"),
$scrollBtn = $(".scroll-btn"),
$navBtn = $(".nav-btn");
/*****************************
***** NAVIGATE FUNCTIONS *****
*****************************/
function manageClasses() {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + currentPage);
$navBtn.removeClass("active");
$(".nav-btn.nav-page" + currentPage).addClass("active");
$navPanel.addClass("invisible");
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}
function navigateDown() {
if (currentPage < pages) {
currentPage++;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}
/*********************
***** MOUSEWHEEL *****
*********************/
$(document).on("mousewheel DOMMouseScroll", function (e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});
/**************************
***** RIGHT NAVIGATION ****
**************************/
/* NAV UP/DOWN BTN PAGE NAVIGATION */
$(document).on("click", ".scroll-btn", function () {
if ($(this).hasClass("up")) {
navigateUp();
} else {
navigateDown();
}
});
/* NAV CIRCLE DIRECT PAGE BTN */
$(document).on("click", ".nav-btn", function () {
if (!scrolling) {
var target = $(this).attr("data-target");
if (Modernizr.csstransforms) {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + target);
$navBtn.removeClass("active");
$(this).addClass("active");
$navPanel.addClass("invisible");
currentPage = target;
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
} else {
$wrap.animate({ "top": "-" + ((target - 1) * 100) + "%" }, 1000);
}
}
});
}); //@ sourceURL=pen.js
script>
body>
html>
分页2
代码过长 放链接 点击蓝字查看 密码为123