Fatal编程技术网
  • html/
  • Html 页脚是重叠的网站内容

Html 页脚是重叠的网站内容

html

Html 页脚是重叠的网站内容,html,footer,Html,Footer,我正在运行一个Drupal站点，当前的页脚有问题，我试图找出为什么它会不断地覆盖整个站点，我已经能够发现页脚的颜色是问题所在，我尝试过改变颜色，同样的问题也会发生。我试着在页脚前放一个div标记，在页脚前放一条水平线 下面我附上了代码页脚是一个响应网站，页脚的主要目的是让它能够在移动和桌面上运行，只是没有能够得到解决这最后一个问题。每个部分包含每个功能的标题，包括 第一部分是最顶部的样式表，其中包含表单的高度和宽度。页脚颜色标记为ct页脚。这仅包括每个部分的标记，如ct页脚背景或ct页脚pre

我正在运行一个Drupal站点，当前的页脚有问题，我试图找出为什么它会不断地覆盖整个站点，我已经能够发现页脚的颜色是问题所在，我尝试过改变颜色，同样的问题也会发生。我试着在页脚前放一个div标记，在页脚前放一条水平线

下面我附上了代码页脚是一个响应网站，页脚的主要目的是让它能够在移动和桌面上运行，只是没有能够得到解决这最后一个问题。每个部分包含每个功能的标题，包括 第一部分是最顶部的样式表，其中包含表单的高度和宽度。页脚颜色标记为ct页脚。这仅包括每个部分的标记，如ct页脚背景或ct页脚pre for forms和div

html，
身体，
img，
身材{
最大宽度：100%；
}
html，
身体{
溢出x：隐藏；
颜色：#000；
-ms溢出样式：滚动条；
-webkit字体平滑：抗锯齿；
}
A.
a:悬停，
答：焦点，
a:主动的{
文字装饰：无；
颜色：继承；
}
a{
-webkit过渡：全部.25秒易入易出；
过渡：所有.25秒轻松进出；
}
.ct-u-paddingTop10{
填充顶部：10px！重要；
}
.ct页脚{
背景色：#111；
填充顶部：70px；
边缘顶部：20px；
位置：相对位置；
}
.ct页脚预处理{
宽度：100%；
填充底部：55px；
边框底部：1px实心#555；
边框底部：1px实心rgba（255、255、255、0.1）；
}
.ct页脚预跨距{
字体系列：“开放式Sans压缩”，无衬线；
颜色：#ebebeb；
字体大小：30px；
}
.ct页脚前置表单组{
位置：相对位置；
保证金：0；
}
.ct页脚前置表单组：在，
.ct页脚前表单组：后{
内容：''；
显示：表格；
}
.ct页脚前表单组：后{
明确：两者皆有；
}
.ct页脚预表单组输入{
边框：1px实心#39a2bf；
背景色：#333；
颜色：#fff；
高度：50px；
填充：0 30px；
利润率：0.5px；
边界半径：0！重要；
}
.ct页脚前置表单组按钮{
高度：50px；
位置：相对位置；
宽度：80px；
填充：0
}
.ct页脚列表{
填充：50px0；
列表样式：无；
左侧填充：0；
显示：表格；
宽度：100%；
边框底部：1px实心#555；
边框底部：1px实心rgba（255、255、255、0.1）；
}
.ct页脚列表>li.ct页脚列表页眉{
字体系列：“开放式Sans压缩”，无衬线；
颜色：#3a98b2；
字体大小：30px；
}
.ct页脚列表>li ul{
列表样式：无；
左侧填充：0；
}
.ct页脚列表>li ul li a{
颜色：#fff；
}
.ct页脚列表>li ul li a:悬停，
.ct页脚立柱a:悬停{
文字装饰：下划线；
}
.ct页脚柱{
背景：#000；
填充：30px0；
}
.ct页脚柱。左内，
.ct页脚立柱。右内{
填充：20px0；
}
.ct页脚柱ul{
列表样式：无；
左侧填充：0；
利润率：0-20px；
}
.ct页脚后ul li{
显示：内联块；
利润率：0.20px；
}
.ct页脚帖子a{
颜色：#fff；
}
.ct页脚立柱p{
颜色：#fff；
}
.ct页脚元{
填充顶部：30px；
}
.ct页脚元.ct社交{
填充：20px0；
}
.ct footer meta.ct socials li{
填充：0 3px；
}
.ct页脚--带按钮{
填充顶部：150px；
}
地址{
颜色：#fff；
显示：内联块；
}
地址跨度{
字号：600；
}
致辞{
颜色：#fff；
}
地址a：悬停{
文字装饰：下划线；
}
.btn{
字体系列：“开放式Sans压缩”，无衬线；
边界半径：0；
边界：无；
文本转换：大写；
颜色：#111；
字号：26px；
填充：12px 30px；
}
.btn.btn-motive{
背景色：#00bff3；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
.btn.btn动机：悬停，
.btn.btn动机：悬停：活动{
背景色：#00bff3；
}
.btn.btn-violet{
颜色：#fff；
背景色：#4f4f99；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
.btn.btn紫色：悬停{
背景色：#376b；
}
.btn.btn紫色：悬停：活动{
背景色：#2f5b
}
.btn.btn-green{
颜色：#fff；
背景色：#43670f；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
.btn.btn绿色：悬停{
背景色：#36520c；
}
.btn.btn绿色：悬停：活动{
背景色：#314a0b；
}
.btn.btn-red{
颜色：#fff；
背景色：#da2229；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
.btn.btn红色：悬停{
背景色：#ae1b21；
}
.btn.btn红色：悬停：活动{
背景色：#9d181e
}
.btn.btn-white{
背景色：#fff；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
.btn.btn白色：悬停{
背景色：#d9d9d9；
}
.btn.btn白色：悬停：活动{
背景色：#c9c9c9
}
.btn.btn-large{
填充：20px 50px；
字体大小：30px；
空白：正常；
}
.ct中段{
背景附件：固定；
}
.ct-剖面图标题——类型1{
字体系列：“开放式Sans压缩”，无衬线；
颜色：#000；
字号：115px；
文本转换：大写；
}
.ct-section_头——2型小型{
字体系列：《风骚》，幻想；
字号：58px；
线高：.7；
显示：块；
字号：700；
位置：相对位置；
左-12px；
}
.ct-剖面图标题——类型2跨度{
字体系列：“Bebas Neue”；
字号：115px；
线高：.8；
}
.ct-剖面图标题——类型2 img{
显示：内联块；
浮动：左；
位置：相对位置；
顶部：15px；
右侧填充：3px；
}
.ct-剖面图标题——类型3{
文本对齐：居中；
}
.ct-section_头——类型3小{
字体系列：《风骚》，幻想；
字体大小：50px；
填充：15px0；
字号：700；
颜色：#fff；
背景图像：url（“/core/fileparse.php/16/urlt/。/images/ribbon.png”）；
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
显示：块
}
.ct-剖面图标题——类型3跨度{
字体系列：“Bebas Neue”；
字体大小：150px；
字体大小：400；
文本转换：上

<style type="text/css">html,
body,
img,
figure {
  max-width: 100%;
}
html,
body {
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
a {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.ct-u-paddingTop10 {
  padding-top: 10px !important;
}
.ct-footer {
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;
}
.ct-footer-pre {
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-pre span {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;
}
.ct-footer-pre .form-group {
  position: relative;
  margin: 0;
}
.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
  content: '';
  display: table;
}
.ct-footer-pre .form-group:after {
  clear: both;
}
.ct-footer-pre .form-group input {
  border: 1px solid #39a2bf;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;
}
.ct-footer-pre .form-group button {
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0
}
.ct-footer-list {
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-list > li .ct-footer-list-header {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #3a98b2;
  font-size: 30px;
}
.ct-footer-list > li ul {
  list-style: none;
  padding-left: 0;
}
.ct-footer-list > li ul li a {
  color: #fff;
}
.ct-footer-list > li ul li a:hover,
.ct-footer-post a:hover {
  text-decoration: underline;
}
.ct-footer-post {
  background: #000;
  padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
  padding: 20px 0;
}
.ct-footer-post ul {
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;
}
.ct-footer-post ul li {
  display: inline-block;
  margin: 0 20px;
}
.ct-footer-post a {
  color: #fff;
}
.ct-footer-post p {
  color: #fff;
}
.ct-footer-meta {
  padding-top: 30px;
}
.ct-footer-meta .ct-socials {
  padding: 20px 0;
}
.ct-footer-meta .ct-socials li {
  padding: 0 3px;
}
.ct-footer--with-button {
  padding-top: 150px;
}
address {
  color: #fff;
  display: inline-block;
}
address span {
  font-weight: 600;
}
address a {
  color: #fff;
}
address a:hover {
  text-decoration: underline;
}
.btn {
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;
}
.btn.btn-motive {
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
  background-color: #00bff3;
}
.btn.btn-violet {
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-violet:hover {
  background-color: #37376b;
}
.btn.btn-violet:hover:active {
  background-color: #2f2f5b
}
.btn.btn-green {
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-green:hover {
  background-color: #36520c;
}
.btn.btn-green:hover:active {
  background-color: #314a0b;
}
.btn.btn-red {
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-red:hover {
  background-color: #ae1b21;
}
.btn.btn-red:hover:active {
  background-color: #9d181e
}
.btn.btn-white {
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}
.btn.btn-white:hover {
  background-color: #d9d9d9;
}
.btn.btn-white:hover:active {
  background-color: #c9c9c9
}

.btn.btn-large {
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;
}
.ct-mediaSection {
  background-attachment: fixed;
}
.ct-section_header--type1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}
.ct-section_header--type2 small {
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;
}
.ct-section_header--type2 span {
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;
}
.ct-section_header--type2 img {
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;
}
.ct-section_header--type3 {
  text-align: center;
}
.ct-section_header--type3 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block
}
.ct-section_header--type3 span {
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85
}
.ct-section_header--type4 {
  text-align: center;
}
.ct-section_header--type4:before,
.ct-section_header--type4:after {
  content: '';
  display: table
}
.ct-section_header--type4:after {
  clear: both
}
.ct-section_header--type4 small {
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block
}
.ct-section_header--type4 span {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7
}
.ct-section_header + p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}
.ct-section_header--type4 + p {
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Media Queries */

@media (min-width:1200px) {
  .ct-footer-pre {
    display: table;
  }
  .ct-footer-pre > .inner {
    display: table-cell;
    vertical-align: middle;
  }
  .ct-footer-list > li {
    width: 20%;
    display: table-cell;
    vertical-align: top;
  }
  .ct-footer-list > li:last-child {
    width: 7%;
  }
}

@media (max-width:1199px) {
  .ct-footer-pre .form-group {
      padding-top: 15px
  }
}
@media (max-width: 1199px) {
  .ct-footer-list > li {
    display: inline-block;
    float: left;
  }
}
@media (min-width:992px) {
  .ct-footer-post .inner-left {
    float: left;
  }
  .ct-footer-post .inner-right {
    float: right;
  }
}
@media (max-width:991px) {
  .ct-footer-post {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ct-footer-list > li {
    width: 33.3333%;
  }
}
@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p + p {
    padding-left: 50px;
  }
}
@media (max-width:767px) {
  address {
    padding-top: 30px;
  }
}
@media (min-width: 480px) and (max-width:767px) {
  .ct-footer-list > li {
    width: 50%;
  }
}
@media (min-width:480px) {
  .ct-footer-pre .form-group button {
    top: -1px;
  }
  .ct-footer-pre .form-group input {
    width: 331px;
  }
}
@media (max-width:479px) {
  .ct-footer-pre .form-group input {
    float: left;
    width: 70%;
    margin: 0;
  }
  .ct-footer-pre .form-group button {
    float: left;
    width: 30%;
  }
  .ct-footer-list > li {
    width: 100%;
    text-align: center;
  }
  .ct-footer-list {
    padding: 20px 0;
  }
  .btn.btn-large {
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  }
  .ct-section_header--type1 {
    font-size: 60px;
    line-height: .8;
  }
  .ct-section_header + p {
    font-size: 22px;
  }
  .ct-section_header--type3 small {
    font-size: 25px;
  }
  .ct-section_header--type4 small {
      font-size: 40px;
  }
  .ct-section_header--type3 span {
    font-size: 90px;
  }
  .ct-section_header--type4 span {
      font-size: 80px;
  }
  .ct-section_header--type4 + p {
    font-size: 28px;
  }
}
</style>
<div class="container">&nbsp;</div>

<footer class="ct-footer">
<div class="container">
<form action="" enctype="multipart/form-data" method="post" name="contentForm">&nbsp;</form>

<ul class="ct-footer-list text-center-sm">
    <li>
    <h2 class="ct-footer-list-header">Contract Vechciles</h2>

    <ul>
        <li><a href="">Company</a></li>
        <li><a href="">Clients</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Careers</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Services</h2>

    <ul>
        <li><a href="">Design</a></li>
        <li><a href="">Marketing</a></li>
        <li><a href="">Sales</a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">Support</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">About us</h2>

    <ul>
        <li><a href="">Thought Leadership</a></li>
        <li><a href="">Webinars</a></li>
        <li><a href="">Events</a></li>
        <li><a href="">Sponsorships</a></li>
        <li><a href="">Advisors</a></li>
        <li><a href="">Training Program</a></li>
        <li><a href="">Activities &amp; Campaigns</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Resources&nbsp;</h2>

    <ul>
        <li><a href="">WebCorpCo Blog</a></li>
        <li><a href="">Hackathons</a></li>
        <li><a href="">Videos</a></li>
        <li><a href="">News Releases</a></li>
        <li><a href="">Newsletters</a>
        <ul>
            <li><a href="">FAQ</a></li>
            <li><a href="">Our Board</a></li>
            <li><a href="">Our Staff</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

<div class="ct-footer-meta text-center-sm">
<div class="row">
<div class="col-sm-6 col-md-2"><img alt="logo" src="https://www.solodev.com/assets/footer/logo.png" /></div>

<div class="col-sm-6 col-md-3">
<address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: <a href="tel:5555555555">(555) 555-8899</a></span></address>
</div>

<div class="col-sm-6 col-md-2 ct-u-paddingTop10">&nbsp;<a href="" target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</a></div>

<div class="col-sm-6 col-md-3">
<p><a href="" target="_blank"><img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png" /></a><a href="" target="_blank"><img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png" /></a><a href="" target="_blank"><img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png" /></a><a href="" target="_blank"><img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png" /></a><a href="" target="_blank"><img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png" /></a></p>
</div>
</div>
</div>
</div>

<div class="ct-footer-post">
<div class="container">
<div class="inner-left">
<ul>
    <li><a href="">FAQ</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact Us</a></li>
</ul>
</div>

<div class="inner-right">
<p>Copyright © 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>

<p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
</div>
</div>
</div>
</footer>