有人可以告诉我为什么我底部的段落文字没有在我的div中显示我的所有文字。如果我需要发送截图，请告诉我。
/ * Main * /
.main {
position: relative;
margin: 0;
overflow-x:hidden;
}
.main.fullscreen {
height: 100%;
}
.main.style1 {
text-align: center;
padding: 3em 0 3em 0;
}
.main.style1 h2 {
font-size: 4.25em;
line-height: 1em;
letter-spacing: -4px;
}
.main.style1:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style1 .content {
opacity: 1.0;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.main.style1.inactive {
}
.main.style1.inactive .content {
opacity: 0;
}
.main.style2 {
padding: 3em 0 3em 0;
overflow: hidden;
}
.main.style2 .content {
position: relative;
width: 35%;
display: inline-block;
vertical-align: middle;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
visibility: visible;
}
.main.style2.left {
}
.main.style2.left:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.left .content {
left: 0;
}
.main.style2.right {
}
.main.style2.right:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.main.style2.right .content {
left: 65%;
}
.main.style2.inactive {
}
.main.style2.inactive .content {
}
.main.style2.inactive.left .content {
left: -35%;
}
.main.style2.inactive.right .content {
left: 100%;
}
.main.style3 {
text-align: center;
padding: 6em 0 6em 0;
}
.main.style3 .content {
}
.main.style3 .content > header {
margin-bottom: 2em;
}
.main.style3.primary {
background: #fff;
}
.main.style3.secondary {
background: #f5f6f7;
}
/* Dark */
.dark {
color: #fff;
}
.dark a {
color: #fff;
}
.dark .button.style2 {
border-color: inherit;
background-color: rgba(64,64,64,0.05);
}
.dark .button.style2:hover {
background-color: rgba(255,255,255,0.1);
}
.dark .button.style2.down {
background-image: url('images/dark-arrow.svg');
}
/*********************************************************************************/
/* Spinner */
/*********************************************************************************/
@-moz-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
@-webkit-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
@-o-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
@-ms-keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
@keyframes spinner-rotate { 0% { -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg); -ms-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } }
/*********************************************************************************/
/* Loader */
/*********************************************************************************/
@-moz-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
@-ms-keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes spinner-show { 0% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
@-webkit-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
@-o-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
@-ms-keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
@keyframes spinner-hide { 0% { color: #ececec; z-index: 100001; -moz-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 99% { color: #ececec; z-index: 100001; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } 100% { color: #ececec; z-index: -1; -moz-transform: scale(0.5) rotate(360deg); -webkit-transform: scale(0.5) rotate(360deg); -o-transform: scale(0.5) rotate(360deg); -ms-transform: scale(0.5) rotate(360deg); transform: scale(0.5) rotate(360deg); } }
@-moz-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
@-webkit-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
@-o-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
@-ms-keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
@keyframes overlay-hide { 0% { opacity: 1; z-index: 100000; } 15% { opacity: 1; z-index: 100000; } 99% { opacity: 0; z-index: 100000; } 100% { opacity: 0; z-index: -1; } }
body {
text-decoration: none;
}
body:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
body:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
color: #ececec;
content: '\f1ce';
cursor: default;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 50%;
width: 2em;
z-index: -1;
}
body:after {
-moz-animation: overlay-hide 1.5s ease-in forwards !important;
-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
-o-animation: overlay-hide 1.5s ease-in forwards !important;
-ms-animation: overlay-hide 1.5s ease-in forwards !important;
animation: overlay-hide 1.5s ease-in forwards !important;
background: #ffffff;
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
body.is-loading:before {
-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-o-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
z-index: 100001;
}
body.is-loading:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
opacity: 1;
z-index: 100000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
body:before {
line-height: 2.025em;
}
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.icon {
text-decoration: none;
}
.icon:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.25em;
text-decoration: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.icon > .label {
display: none;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
background: #fff;
background: rgba(255,255,255,0.95);
height: 3em;
line-height: 3em;
box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
}
body {
padding-top: 3em;
}
#logo {
position: absolute;
left: 1em;
top: 0;
height: 3em;
line-height: 3em;
letter-spacing: -1px;
}
#logo a {
font-size: 1.25em;
}
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
/*********************************************************************************/
/* Intro */
/*********************************************************************************/
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
}
/*********************************************************************************/
/* One */
/*********************************************************************************/
#one {
background: url('images/overlay.png'), url('../images/one.jpg');
background-size: 256px 256px, cover;
overflow:auto
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Two */
/*********************************************************************************/
#two {
background: url('images/overlay.png'), url('../images/two.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Three */
/*********************************************************************************/
#three {
background: url('images/overlay.png'), url('../images/three.jpg');
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, center center;
}
/*********************************************************************************/
/* Four */
/*********************************************************************************/
#four {
background: url('images/overlay.png'), url('../images/.jpg');
background-size: 256px 256px, cover;
background-attachment: scroll
background-position: top left, center center;
}
/*********************************************************************************/
/* Contact */
/*********************************************************************************/
#contact {
padding-bottom: 0;
overflow: hidden;
}
#contact .box {
position: relative;
bottom: 0;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#contact.inactive {
}
#contact.inactive .box {
bottom: -30em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer {
position: relative;
height: 5em;
line-height: 5em;
margin: 0;
background: #39454b;
color: #999;
color: rgba(185,186,187,0.5);
overflow: hidden;
}
#footer a {
color: #999;
color: rgba(185,186,187,0.5);
}
#footer a:hover {
color: #bbb;
color: rgba(185,186,187,1.0);
}
#footer .actions {
position: absolute;
left: 1em;
top: 0.25em;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .actions li {
font-size: 1.25em;
margin: 0;
}
#footer .actions li a {
padding: 0.5em;
}
#footer .menu {
position: absolute;
right: 2em;
top: 0;
height: 5em;
line-height: 5em;
margin: 0;
}
#footer .menu li {
font-size: 0.9em;
}
<!DOCTYPE HTML>
<html>
<head>
<title>IJDKY</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-normal.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<header id="header">
<!-- Logo -->
<h1 id="logo">IJDKY</h1>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content container 75%">
<header>
<h2>Jasmine's Blog</h2>
</header>
<p>Welcome to <strong>My Blog</strong>. To continue click on the arrow and <strong>ENJOY!</strong></p>
<footer>
<a href="#one" class="button style2 down">Next</a>
</footer>
</div>
</section>
<!-- One -->
<section id="one" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>One</h2>
</header>
*<p>
Over four years ago....
<br>
I met the love of my life unknowingly to me. The night was crazy me and two of my best girlfriends had gone out to our favorite hometown spot, I just getting over a major breakup needed to get out and I might of had a couple of shots so my mouth was alittle liberal with the things that came out of my mouth.
</p>
<p>
My girlfriend and cousin Courtney was the one who noticed this gentleman across the room staring at me ever so thirsty like(insider), after about an hour of playing peekaboo with my eyes he mustard up the courage to come over and I expecting something superficial and arrogant this handsome man says to me HELLO my name is Quan and I think you are the most beautiful woman I have ever seen. I was taken back and a little tipsy so what came out of my mouth was a lot arrogant and straight forward I replied what do u have to offer me? He with no hesitation said if u give me a chance to take you out I will show u can I have ur number? I said sure but if u can't call me by Wednesday don't bother wasting your time he said of course.
</p>
<p>
He is going to say I told u so when he gets to this part I knew he wasn't going to call because I gave him the wrong number little did I know this was only the beginning of our story!!! The moral of this story in life you never know who you will encounter and what that person will be in your life sometimes you have to just JUMP and take a chance.
<br>
<strong style="right:inherit">Signed,
-Not Yet Jasmine Lynch</strong>
</p>*
</div>
<a href="#two" class="button style2 down anchored">Next</a>
</section>
</body>
</html>
答案 0 :(得分：0)
你有css问题例如.dark {color：#fff;}将文本设置为白色，因为背景也是白色而不显示
尝试将.dark {color：#fff;}改为.dark {color：#ccc;}你会看到差异 为所有css选择器执行此操作