删除 HTML/CSS 中的页脚

Question

我有这个代码：

new WOW().init();

/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background-color: #000000 !important;
  background-size: cover;
  margin: 0;
  height: 100%;
  background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}

.overlayE {
  position: absolute;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.886);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass1 {
  padding: 80px 0px 50px 0px;
  position: relative;
  display: block;
}

.row {
  width: 980px;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.sectiontitle {
  background-position: center;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}

.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.fullWidth {
  width: 100%;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


/********************************/


/*  SECTION WORK EXPERIENCE
  ********************************/

#work-experience .sectiontitle .headerLine {
  width: 280px;
}

#work-experience .headerline {
  width: 280px;
}

.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

.cbp_tmtimeline li:last-child:before {
  content: initial;
}

.cbp_tmtimeline>li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
  display: block;
  text-align: right;
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
  font-size: 0.9em;
  color: #bdd0db;
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
  font-size: 2.9em;
  color: #3594cb;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
  color: #6cbfee;
}

.cbp_tmtimeline>li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
  background: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmlabel h3 {
  margin-top: 0px;
  color: white;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 {
  opacity: 0.7;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 600;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  text-align: left;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 i {
  margin-right: 5px;
  vertical-align: middle;
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(50, 68, 84, 1);
  border-width: 10px;
  top: 70px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmicon {
  width: 150px;
  height: 150px;
  top: 3%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #151515;
  background: #324454;
  border-radius: 50%;
  text-align: center;
  left: 8%;
  margin: 0 0 0 -25px;
}

.cbp_tmtimeline li {
  margin-bottom: 70px;
  position: relative;
}

.sectionClassProject {
  position: relative;
  display: block;
  /* background: #f7f7f7; */
  margin: 0 auto;
  padding: 80px 1.875em 3.125em;
}

.projectParagraph {
  font-size: 18px;
  margin: 0.5em 0 0;
  font-family: 'Source Sans Pro', serif;
}

.projectParagraphLink {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 50px !important;
  margin-bottom: 0px;
  text-align: right;
}

.projectParagraphLink a {
  color: white;
  text-decoration: underline;
}

.cbp_tmicon img {
  width: 100%;
}

.faPra {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  vertical-align: middle;
  color: white;
  line-height: 150px;
}

.label {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: #FFFFFF;
  display: inline;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 15px;
}

.date {
  color: #BFC3C7;
  display: block;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  right: 20px;
}

.date i {
  margin-right: 8px;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1024px) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline>li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline>li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel {
    margin: 30px 0 70px 0;
    padding: 50px 30px 30px 30px;
    font-weight: 400;
    font-size: 95%;
    float: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel:after {
    right: auto;
    border-right-color: transparent;
    border-bottom-color: rgb(50, 68, 84);
    top: -20px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: rgb(43, 58, 72);
    left: 65px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
    right: 65px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
    position: relative;
    float: left;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}

@media (max-width: 32em) {
  .cbp-ntaccordion {
    font-size: 70%;
  }
}

<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp;amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<div class="overlayE"></div>

<div id="workexperience">
  <div class="row ">
    <div class="sectiontitle">
      <h2>Work experience</h2>
      <span class="headerLine"></span>
    </div>
    <ul class="cbp_tmtimeline">
      <li>
        <div class="cbp_tmicon cbp_tmicon-phone">
          <i class="faPra fa-briefcase"></i>
        </div>
        <div class="cbp_tmlabel wow fadeInRight animated">
          <h3>Web developer</h3>
          <div class="date">
            <i class="fa fa-calendar"></i>April 2014 - Current
          </div>
          <h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
          <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
        </div>
      </li>
      <li>
        <div class="cbp_tmicon cbp_tmicon-screen">
          <i class="faPra fa-briefcase"></i>
        </div>
        <div class="cbp_tmlabel wow fadeInRight animated">
          <h3>Web designer</h3>
          <h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
          <div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
          <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
        </div>
      </li>
      <li>
        <div class="cbp_tmicon cbp_tmicon-mail">
          <i class="faPra fa-briefcase"></i>
        </div>
        <div class="cbp_tmlabel wow fadeInRight animated">
          <h3>Web designer</h3>
          <h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
          <div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
          <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

        </div>
      </li>
      <li>
        <div class="cbp_tmicon cbp_tmicon-phone">
          <i class="faPra fa-briefcase"></i>
        </div>
        <div class="cbp_tmlabel wow fadeInRight animated">
          <h3>Freelancer</h3>
          <div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
          <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
        </div>
      </li>
    </ul>
  </div>
</div>

如果您运行代码，并在新页面上打开它，页面末尾有不同的背景，我想删除它并将其与我的深色背景合并。如何将 dar 背景扩展到整页？我只想删除页面末尾附近的蓝色背景。

编辑：enter image description here

Answer 1

您可以将正文上的 overflow-y 设置为滚动并仍然使用固定背景

new WOW().init();

/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background-color: #000000 !important;
  background-size: cover;
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}

.overlayE {
  position: fixed;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.886);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass1 {
  padding: 80px 0px 50px 0px;
  position: relative;
  display: block;
}

.row {
  width: 980px;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.sectiontitle {
  background-position: center;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}

.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.fullWidth {
  width: 100%;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


/********************************/


/*  SECTION WORK EXPERIENCE
  ********************************/

#work-experience .sectiontitle .headerLine {
  width: 280px;
}

#work-experience .headerline {
  width: 280px;
}

.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

.cbp_tmtimeline li:last-child:before {
  content: initial;
}

.cbp_tmtimeline>li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
  display: block;
  text-align: right;
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
  font-size: 0.9em;
  color: #bdd0db;
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
  font-size: 2.9em;
  color: #3594cb;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
  color: #6cbfee;
}

.cbp_tmtimeline>li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
  background: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmlabel h3 {
  margin-top: 0px;
  color: white;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 {
  opacity: 0.7;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 600;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  text-align: left;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 i {
  margin-right: 5px;
  vertical-align: middle;
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(50, 68, 84, 1);
  border-width: 10px;
  top: 70px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmicon {
  width: 150px;
  height: 150px;
  top: 3%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #151515;
  background: #324454;
  border-radius: 50%;
  text-align: center;
  left: 8%;
  margin: 0 0 0 -25px;
}

.cbp_tmtimeline li {
  margin-bottom: 70px;
  position: relative;
}

.sectionClassProject {
  position: relative;
  display: block;
  /* background: #f7f7f7; */
  margin: 0 auto;
  padding: 80px 1.875em 3.125em;
}

.projectParagraph {
  font-size: 18px;
  margin: 0.5em 0 0;
  font-family: 'Source Sans Pro', serif;
}

.projectParagraphLink {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 50px !important;
  margin-bottom: 0px;
  text-align: right;
}

.projectParagraphLink a {
  color: white;
  text-decoration: underline;
}

.cbp_tmicon img {
  width: 100%;
}

.faPra {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  vertical-align: middle;
  color: white;
  line-height: 150px;
}

.label {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: #FFFFFF;
  display: inline;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 15px;
}

.date {
  color: #BFC3C7;
  display: block;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  right: 20px;
}

.date i {
  margin-right: 8px;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1024px) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline>li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline>li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel {
    margin: 30px 0 70px 0;
    padding: 50px 30px 30px 30px;
    font-weight: 400;
    font-size: 95%;
    float: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel:after {
    right: auto;
    border-right-color: transparent;
    border-bottom-color: rgb(50, 68, 84);
    top: -20px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: rgb(43, 58, 72);
    left: 65px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
    right: 65px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
    position: relative;
    float: left;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}

@media (max-width: 32em) {
  .cbp-ntaccordion {
    font-size: 70%;
  }
}

<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp;amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<body>
  <div class="overlayE"></div>
  <div id="workexperience">
    <div class="row ">
      <div class="sectiontitle">
        <h2>Work experience</h2>
        <span class="headerLine"></span>
      </div>
      <ul class="cbp_tmtimeline">
        <li>
          <div class="cbp_tmicon cbp_tmicon-phone">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web developer</h3>
            <div class="date">
              <i class="fa fa-calendar"></i>April 2014 - Current
            </div>
            <h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-screen">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
            <div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-mail">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
            <div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
              consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

删除 HTML/CSS 中的页脚

Removing footer in HTML/CSS

javascript

html

css

animation