我正在构建一个纯粹出于html5和css的投资组合网站,而且我坚持将页脚粘贴在页面底部。
以下是代码:
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contact | sadman s.</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>sadman s.</h1>
</header>
<!--NAVIGATION BAR-->
<nav>
<ul>
<li><a href="/code/index.html">h o m e</a></li>
<li><a href="/code/blog.html">b l o g</a></li>
<li><a href="/code/portfolio.html">p o r t f o l i o</a></li>
<li><a href="/code/about.html">a b o u t</a></li>
<li><a href="/code/contact.html">c o n t a c t</a></li>
</ul>
</nav>
<!--NAVIGATION BAR ENDS-->
<!--BODY STARTS HERE-->
<body>
<form>
<label>Name</label>
<input name="name" placeholder="Name">
<label>Email</label>
<input name="email" type="email" placeholder="Email">
<label>Message</label>
<textarea name="message" placeholder="Your message"></textarea>
<input id="submit" name="submit" type="submit" value="SEND">
</form>
</body>
<!--BODY ENDS HERE-->
<!--FOOTER STARTS HERE-->
<footer>
<div id="footer_line"></div>
<!--FOOTER LINKS BAR-->
<nav>
<ul>
<li><a href="https://twitter.com/sadmanshawmik" target="blank"><span id="footer_bar">t w i t t e r</span></a></li>
<li><a href="http://instagram.com/shawmikiki" target="blank"><span id="footer_bar">i n s t a g r a m</span></a></li>
<li><a href="http://github.com/" target="blank"><span id="footer_bar">g i t h u b</span></a></li>
</ul>
</nav>
<!--FOOTER BAR ENDS-->
<p>copyright © 2014 - <span id="footer_link"><a href="/code/index.html">sadman.de</a></span>. all rights reserved.</p>
</footer>
</html>
stylesheet.css中
* {
margin: 0;
padding: 0;
font-family: Droid Serif;
}
body {
font-family: Droid Serif;
}
header {
font-family: Droid Serif;
font-weight: lighter;
font-size: 1.8em;
text-align: center;
text-transform: uppercase;
margin-top: 25px;
}
/*NAVIGATION BAR*/
nav {
position: relative;
list-style: none;
margin: 25px 0 40px 0;
padding: auto;
text-align: center;
font-family: Droid Serif;
text-transform: uppercase;
}
nav > ul > li {
display: inline;
}
nav > ul > li > a {
display: inline-block;
padding: 0 32px 0 32px;
color: #000;
text-decoration: none;
}
a:hover {
color: #00d8a3;
text-decoration: none;
transition: color 0.5s ease;
}
a:active {
color: #00d8a3 !important;
text-decoration: none;
}
/*BODY*/
h2 {
font-weight: 100;
text-align: center;
font-family: Droid Serif;
}
table {
border: 2px;
margin: -10px auto 15px auto;
}
td {
padding: 20px;
}
table tr td img {
-webkit-font-smoothing: antialiased;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
table tr td img:hover {
opacity: 0.7;
}
/*FOOTER*/
footer {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 15px;
width: 100%;
clear: both;
}
#footer_line {
width: 90%;
border: 1px solid #696969;
margin: auto;
}
p {
margin-top: 0px;
text-align: center;
font-size: 0.6em;
}
#footer_bar {
text-transform: lowercase;
}
#footer_link {
color: #00d8a3;
text-decoration: none;
}
#footer_link:hover {
color: #000000;
text-decoration: none;
}
/*CONTACT FORM*/
label {
display: none;
margin-top: 20px;
letter-spacing: 2px;
}
form {
width: 437px;
margin: 0 auto;
}
#form-div {
background-color: e1e1e1;
padding: 35px 35px 50px 35px;
width: 450px;
float: left;
position: absolute;
margin-top: 20px;
margin-left: -260px;
}
input, textarea {
width: 400px;
height: 27px;
background-color: #ffffff;
border: 1px solid #efefef;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #696969;
}
textarea {
height: 100px;
}
input:focus, textarea:focus {
border: 3px solid #00d8a3;
}
#submit {
border-radius: 5px;
background-color: #00d8a3;
width: 400px;
height: 50px;
margin: 0 auto 56px auto;
font-size: 1.5em;
font-weight: bold;
}
这是我主页的图片,我希望页脚位于主页的联系页面底部。 http://puu.sh/bzOUo/e1f2479945.jpg
以下是联系页面中显示的内容:http://puu.sh/bzOWZ/ef02a73399.png
此外,如果有人可以帮助我调整&#34;发送&#34;联系页面中的按钮与其余的输入框一起,非常好。
答案 0 :(得分:1)
答案 1 :(得分:0)
footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
}
footer * {
display:inline;
}