尝试了所有操作，但仍然不知道为什么会这样。我将部分代码放入JSFiddle中，并且已经可见，但仅在Google Chrome中可见。无法解释的差距是项目之间的/关于我的部分的更多信息。并且间隙也随屏幕分辨率的变化而变化。有任何想法吗？ 这是示例代码的链接： http://jsfiddle.net/janvzku2/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet">
<meta name="description" content="web">
<link rel="shortcut icon" type="image/png" href="img">
<title>web</title>
<link rel="stylesheet" type="text/css" href="style.css?v=0.003">
</head>
<body>
<div class="content">
<div class="content__name">
<h1 class="content__initials"><a href="/">website.</a></h1>
<h2 class="content__full-name">Website</h2>
</div>
<div class="content__container">
<div class="about box" id="about">
<div class="about__content-background"></div>
<div name="about" class="about__content box__content">
<div class="box__heading-container">
<p class="about__heading box__heading">About Me</p>
<p class="box__btn-close">X</p>
</div>
<div class="about__info box__info">
<div class="about__cube1 cubes">
<span class="box__first-word">Who</span> am I, lorem
</div>
<div class="about__cube2 cubes">
<p>
lorem
</p>
</div>
<div class="about__cube3 cubes">
lorem
</div>
</div>
</div>
</div>
<div class="skills box" id="skills">
<div name="skills" class="skills__content box__content">
<div class="box__heading-container">
<p class="skills__heading box__heading">Skill Set</p>
<p class="box__btn-close">X</p>
</div>
<div class="skills__info box__info">
<div class="skills__cube1 cubes"><span class="box__first-word">What</span> i was able to learn to this point</div>
<div class="skills__info-cube-container">
<div class="skills__cube2 cubes" id="skills__ul-cube">
<ul class="skills__list">
<li class="skills__list-entry"><span class="skills__span">HTML</span> -.</li>
<li class="skills__list-entry"><span class="skills__span">CSS</span> -</li>
<li class="skills__list-entry"><span class="skills__span">SASS, Bootstrap, Materialize</span> - </li>
<li class="skills__list-entry"><span class="skills__span">JavaScript</span> - </li>
<li class="skills__list-entry"><span class="skills__span">jQuery</span> </li>
<li class="skills__list-entry"><span class="skills__span">React</span> - in progress...</li>
<li class="skills__list-entry"><span class="skills__span">PHP</span> - </li>
<li class="skills__list-entry"><span class="skills__span">PhotoShop</span> - </li>
<li class="skills__list-entry"><span class="skills__span">Webpack</span> .</li>
<li class="skills__list-entry"><span class="skills__span">Tools
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="projects box" id="projects">
<div class="projects__content-background"></div>
<div name="projects" class="projects__content box__content">
<div class="box__heading-container">
<p class="projects__heading box__heading">Projects</p>
<p class="box__btn-close">X</p>
</div>
<div class="projects__info box__info">
<div class="projects__cube1 cubes">
<p>
Section
</p>
</div>
<div class="projects__md-container">
<div class="projects__cube2 cubes">
<h2 class="projects__section-heading">Websites</h2>
<p class="projects__section-info">Here you will find my website projects.</p>
<a href="websites.html"><span>Go</span> to website projects</a>
</div>
<div class="projects__cube3 cubes">
<h2 class="projects__section-heading">Applications</h2>
<p class="projects__section-info">Here </p>
<a href="applications.html"><span>Go</span> to application projects</a>
</div>
<div class="projects__cube4 cubes">
<h2 class="projects__section-heading">Coding Playground</h2>
<p class="projects__section-info">This section .</p>
<a href="playground.html"><span>Go</span> to projects</a>
</div>
</div>
</div>
</div>
</div>
<div class="before box" id="before">
<div name="before" class="before__content box__content">
<div class="box__heading-container">
<p class="before__heading box__heading">Before IT</p>
<p class="box__btn-close">X</p>
</div>
<div class="before__info box__info">
<div class="before__cube1 cubes">
<p>lorem</p>
</div>
<div class="before__cube2 cubes">
<p>Here You can download my <span class="box__first-word">CV</span> with all the records about my work and education</p>
</div>
<div class="before__cube3 cubes">
<a href="downloads/CV.pdf" target="_blank">
<i class="fa fa-download"></i>
</a>
</div>
</div>
</div>
</div>
<div class="more box" id="more">
<div class="more__content-background"></div>
<div name="more" class="more__content box__content">
<div class="box__heading-container">
<p class="more__heading box__heading">More About Me</p>
<p class="box__btn-close">X</p>
</div>
<div class="more__info box__info">
<div class="more__cube1 cubes">
<p>lorem</p>
</div>
<div class="more__cube2 cubes">
<p>lorem.</p>
</div>
</div>
</div>
</div>
<div class="contacts box" id="contacts">
<div name="contacts" class="contacts__content box__content">
<div class="box__heading-container">
<p class="contacts__heading box__heading">Contacts</p>
<p class="box__btn-close">X</p>
</div>
<div class="contacts__info box__info">
<div class="contacts__cube1 cubes">
<div class="contacts__details-entry">
<i class="fa fa-phone contacts__icon"></i>
<a class="mobile-phone" href="tel:+123">+123</a>
<p class="contacts__entry-note">*lorem</p>
</div>
<div class="contacts__details-entry">
<i class="fa fa-envelope contacts__icon"></i>
<a class="email" href="mailto:123@123.com">123@123.com</a>
<p class="contacts__entry-note">*feel free to send me an email 24/7</p>
</div>
</div>
<div class="contacts__cube2 cubes">
<div class="contacts__details-entry">
<i class="fa fa-home contacts__icon"></i>
<a class="address" href="lorem" target="_blank">lorem</a>S
<p class="contacts__entry-note">*visit this place it is beautiful</p>
</div>
</div>
<div class="contacts__cube3 cubes">
<div class="contacts__details-entry">
<i class="fa fa-skype contacts__icon"></i>
<a class="skype-name" href="skype:lorem">lorem</a>
<p class="contacts__entry-note">*skype interviews can be arranged</p>
</div>
<div class="contacts__details-entry">
<i class="fa fa-facebook-square contacts__icon"></i>
<a href="lorem" target="_blank">View my Facebook acc</a>
<p class="contacts__entry-note">*get to know me more through my facebook page</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
font-size: 62.5%;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
background-color: grey;
}
.content {
padding: 2rem 8rem;
width: 100%;
min-height: 68rem;
height: 100vh;
background-image: url('../img/main_background3.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.content__name {
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 1rem 0;
}
.content__initials {
font-size: 4rem;
color: black;
border-left: 1px solid green;
z-index: 100;
}
.content__initials a {
color: inherit;
text-decoration: none;
}
.content__full-name {
font-size: 1.8rem;
color: black;
border-top: 1px solid green;
border-right: 1px solid green;
padding-right: .3rem;
z-index: 100;
}
.content__container {
margin: 0;
max-width: 136rem;
height: 80%;
display: flex;
flex-wrap: wrap;
position: relative;
}
.content__container::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-style: solid;
border-width: 5px;
border-image-slice: 1;
border-image-width: 0px 0px 3px 3px;
border-image-outset: 0px 0px 3px 3px;
border-image-repeat: repeat;
border-image-source: linear-gradient(to top, green 30%, black 60%);
bottom: -2rem;
left: -2rem;
z-index: 0;
}
.box {
opacity: 1;
transition: opacity .7s;
color: red;
min-height: 8rem;
}
.box__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 1;
overflow: hidden;
}
.box__heading-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.box__heading {
font-size: 4rem;
position: relative;
padding: 1rem;
border-left: 1px solid green;
transition: .5s;
}
.box__heading:hover {
cursor: pointer;
color: white;
border-left: 1px solid transparent;
}
.box__heading:hover:after {
transform: translateX(1rem);
color: blue;
text-shadow: -7px 0px 1px green;
}
.box__heading:after {
content: '\027e9';
font-size: 3rem;
position: absolute;
padding: 1rem;
bottom: 0;
transition: .5s;
}
.box__btn-close {
font-size: 4rem;
padding: .6rem;
opacity: 0;
transition: .5s;
cursor: pointer;
position: relative;
text-shadow: 5px 0px 2px orange;
}
.box__btn-close:hover {
color: blue;
text-shadow: -5px 0px 2px green;
}
.box__info {
font-size: 1.6rem;
height: 100%;
line-height: 2rem;
display: none;
line-height: 2rem;
position: relative;
}
.box__first-word {
color: green;
font-size: 2.4rem;
}
.about{
flex: 1 1 60%;
position: relative;}
.about__content{
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, transparent);
display: flex;
}
.about__content-background{
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(to right, red, orange);;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.about__cube1{
background-color: orange;
width: 20rem;
position: absolute;
top: 2rem;
left: 1rem;
padding: 1rem 3rem 1rem 1rem;
}
.about__cube2{
background-color: orange;
width: 50rem;
overflow-y: auto;
position: absolute;
top: 6rem;
left: 19rem;
padding: 1rem;
}
.about__cube3{
background-color: orange;
width: 38rem;
position: absolute;
bottom: 3rem;
right: 0rem;
padding: 1rem;
}
.skills{
flex: 1 1 40%;
position: relative;}
.skills__content{
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-image: linear-gradient(to right, black, transparent);
}
.skills__cube1{
width: 14rem;
background-color: orange;
padding: 1rem;
position: absolute;
left: 2rem;
top: .5rem;
}
.skills__info-cube-container{
width: 44rem;
height: 34rem;
position: absolute;
top: 8rem;
left: 8rem;
display: flex;
}
.skills__list{
list-style: none;
}
.skills__list > li:not(:nth-child(1)) {
margin-top: 1rem;
}
.skills__cube2{
background-color: orange;
padding: 1rem;
height: 100%;
width: 100%;
overflow-y: auto;
position: relative;
}
.skills__span{
border-left: 1px solid green;
padding-left: .4rem;
}
.skills__scrollbar{
width: 1%;
height: 100%;
border: 1px solid var(--color-secondary-light);}
.skills__scrollbar--inside{
width: 100%;
background-color: green;
}
/* PROJECTS_________ */
/* PROJECTS_________ */
/* PROJECTS_________ */
/* PROJECTS_________ */
.projects{
flex: 1 1 70%;
position: relative;
z-index: 4;
}
.projects__content{
padding: 1rem;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, transparent);
}
.projects__content-background{
width: 100%;
height: 100%;
position: absolute;
background-image: url('../img/projects_background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.projects__md-container{
position: absolute;
top: 13rem;
left: 6rem;
width: 80rem;
display: flex;
overflow-y: auto;
}
.projects__cube1{
background-color: orange;
width: 40rem;
position: absolute;
top: 1rem;
left: 22rem;
transform: translateX(-50%);
padding: 1rem;
}
.projects__cube2{
background-color: red;
padding: 1rem;
flex: 1 0 0;
align-self: flex-start;
}
.projects__cube3{
background-color: red;
margin: 0 1rem;
padding: 1rem;
flex: 1 0 0;
align-self: flex-start;
}
.projects__cube4{
background-color: red;
padding: 1rem;
flex: 1 0 0;
align-self: flex-start;
}
.projects__section-heading{
margin-bottom: .5rem;
border-left: 1px solid green;
padding-left: .5rem;
}
.projects a {
color: inherit;
text-decoration: none;
position: relative;
backface-visibility: hidden;
}
.projects a:after{
content: '\027e9';
padding: 0 .5rem;
position: absolute;
transition: .5s;
}
.projects a:hover:after{
transform: translateX(1rem);
color: blue;
text-shadow: -7px 0px 1px green;
}
.projects a:hover span{
color: blue;
}
span{
color: green;
transition: .5s;
}
.before{
flex: 1 1 30%;
position: relative;}
.before__content{
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-image: linear-gradient(to right, var(--color-secondary), transparent);
}
.before__cube1{
background-color: orange;
width: 20rem;
position: absolute;
top: 2rem;
left: 1rem;
padding: 1rem;
}
.before__cube2{
background-color: red;
width: 40rem;
position: absolute;
top: 12rem;
left: 20rem;
padding: 1rem;
}
.before__cube3{
background-color: orange;
width: 10rem;
height: 10rem;
position: absolute;
top: 16rem;
left: 42rem;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}
.before i{
font-size: 4rem;
color: var(--color-primary);
transition: .5s;}
.before i:hover{
color: blue;
transform: translateY(-2px);
box-shadow: 0px 2px 0px green;
}
.before i:active{
color: green;
transform: translateY(0);
box-shadow: 0px 0px 0px green;
}
.more{
flex: 1 1 50%;
position: relative; }
.more__content{
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background-image: linear-gradient(to right, black, transparent);
@media only screen and (max-width: 320px){
overflow-y: auto;
}
}
.more__content-background{
width: 100%;
height: 100%;
position: absolute;
background-image: url('../img/more_background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.more__cube1{
background-color: red;
width: 40rem;
position: absolute;
top: 2rem;
left: 1rem;
padding: 1rem;
}
.more__cube2{
background-color: orange;
width: 30rem;
position: absolute;
top: 20rem;
left: 26rem;
padding: 1rem;
}
.contacts{
flex: 1 1 50%;
position: relative;}
.contacts__content{
padding: 1rem;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, var(--color-secondary), transparent);
}
.contacts__details-entry{
flex: 0 0 100%;
font-size: 1.6rem;
display: flex;
flex-wrap: wrap;
margin: .6rem;
margin: 0;
}
.contacts i{
margin-right: 1rem;
font-size: 2rem;
color: green;
transition: .5s;
}
.contacts__entry-note{
color: var(--color-4);
}
.contacts a{
text-decoration: none;
color: var(--color-4-light);
position: relative;
margin-right: 4rem;
backface-visibility: hidden;
transition: .5s;}
.contacts a:hover{
color: blue;
}
.contacts:hover:after{
transform: translateX(1rem);
color: blue;
text-shadow: -7px 0px 1px green;
}
.contacts:after{
content: '\027e9';
padding: 0 .5rem;
position: absolute;
transition: .5s;
}
.contacts__cube1{
background-color: orange;
width: 40rem;
position: absolute;
top: 3rem;
left: 1rem;
padding: .5rem;
}
.contacts__cube2{
background-color: red;
width: 30rem;
position: absolute;
top: 14rem;
left: 26rem;
padding: .5rem;
}
.contacts__cube3{
background-color: orange;
width: 30rem;
position: absolute;
top: 4rem;
right: 1rem;
padding: .5rem;
}