fix：修复重定向页面错误，优化手机端样式
This commit is contained in:
xieyibo
parent
e39187bef2
commit
973a584610
10
MBTI.html
10
MBTI.html
@ -5,7 +5,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="A website for MBTI test">
|
<meta name="description" content="A website for MBTI test">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="keywords" content="MBTI, mbti">
|
<meta name="keywords" content="MBTI, mbti">
|
||||||
<title>测试中</title>
|
<title>测试中</title>
|
||||||
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
||||||
@ -18,8 +18,12 @@
|
|||||||
<script src="./static/js/MBTI.js"></script>
|
<script src="./static/js/MBTI.js"></script>
|
||||||
<script src="./static/js/printProjectInfo.js"></script>
|
<script src="./static/js/printProjectInfo.js"></script>
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.questionbox {
|
.questionbox {
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -28,7 +32,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-default navbar-fixed-top">
|
<div class="navbar navbar-default" style="margin-bottom: 10em;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<a href="./index.html" class="navbar-brand">MBTI</a>
|
<a href="./index.html" class="navbar-brand">MBTI</a>
|
||||||
|
|||||||
12
index.html
12
index.html
@ -5,7 +5,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="A website for MBTI test">
|
<meta name="description" content="A website for MBTI test">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="keywords" content="MBTI, mbti">
|
<meta name="keywords" content="MBTI, mbti">
|
||||||
<title>首页</title>
|
<title>首页</title>
|
||||||
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
<link rel="shortcut icon" href="./static/img/favicon.ico">
|
||||||
@ -20,6 +20,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div>
|
||||||
<div class="navbar navbar-default navbar-fixed-top">
|
<div class="navbar navbar-default navbar-fixed-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
@ -42,10 +43,11 @@
|
|||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<svg viewBox="0 0 1000 300">
|
<svg viewBox="0 0 1000 300" style="width: 100%;">
|
||||||
<symbol id="s-text">
|
<symbol id="s-text">
|
||||||
<text text-anchor="middle" x="50%" y="50%" dy=".2em">
|
<text text-anchor="middle" x="50%" y="60%" dy=".2em">
|
||||||
MBTI-TEST
|
MBTI-TEST
|
||||||
</text>
|
</text>
|
||||||
</symbol>
|
</symbol>
|
||||||
@ -56,7 +58,7 @@
|
|||||||
<use xlink:href="#s-text" class="text"></use>
|
<use xlink:href="#s-text" class="text"></use>
|
||||||
<use xlink:href="#s-text" class="text"></use>
|
<use xlink:href="#s-text" class="text"></use>
|
||||||
<clippath id="cp-text">
|
<clippath id="cp-text">
|
||||||
<text text-anchor="middle" x="50%" y="50%" dy=".2em" class="text--line">
|
<text text-anchor="middle" x="50%" y="60%" dy=".2em" class="text--line">
|
||||||
MBTI-TEST
|
MBTI-TEST
|
||||||
</text>
|
</text>
|
||||||
</clippath>
|
</clippath>
|
||||||
@ -73,6 +75,7 @@
|
|||||||
<use xlink:href="#s-text" class="text--transparent"></use>
|
<use xlink:href="#s-text" class="text--transparent"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="bs-docs-section">
|
<div class="bs-docs-section">
|
||||||
@ -91,6 +94,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="./MBTI.html" class="a-btn">
|
<a href="./MBTI.html" class="a-btn">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span>Start</span>
|
<span>Start</span>
|
||||||
|
|||||||
@ -3,7 +3,6 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="A website for MBTI test">
|
<meta name="description" content="A website for MBTI test">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="navbar-collapse collapse" id="navbar-main">
|
<div class="navbar-collapse collapse" id="navbar-main">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li>
|
<li>
|
||||||
<a href=".../personalities.html">十六种人格简介</a>
|
<a href="../personalities.html">十六种人格简介</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="navbar-collapse collapse" id="navbar-main">
|
<div class="navbar-collapse collapse" id="navbar-main">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li>
|
<li>
|
||||||
<a href=".../personalities.html">十六种人格简介</a>
|
<a href="../personalities.html">十六种人格简介</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="navbar-collapse collapse" id="navbar-main">
|
<div class="navbar-collapse collapse" id="navbar-main">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li>
|
<li>
|
||||||
<a href=".../personalities.html">十六种人格简介</a>
|
<a href="../personalities.html">十六种人格简介</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="navbar-collapse collapse" id="navbar-main">
|
<div class="navbar-collapse collapse" id="navbar-main">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li>
|
<li>
|
||||||
<a href=".../personalities.html">十六种人格简介</a>
|
<a href="../personalities.html">十六种人格简介</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,7 +32,7 @@
|
|||||||
<div class="navbar-collapse collapse" id="navbar-main">
|
<div class="navbar-collapse collapse" id="navbar-main">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li>
|
<li>
|
||||||
<a href=".../personalities.html">十六种人格简介</a>
|
<a href="../personalities.html">十六种人格简介</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,9 +4,11 @@ body {
|
|||||||
-moz-background-size: cover;
|
-moz-background-size: cover;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 90px;
|
margin-top: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flashes {
|
.flashes {
|
||||||
margin-top: 90px;
|
margin-top: 90px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -1,7 +1,14 @@
|
|||||||
html, body, .article, .header {
|
html,
|
||||||
|
body,
|
||||||
|
.article,
|
||||||
|
.header {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px
|
||||||
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -221,7 +228,9 @@ button.trigger span::before {
|
|||||||
|
|
||||||
/* Media Queries */
|
/* Media Queries */
|
||||||
@media screen and (max-width: 47em) {
|
@media screen and (max-width: 47em) {
|
||||||
.title, .content {
|
|
||||||
|
.title,
|
||||||
|
.content {
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -231,7 +240,8 @@ button.trigger span::before {
|
|||||||
padding: 0 2em 5em;
|
padding: 0 2em 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title, .content {
|
.title,
|
||||||
|
.content {
|
||||||
font-size: 50%;
|
font-size: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,15 @@
|
|||||||
/* test style */
|
/* test style */
|
||||||
|
@media screen and (max-width: 27em) {
|
||||||
|
p {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke-width: 6;
|
stroke-width: 6;
|
||||||
@ -111,13 +122,15 @@
|
|||||||
|
|
||||||
|
|
||||||
div.content {
|
div.content {
|
||||||
font: 800 10.5em/1 'Open Sans', Impact;
|
font: 800 14em/1 'Open Sans', Impact;
|
||||||
height: 240px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-top: 5%;
|
|
||||||
margin-bottom: 10%;
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
padding-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|||||||
@ -116,7 +116,6 @@ a{
|
|||||||
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
hidden:100vh;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@ -186,21 +185,53 @@ a{
|
|||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
|
|
||||||
.ot-letter-left span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
.ot-letter-left span {
|
||||||
.ot-letter-left span:after { color: #fff; }
|
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||||
.ot-letter-left:hover span:after { color: #e8e8e8; }
|
}
|
||||||
|
|
||||||
.ot-letter-right span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
.ot-letter-left span:after {
|
||||||
.ot-letter-right span:after { color: #fff; }
|
color: #fff;
|
||||||
.ot-letter-right:hover span:after { color: #e8e8e8; }
|
}
|
||||||
|
|
||||||
.ot-letter-top span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
.ot-letter-left:hover span:after {
|
||||||
.ot-letter-top span:after { color: #fff; }
|
color: #e8e8e8;
|
||||||
.ot-letter-top:hover span:after { color: #e8e8e8; }
|
}
|
||||||
|
|
||||||
.ot-letter-bottom span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
|
.ot-letter-right span {
|
||||||
.ot-letter-bottom span:after { color: #fff; }
|
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||||
.ot-letter-bottom:hover span:after { color: #e8e8e8; }
|
}
|
||||||
|
|
||||||
|
.ot-letter-right span:after {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-right:hover span:after {
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-top span {
|
||||||
|
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-top span:after {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-top:hover span:after {
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-bottom span {
|
||||||
|
text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-bottom span:after {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ot-letter-bottom:hover span:after {
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
.ot-letter-left span:before,
|
.ot-letter-left span:before,
|
||||||
.ot-letter-left span:after {
|
.ot-letter-left span:after {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user