我的社交网络，常见问题解答和购买地点的链接安排在页脚部分内，但它不能贴在我的页面底部，我觉得我的HTML结构很奇怪，任何人都可以帮我吗？谢谢我希望它是这样的，常见问题解答和购买地点在左下角，社交网络徽标在页面右下角，LOGO在4导航链接中间输出我想要
的
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
position: relative;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
position: relative;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
position: relative;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
position: absolute;
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
position: absolute;
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
position: relative;
float: left;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="HomeCSS.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" />
<script src="GTech.js"></script>
</head>
<div id="page">
<body>
<header>
<img class="logo" src="Images/17622275_1491915637509717_1227569229_o.png" width="250" height="250" />
<div class="mainnav">
<button style="height:20px;width:120px;margin-left:90px">Notice</button>
<button class="divider" style="height:20px;width:120px">Products</button>
<div class="dropdown">
<button id="svc" style="height:20px;width:120px">Services</button>
<div id="submenu">
<a href="#" style="font-family:'Bungee'">Help Center</a>
<hr />
<a href="#" style="font-family:'Bungee'">Service Center</a>
</div>
</div>
<button class="divider2" style="height:20px;width:120px">About Us</button>
</div>
</header>
<div id="cart" class="scart">
<span onclick="openNav()"><a href="#">Shopping Cart</a></span>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</body>
<footer>
<div class="btmcontainer">
<div class="faqwtb">
<span><a href="#">FAQ</a></span>
<span><a href="#">Where to Buy</a></span>
</div>
<div class="btmcol">
<ul class="social">
<li>
<a href="#"><img src="Images/footericon/facebook.png" /></a>
</li>
<li>
<a href="#"><img src="Images/footericon/twitter.png" /></a>
</li>
<li>
<a href="#"><img src="Images/footericon/google+.png" /></a>
</li>
<li>
<a href="#"><img src="Images/footericon/tumblr.png" /></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</html>将你的 CSS 更改为这个...
- 您在任何地方都使用了位置相对。删除它们。将页脚的位置放在正确的位置，然后定位页面组件。
检查我的小提琴：https://jsfiddle.net/mpriyam/s8xhr5wv/
CSS应该是...
body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
clear:both;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}