0
我已經有一個主頁，頁腳的行爲很好，並且我將相同的css複製到我的聯繫頁面，現在頁腳掛在導航欄上方，我試過了在一天的好一段時間裏有很多事情，但對於我的生活來說，卻無法實現。 我不想被固定的頁腳，我已經嘗試過clear:both，以及許多其他的事情 我要尋找一個純粹的CSS解決我的問題：我的頁腳掛在頂部
@import url(http://fonts.googleapis.com/css?family=Special+Elite);
/*font-family: 'Special Elite', cursive;*/
@import url(http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic);
/*font-family: 'Marvel', sans-serif;*/
#container {
\t min-height:100%;
\t position:relative;
\t margin:0 auto -80px;
}
body {
\t height:100%;
}
#background {
\t background-image:url('css.jpg');
\t background-position:center fixed;
\t background-size:cover;
\t background-attachment:fixed;
}
.navbar {
\t position:fixed;
\t width:100%;
\t z-index:1;
\t margin-top:10px;
}
ul {
\t text-align:center;
\t background-color:#7A4909;
}
li {
\t list-style:none;
\t margin-right:1em;
\t font-family:'Special Elite', cursive;
\t font-size:35px;
\t padding:12px;
\t display:inline-block;
}
li a {
\t color:#D0903C;
\t background-color:#7A4909;
\t text-decoration:none;
\t display:inline-block;
}
.left a:hover {
\t color:#7A4909;
\t background-color:#D0903C;
\t -webkit-transform:rotate(-10deg) scale(1.2);
\t -moz-transform:rotate(-10deg) scale(1.2);
\t -o-transform:rotate(-10deg) scale(1.2);
\t text-transform:uppercase;
}
.right a:hover {
\t color:#7A4909;
\t background-color:#D0903C;
\t -webkit-transform:rotate(10deg) scale(1.2);
\t -moz-transform:rotate(10deg) scale(1.2);
\t -o-transform:rotate(10deg) scale(1.2);
\t text-transform:uppercase;
}
#parent {
\t position:relative;
}
#child {
\t position:absolute;
\t top:50%;
\t left:50%;
\t height:30%;
\t width:50%;
\t margin:15% 0 0 -25%;
}
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px 'Special Elite', cursive;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #E4E4E4;
margin: -10px -15px 30px -10px;;
color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 15px;
\t font-family:'Marvel', sans-serif;
}
.basic-grey label {
display: block;
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background: #7A4909;
border: none;
padding: 10px 25px 10px 25px;
color: #D0903C;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #9E3F3F;
cursor: pointer;
\t font-family:'Special Elite', cursive;
\t font-size:15px;
}
.basic-grey .button:hover {
background: #D0903C;
\t text-transform:uppercase;
\t color:#7A4909;
}
#footer {
\t height:80px;
\t width:100%;
\t background-color:#7A4909;
\t position:absolute;
}<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <title>Contact Me!</title>
\t \t <link media="screen" type="text/css" rel="stylesheet" href="contact.css"/>
\t </head>
\t <div id="container">
\t <body id="background">
\t \t <ul class="navbar">
\t \t \t <li class="left"><a href="home.html">Home</a></li>
\t \t \t <li class="right"><a href="contact.html">Contact Me</a></li>
\t \t \t <li class="left"><a href="blog.html">Blog</a></li>
\t \t \t <li class="right"><a href="funny.html">Funny</a></li>
\t \t </ul>
\t \t <div id="parent">
\t \t \t <div id="child">
\t \t \t <form action="mailto:[email protected]" method="post" class="basic-grey">
\t \t \t \t <h1>Contact Form
\t \t \t \t \t <span>Please fill out all fields.</span>
\t \t \t \t </h1>
\t \t \t \t <label>
\t \t \t \t \t <span>Your Name :</span>
\t \t \t \t \t <input id="name" type="text" name="name" placeholder="Your Full Name" />
\t \t \t \t </label>
\t \t \t \t <label>
\t \t \t \t \t <span>Your Email :</span>
\t \t \t \t \t <input id="email" type="email" name="email" placeholder="Valid Email Address" />
\t \t \t \t </label>
\t \t \t \t <label>
\t \t \t \t \t <span>Message :</span>
\t \t \t \t \t <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
\t \t \t \t </label>
\t \t \t \t <label>
\t \t \t \t \t <span>Subject :</span><select name="selection">
\t \t \t \t \t <option value="General Question">General Question</option>
\t \t \t \t \t <option value="About Me">About Me</option>
\t \t \t \t \t <option value="Request">Request</option>
\t \t \t \t \t </select>
\t \t \t \t </label>
\t \t \t \t <label>
\t \t \t \t \t <span> </span>
\t \t \t \t \t <input type="button" class="button" value="Send" />
\t \t \t \t </label>
\t \t \t </form>
\t \t \t </div>
\t \t \t </div>
\t \t <div id="footer"></div> <!--end footer div-->
\t </body>
\t </div> <!--end container div-->
</html>
我試過了，並且它不工作要麼... – Esther 2014-11-06 13:04:27
你能設置一個上的jsfiddle然後jsfiddle.net請。然後我可以看看它並玩它 – 2014-11-06 13:05:28
在這裏：http://jsfiddle.net/q1h7bra3/ – Esther 2014-11-07 07:10:25