问题出现在登录部分，表格单元格太近，我无法添加单元格间距或边距，等等没有用......请帮帮我... 如果我不使用重置CSS，它会给出一个很小的空间。但这还不够。
/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
form {
display: inline-block;
}
body, html {
background-color: #0099FF;
height: 100%;
}
body {
overflow: hidden;
}
#nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
height: auto;
color: #FFFFFF;
background-color: rgba(0,0,0,0.7);
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
}
#nav ul {
float: right;
}
#nav li {
display: inline-block;
line-height: 5em;
width: auto;
padding: 0 1em;
font-size: 1em;
}
.menu:hover {
background-color: rgba(0,0,0,1);
}
a {
color: inherit;
text-decoration: none;
}
.container {
height: 100%;
left: 0;
right: 0;
}
.container-title {
background-color: rgba(0,0,0,0.7);
position: absolute;
margin-top: 10%;
left: 50%;
height: auto;
width: auto;
text-align: center;
transform: translate(-50%, 0);
padding: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.title-img {
display: inline-block;
height: 3em;
}
.title-name {
display: inline-block;
font-size: 3em;
font-family: Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1)
}
.sub-container {
width: 100%;
height: 50%;
background-color: rgba(0,0,0,0.7);
position: relative;
top: 50%;
color: rgba(255,255,255,1);
font-size: 1em;
overflow: hidden;
}
.sub-container-nav {
position: absolute;
left: 0;
right: 0;
height: auto;
color: rgba(255,255,255,1);
background-color: rgba(0,0,0,0.7);
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
}
.sub-container-nav li {
display: inline-block;
width: auto;
padding: 0 1em;
font-size: 1em;
cursor: pointer;
}
.sub-container-nav li:hover {
background-color: rgba(0,0,0,0.7);
}
#main {
background: url(../images/background/Lamborghini-Veneno-Roadster.jpg) center no-repeat;
background-size: cover;
}
#advanced_search {
background: url(../images/background/Bugatti-Veyron-Luxury-Car-Wallpaper.jpg) center no-repeat;
background-size: cover;
}
#explore {
background: url(../images/background/Lykan-Hypersport-becar.net_.jpg) center no-repeat;
background-size: cover;
}
#forum {
background: url(../images/background/Koenigsegg%20One1.jpg) center no-repeat;
background-size: cover;
}
#report_a_bug {
background: url(../images/background/Ferrari%20La%20Ferrari.jpg) center no-repeat;
background-size: cover;
}
#feedback {
background: url(../images/background/hennessey_venom_gt_2013.jpg) center no-repeat;
background-size: cover;
}
#login_signup {
background: url(../images/background/McLaren%20P1.jpg) center no-repeat;
background-size: cover;
}
.searchbox {
outline: none;
border: 1px solid rgba(255,255,255,0.5);
background: transparent;
font-family: Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
padding: 0.2em 0.5em;
}
.searchbox:focus {
border: 1px solid rgba(0,102,255,0.7);
}
.btn {
outline: none;
border: 0;
background-color: rgba(0,102,255,1);
font-family: Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
padding: 0.2em 0.5em;
cursor: pointer;
}
.box {
height: 100%;
width: 100%;
padding: 1em;
}
#featured_link, #filter_link, #manual_link, #login_link {
color: rgba(0,102,255,0.7);
}
.login_box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.7);
font-family: Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
padding: 0.2em 0.5em;
}
.login_box tr{
margin:1em;
}
.textbox {
outline: none;
border: 1px solid rgba(255,255,255,0.5);
background: transparent;
font-family: Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
padding: 0.2em 0.5em;
}
.textbox:focus {
border: 1px solid rgba(0,102,255,0.7);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<?php
$loginsuccess=1;
$reportsuccess=0;
$feedbacksuccess=0;
?>
<!DOCTYPE html>
<html>
<head>
<title>CARZPEDIA</title>
<link rel="icon" href="images/favicon/favicon.png"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="nav"> <a href="#main">
<div style="height:4em; width:auto; display:inline-block; padding:0.5em"><img src="images/logo/logo.png" style="height:inherit"/></div>
</a>
<ul>
<a href="#advanced_search">
<li class="menu">ADVANCED SEARCH </li>
</a> <a href="#explore">
<li class="menu">EXPLORE </li>
</a> <a href="#forum">
<li class="menu">FORUM </li>
</a> <a href="#report_a_bug">
<li class="menu">REPORT A BUG </li>
</a> <a href="#feedback">
<li class="menu">FEEDBACK </li>
</a> <a href="#login_signup">
<li class="menu">LOGIN/SIGNUP </li>
</a>
<form method="get" action="index.php">
<li style="padding-right:0">
<input class="searchbox" type="search" name="search" placeholder="Search here..."/>
</li>
<li style="padding-left:0">
<input class="btn" type="submit" name="searchbtn" value="GO"/>
</li>
</form>
</ul>
</div>
<div id="main" class="container">
<div class="container-title"> <img class="title-img" src="images/title/welcome.png"/>
<div class="title-name">WELCOME</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<ul>
<li id="featured_link">FEATURED</li>
<li id="news_link">NEWS</li>
</ul>
</div>
<div class="box" id="featured">:( No featured content</div>
<div class="box" id="news">:( News Unavailable</div>
</div>
</div>
</div>
<div id="advanced_search" class="container">
<div class="container-title"> <img class="title-img" src="images/title/advanced_search.png"/>
<div class="title-name">ADVANCED SEARCH</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<ul>
<li id="filter_link">FILTER</li>
<li id="sort_link">SORT</li>
</ul>
</div>
<div class="box" id="filter"></div>
<div class="box" id="sort"></div>
</div>
</div>
<div id="explore" class="container">
<div class="container-title"> <img class="title-img" src="images/title/explore.png"/>
<div class="title-name">EXPLORE</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<ul>
<li id="manual_link">MANUAL</li>
<li id="auto_link">AUTO</li>
</ul>
</div>
<div class="box" id="manual"></div>
<div class="box" id="auto"></div>
</div>
</div>
<div id="forum" class="container">
<div class="container-title"> <img class="title-img" src="images/title/forum.png"/>
<div class="title-name">FORUM</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<?php
if($loginsuccess==1)//reverse the value when page is complete
{
echo"<span style='padding-left:1em'>Please <a href='#login_signup' style='color:rgb(0,102,255)'>LOGIN</a> to continue</span>";
}
else if($loginsuccess==0)
{
echo"<span style='padding-left:1em'>Please accept the Terms and Conditions to continue</span>";
}
?>
</div>
<div class="box" id="shield"></div>
<div class="box" id="tnc"></div>
</div>
</div>
<div id="report_a_bug" class="container">
<div class="container-title"> <img class="title-img" src="images/title/report_a_bug.png"/>
<div class="title-name">REPORT A BUG</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<?php
if($reportsuccess==0)
{
echo"<span style='padding-left:1em'>Please provide details of the bug</span>";
}
else if($reportsuccess==1)
{
echo"<span style='padding-left:1em'>Thank you for reporting</span>";
}
?>
</div>
<div class="box" id="report"></div>
</div>
</div>
<div id="feedback" class="container">
<div class="container-title"> <img class="title-img" src="images/title/feedback.png"/>
<div class="title-name">FEEDBACK</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<?php
if($feedbacksuccess==0)
{
echo"<span style='padding-left:1em'>Feel free to give your opinions, ideas , suggestions cause we are happy to implement it :)</span>";
}
else if($feedbacksuccess==1)
{
echo"<span style='padding-left:1em'>Thank you for your valuable feedback. Your feedback is important to us</span>";
}
?>
</div>
<div class="box" id="feedbackbox"></div>
</div>
</div>
<div id="login_signup" class="container">
<div class="container-title"> <img class="title-img" src="images/title/login_signup.png"/>
<div class="title-name">LOGIN/REGISTER</div>
</div>
<div class="sub-container">
<div class="sub-container-nav">
<ul>
<li id="login_link">LOGIN</li>
<li id="register_link">REGISTER</li>
</ul>
</div>
<div class="box" id="login">
<div class="login_box">
<form method="post" action="index.php">
<table>
<tr>
<td>USERNAME:</td>
<td><input class="textbox" type="text" name="username"/></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input class="textbox" type="password" name="password"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input class="btn" type="submit" name="login_button" value="LOGIN"/></td>
</tr>
</table>
</form>
</div>
</div>
<div class="box" id="register"></div>
</div>
</div>
<script>
//scroll effect script
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
//sub container nav link color change function
$(document).ready(function(e) {
$('#featured_link').click(function() {
$('#featured_link').css('color','rgba(0,102,255,0.7)');
$('#news_link').css('color','rgba(255,255,255,0.5)');
});
$('#news_link').click(function() {
$('#featured_link').css('color','rgba(255,255,255,0.5)');
$('#news_link').css('color','rgba(0,102,255,0.7)');
});
$('#filter_link').click(function() {
$('#filter_link').css('color','rgba(0,102,255,0.7)');
$('#sort_link').css('color','rgba(255,255,255,0.5)');
});
$('#sort_link').click(function() {
$('#filter_link').css('color','rgba(255,255,255,0.5)');
$('#sort_link').css('color','rgba(0,102,255,0.7)');
});
$('#manual_link').click(function() {
$('#manual_link').css('color','rgba(0,102,255,0.7)');
$('#auto_link').css('color','rgba(255,255,255,0.5)');
});
$('#auto_link').click(function() {
$('#manual_link').css('color','rgba(255,255,255,0.5)');
$('#auto_link').css('color','rgba(0,102,255,0.7)');
});
$('#login_link').click(function() {
$('#login_link').css('color','rgba(0,102,255,0.7)');
$('#register_link').css('color','rgba(255,255,255,0.5)');
});
$('#register_link').click(function() {
$('#login_link').css('color','rgba(255,255,255,0.5)');
$('#register_link').css('color','rgba(0,102,255,0.7)');
});
});
//sub container nav link click function
$(document).ready(function(e) {
$('#featured_link').click(function() {
$('#featured').css('display','block');
$('#news').css('display','none');
});
$('#news_link').click(function() {
$('#featured').css('display','none');
$('#news').css('display','block');
});
$('#filter_link').click(function() {
$('#filter').css('display','block');
$('#sort').css('display','none');
});
$('#sort_link').click(function() {
$('#filter').css('display','none');
$('#sort').css('display','block');
});
$('#manual_link').click(function() {
$('#manual').css('display','block');
$('#auto').css('display','none');
});
$('#auto_link').click(function() {
$('#manual').css('display','none');
$('#auto').css('display','block');
});
$('#login_link').click(function() {
$('#login').css('display','block');
$('#register').css('display','none');
});
$('#register_link').click(function() {
$('#login').css('display','none');
$('#register').css('display','block');
});
});
</script>
</body>
</html>
答案 0 :(得分：3)