我浏览了您与此相关的主题,并尝试了您提出的解决方案,但没有一个对我有用。
我正在制作的此页面上的所有内容看起来都很棒,只有单词下方和上方的间距相距甚远。我尝试的任何方法似乎都不起作用。我就是想不通。
下面是它的完整 CSS 代码。我道歉,但我想彻底。也许一双新的眼睛会发现问题。
*我遇到问题的区域是#portcover
/* Body / Whole Document */
html, body{
margin:0px;
padding:0px;
width:960px;
height:auto;
min-height:100%;
background-color:#666666;
}
.greeting {
position:relative;
margin:50px 0px 0px 200px;
padding:50px 0px 0px 0px;
width:500px;
height:300px;
background-color:#A30000;
color:#FFF;
font-family:agency fb;
font-size:50px;
text-align:center;
border-radius:85px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#click {
position:absolute;
top:45px;
left:200px;
width:100px;
height:55px;
color:#FFF;
color:#FFF;
font-family:agency fb;
font-size:50px;
text-align:center;
}
#to {
position:absolute;
top:125px;
left:200px;
width:100px;
height:55px;
color:#FFF;
color:#FFF;
font-family:agency fb;
font-size:50px;
text-align:center;
}
#enter {
position:absolute;
top:225px;
left:200px;
width:100px;
height:55px;
color:#FFF;
color:#FFF;
font-family:agency fb;
font-size:50px;
text-align:center;
}
.container {
position:relative;
margin:0px auto;
width:864px;
height:auto;
background-color:transparent;
}
.clear {
position:relative;
clear:both;
width:960px;
height:0px;
}
noscript {
position:absolute;
padding:10px 0px;
top:50px;
left:130px;
width:60%;
height:175px;
background-color:#000;
text-align:center;
line-height:50px;
color:#FFF;
font-size:20px;
}
noscript a {
font-size:23px;
font-weight:bold;
}
/*=================== Banner =======================*/
.banner {
position:relative;
margin:50px 0px 0px 200px;
padding:0px;
width:690px;
height:150px;
font-family:agency fb;
}
#logo {
position:relative;
margin:0px;
padding:0px;
width:172.8px;
height:100%;
line-height:150px;
background-color:#D11717;
color:#FAFAFA;
font-weight:bold;
font-size:100px;
text-align:center;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#fullname {
position:absolute;
margin:-50px;
padding:0px;
top:100px;
left:55px;
width:600px;
height:50px;
line-height:50px;
background-color:#D11717;
color:#FAFAFA;
font-weight:normal;
font-size:40px;
text-align:center;
border-radius:20px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.topnav {
position:relative;
float:right;
margin:0px 0px 0px 0px;
padding:0px;
width:690.3px;
height:100%;
background-color:#transparent;
}
/*==================================== Portfolio =============================*/
#portfolio {
position:relative;
margin:-200px 0px 0px 175px;
padding:0px;
width:172.8px;
height:100%;
line-height:150px;
color:#FAFAFA;
font-weight:normal;
font-size:50px;
text-align:center;
background-color:#FFF;
display:block;
color:#000;
text-decoration:none;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#portfolio:hover {
background-color:#D11717;
color:white;
border-radius:20px 20px 0px 0px;
}
#portcover {
display:none;
position:relative;
margin:-50px 0px 0px 0px;
padding:0px;
width:525px;
height:300px;
background-color:#921010;
border-radius:0px 20px 20px 20px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#portdiv {
position:absolute;
margin:10px;
padding:0px;
width:515px;
height:290px;
background-color:#D11717;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
a:link, a:visited {
color:#FFF;
}
#portinfo {
position:relative;
margin:0px;
padding:0px;
width:40%;
height:auto;
font-family:verdana;
font-weight:normal;
color:white;
font-size:15px;
}
#portlinks {
position:relative;
float:right;
margin:-50px;
padding:-50px;
width:40%;
height:auto;
font-family:verdana;
font-weight:normal;
color:white;
font-size:15px;
outline:2px solid white;
}
#portdiv a {
position:relative;
margin:0px;
padding:0px 100px 0px 100px;
text-decoration:none;
width:20px;
height:50px;
border-radius:150px;
}
#portdiv a:hover {
background-color:#000;
font-size:25px;
}
/*==================================================================*/
#contact {
position:relative;
margin:-200px 0px 0px 349px;
padding:0px;
width:172.8px;
height:100%;
line-height:150px;
color:#FAFAFA;
font-weight:normal;
font-size:50px;
text-align:center;
background-color:#FFF;
display:block;
color:#000;
text-decoration:none;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#contact:hover {
background-color:#D11717;
color:white;
border-radius:20px 20px 0px 0px;
}
#concover {
display:none;
position:absolute;
margin:-50px 0px 0px 0px;
padding:0px;
top:150;
right:200;
width:525px;
height:300px;
background-color:#921010;
border-radius:20px 0px 20px 20px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
outline:2px solid yellow;
}
#condiv1 {
position:absolute;
margin:10px 5px 0px 0px;
padding:0px;
width:515px;
height:290px;
background-color:#D11717;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#condiv1a {
position:relative;
float:right;
margin:100px 0px 0px 0px;
padding:0px;
width:50%;
height:25%;
background-color:transparent;
font-family:verdana;
font-weight:normal;
color:white;
font-size:15px;
outline:2px solid white;
}
#condiv1b {
position:relative;
margin:0px;
padding:0px;
width:50%;
height:25%;
background-color:transparent;
font-family:verdana;
font-weight:normal;
color:white;
font-size:15px;
outline:2px solid white;
}
#about {
position:relative;
margin:-200px 0px 0px 523px;
padding:0px;
width:172.8px;
height:100%;
line-height:150px;
color:#FAFAFA;
font-weight:normal;
font-size:50px;
text-align:center;
background-color:#FFF;
display:block;
color:#000;
text-decoration:none;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#about:hover {
background-color:#D11717;
color:white;
border-radius:20px 20px 0px 0px;
}
#abcover {
display:none;
position:absolute;
margin:-50px 0px 0px 0px;
padding:0px;
top:200px;
right:0px;
width:525px;
height:300px;
background-color:#921010;
font-family:verdana;
font-weight:normal;
color:white;
font-size:15px;
border-radius:20px 0px 20px 20px;
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
#abdiv {
position:absolute;
margin:10px 10px 0px 0px;
padding:0px 0px 0px 20px;
width:495px;
height:290px;
background-color:#D11717;
text-align:left;
border-radius:20px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}