Html 为什么我的页脚在导航栏上而不在底部？
我的页脚定位有问题。我的页脚是 放置在页面顶部的导航栏上。而是 页脚应分配在网页底部的权利。这个 我尝试的更改正在删除不允许使用的position属性 绝对，并尝试将页脚放置在body标记之外，但是 没有成功 我在这方面哪里出了问题Html 为什么我的页脚在导航栏上而不在底部？,html,css,footer,Html,Css,Footer,我的页脚定位有问题。我的页脚是 放置在页面顶部的导航栏上。而是 页脚应分配在网页底部的权利。这个 我尝试的更改正在删除不允许使用的position属性 绝对，并尝试将页脚放置在body标记之外，但是 没有成功 我在这方面哪里出了问题 身体{ /*字体：15px/1.5 Arial，Helvetica，无衬线*/ 字体系列：“开放式Sans”，无衬线； 填充：0； 左边距：0px； 右边距：0px； 宽度：100%； 边际上限：0px； 边缘底部：0px； 背景：线性梯度（90度，#D3 0%，
身体{
/*字体：15px/1.5 Arial，Helvetica，无衬线*/
字体系列：“开放式Sans”，无衬线；
填充：0；
左边距：0px；
右边距：0px；
宽度：100%；
边际上限：0px；
边缘底部：0px；
背景：线性梯度（90度，#D3 0%，rgb（255255）10%，rgb（255255）90%，#D3 100%）；
}
.类名{
职位：相对
}
* {
}
/*全球的*/
.集装箱{
宽度：1400px；
保证金：自动；
溢出：隐藏；
}
a{
文字装饰：无；
}
/*字体*/
@字体{
字体系列：粗体字体；
src:url（font/theboldfont.ttf）
}
保险商实验室{
位置：绝对位置；
顶部：0px；
右：16px；
}
/*标题*/
标题{
背景：#19252A；
颜色：#ffffff；
垫面：5px；
最小高度：70px；
}
标题a{
颜色：#ffffff；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
字体大小：11px；
字体大小：粗体；
填充：0px；
}
头李{
/*浮动：左*/
显示：内联；
填充：0 5px 0 5px；
}
.标志{
左侧填充：75px；
垫底：1px；
垫顶：2件；
}
导航{
宽度：100%；
显示：内联块；
}
标题导航{
浮动：对；
边缘顶部：10px；
}
标题。高亮显示，标题。当前a{
颜色：#e8491d；
字体大小：粗体；
}
标题a：悬停{
颜色：#中交；
字体大小：粗体；
}
/*了解更多信息部分*/
.了解更多{
背景：#fff；
身高：100%；
宽度：100%；
顶部：20px；
}
.了解更多信息{
边框底部：30px；
垫底：0px；
}
.了解更多信息p{
文本对齐：居中；
字体大小：粗体；
填充：30px 125px 20px 125px；
边框底部：0px；
边框顶部：0px；
边缘底部：0px；
边际上限：0px；
}
.学习{
显示：内联块；
宽度：175px；
边距：5px；/*按钮之间的间距*/
背景：深粉色；/*背景色*/
颜色：白色；/*文本颜色*/
字体大小：1.1米；
字体大小：粗体；
文字装饰：无；
边界半径：50px；/*圆角*/
填充：0px；/*文本周围的空格*/
垫底：10px；
填充顶部：10px；
边界：0px；
字体系列：粗体字体；
}
.加入{
显示：内联块；
宽度：175px；
边距：5px；/*按钮之间的间距*/
背景：深粉色；/*背景色*/
颜色：白色；/*文本颜色*/
字体大小：1.1米；
字体大小：粗体；
文字装饰：无；
边界半径：50px；/*圆角*/
填充：0px；/*文本周围的空格*/
垫底：10px；
填充顶部：10px；
边界：0px；
字体系列：粗体字体；
}
分区网格项目1{
宽度：150px；
}
分区网格-容器1{
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
/*给我们找地图*/
.给我们找地图{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
身高：100%；
}
.找到我们，.地图，.艺术品{
弹性基准：100%；
边缘底部：0px；
}
@媒体屏幕和屏幕（最小宽度：800px）{
.找到我们{
弹性：3；
背景色：#fff；
}
.img{
高度：250px；
}
.地图{
弹性：5；
}
.文章{
弹性：6；
}
.第条img{
背景重复：无重复；
宽度：100%；
高度：250px；
}
.map img{
背景重复：无重复；
宽度：100%；
高度：250px；
}
/*图片/信息框*/
.pm信箱{
显示器：flex；
高度：150像素；
边框底部：15px实心#fff；
}
.图片{
弹性：2；
背景：#19252A；
}
.留言{
弹性：8；
背景：#19252A；
右侧填充：70px；
保证金：无；
填充顶部：25px；
}
.信息p{
字体系列：“Roboto”，无衬线；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：80px；
背景：白色；
保证金：0；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边框：5px纯黑；
}
/*页脚*/
*{
字体系列：“开放式Sans”，无衬线；
}
我{
字体系列：真棒！重要；
左侧填充：15px；
}
i、 fa.fa-facebook{
字体系列：真棒！重要；
左侧填充：20px；
}
页脚{
背景：#19252A；
位置：固定；
底部：0；
宽度：100%；
高度：100px；
}
.footer容器{
宽度：1000px；
保证金：0；
溢出：隐藏；
}
.footer容器p{
位置：绝对位置；
顶部：35px；
浮动：左；
颜色：#fff；
字体大小：10px；
}
.footer容器{
高度：100px；
左边距：10px；
}
.页脚容器ul{
显示器：flex；
浮动：对；
}
.footer容器ul li{
列表样式：无；
}
.footer容器ul li a{
宽度：60px；
高度：60px；
背景：#fff；
文本对齐：居中；
线高：60px；
字体大小：35px；
利润率：0.10px；
显示：块；
边界半径：50%；
位置：相对位置；
溢出：隐藏；
边框：3px实心#fff；
z指数：1；
}
.footer容器ul li a.fa{
位置：相对位置；
颜色：#262626；
过渡：.5s；
z指数：3；
}
.footer容器ul li a:hover.fa{
颜色：#fff；
变换：旋转（360度）；
}
.footer容器ul li a:之前{
内容：''；
位置：绝对位置；
最高：100%；
左：0；
宽度：100%；
身高：100%；
背景：#f00；
过渡：.5s；
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body {
/* font: 15px/1.5 Arial, Helvetica, sans-serif; */
font-family: 'Open Sans', sans-serif;
padding:0;
margin-left: 0px;
margin-right: 0px;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
background: linear-gradient(90deg, #D3D3D3 0%, rgb(255,255,255) 10%, rgb(255,255,255) 90%, #D3D3D3 100%);
}
.CLASSNAME {
position:relative
}
* {
}
/*Global*/
.container{
width:1400px;
margin:auto;
overflow:hidden;
}
a{
text-decoration: none;
}
/*Font*/
@font-face {
font-family: theboldfont;
src: url(font/theboldfont.ttf)
}
ul {
position: absolute;
top: 0px;
right: 16px;
}
/*Header*/
header{
background: #19252A;
color: #ffffff;
padding-top: 5px;
min-height: 70px;
}
header a{
color: #ffffff;
text-align: center;
text-decoration:none;
text-transform: uppercase;
font-size:11px;
font-weight: bold;
padding: 0px;
}
header li{
/*float:left;*/
display:inline;
padding: 0 5px 0 5px;
}
.logo{
padding-left: 75px;
padding-bottom: 1px;
padding-top: 2px;
}
nav{
width: 100%;
display: inline-block;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight, header .current a{
color:#e8491d;
font-weight:bold;
}
header a:hover{
color:#cccccc;
font-weight:bold;
}
/*Learn more section*/
.learn-more{
background: #fff;
height: 100%;
width: 100%;
top: 20px;
}
.learn-more-message{
border-bottom: 30px;
padding-bottom: 0px;
}
.learn-more-message p {
text-align: center;
font-weight: bold;
padding: 30px 125px 20px 125px;
border-bottom: 0px;
border-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.learn {
display: inline-block;
width: 175px;
margin: 5px; /* space between buttons */
background: deeppink; /* background color */
color: white; /* text color */
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
border-radius: 50px; /* rounded corners */
padding: 0px; /* space around text */
padding-bottom: 10px;
padding-top: 10px;
border: 0px;
font-family: theboldfont;
}
.join{
display: inline-block;
width: 175px;
margin: 5px; /* space between buttons */
background: deeppink; /* background color */
color: white; /* text color */
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
border-radius: 50px; /* rounded corners */
padding: 0px; /* space around text */
padding-bottom: 10px;
padding-top: 10px;
border: 0px;
font-family: theboldfont;
}
div .grid-item1{
width: 150px;
}
div .grid-container1{
justify-content: center;
align-items: center;
text-align: center;
}
/*Find Us Map*/
.find-us-map {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
}
.find-us, .map, .artcle {
flex-basis: 100%;
margin-bottom: 0px;
}
@media screen and (min-width: 800px) {
.find-us {
flex: 3;
background-color: #fff;
}
.img {
height: 250px;
}
.map {
flex: 5;
}
.article {
flex: 6;
}
.article img{
background-repeat: no-repeat;
width: 100%;
height: 250px;
}
.map img{
background-repeat: no-repeat;
width: 100%;
height: 250px;
}
/*Picture/Message Box*/
.pm-box {
display: flex;
height: 150px;
border-bottom: 15px solid #fff;
}
.picture {
flex: 2;
background: #19252A;
}
.message {
flex: 8;
background: #19252A;
padding-right: 70px;
margin: none;
padding-top: 25px;
}
.message p {
font-family: 'Roboto', sans-serif;
}
.circle {
width: 100px;
height: 100px;
border-radius:80px;
background: white;
margin: 0;
position:relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid black;
}
/*Footer*/
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 15px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 20px;
}
footer {
background: #19252A;
position:fixed;
bottom:0;
width:100%;
height:100px;
}
.footer-container{
width:1000px;
margin:0;
overflow:hidden;
}
.footer-container p{
position: absolute;
top: 35px;
float: left;
color: #fff;
font-size: 10px;
}
.footer-container{
height:100px;
margin-left: 10px;
}
.footer-container ul{
display: flex;
float: right;
}
.footer-container ul li{
list-style: none;
}
.footer-container ul li a {
width: 60px;
height: 60px;
background: #fff;
text-align: centre;
line-height: 60px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
.footer-container ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
.footer-container ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
.footer-container ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.footer-container ul li a:hover:before {
top: 0;
}
.footer-container ul li:nth-child(1) a:before{
background: #3b5999;
}
.footer-container ul li:nth-child(2) a:before{
background: #55acee;
}
.footer-container ul li:nth-child(3) a:before{
background: #cd201f;
}
.footer-container ul li:nth-child(4) a:before{
background: #e4405f;
}
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" conftent="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Nature Tours | Home</title>
<!--Ion Icons-->
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aldrich&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Our own stylesheet-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script type="text/javascript" src="scripts.js"></script>
<header>
<div class="container">
<div class="CLASSNAME">
<div>
<a href="index.html">
<img class="logo" src="img/stars-logo.png" alt="" />
</a>
<nav>
<ul>
<li><a href="">About Us</a></li>
<li><a href="workshops.html">Workshops</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="learn-more-message">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
</p>
<div class="grid-container1">
<a class="learn"
title="Relevant Title"
href="#">Learn More</a>
<a class="join"
title="Relevant Title"
href="join-our-school.html">Join Our School</a>
</div>
</div>
</div>
<!-- <section class="Learn-more-buttons">
</section> -->
<div class="container">
<div class="pm-box">
<div class="picture">
<div class="circle">
</div>
</div>
<div class="message">
<p style="color: #ffffff">
"Sed tristique augue tellus. Vestibulum sagittis vestibulum nibh, at rutrum nisi faucibus eu. Mauris eget nisl eleifend, dignissim ante vel, convallis eros. Phasellus urna eros, facilisis et faucibus sit amet, bibendum quis diam. Curabitur ornare ultricies pulvinar."<br />
<br />
-Napet, COMOGET Seque.
</p>
</div>
</div>
</div>
<div class="container">
<div class="footer-container">
<p>
######################################
</p>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<script>type = "text/javascript" src="scripts.js</script>
</body>
</html>
ul {
position: relative;
top: 0px;
right: 16px;
}