过骑默认背景

时间：2018-03-21 21:41:03

标签： twitter-bootstrap defaults

我被迫为这个项目使用bootstrap布局（univ。）。我似乎无法通过渐变来显示渐变。继续采用默认白色。

＆＃13;
＆＃13; 
/* fonts available in this website: "Black Ops One/Caveat Brush/Ceviche One/Cookie/Courgette/Homemade Apple/Kalam/Kaushan Script/Norican/Satisfy*/

/* Extra small devices (phones up to 480px) */

/* No media query since this is the default in Bootstrap */

@media only screen and (min-width: 320px) and (max-width: 575px) {
  .pageWrapper {
    background-color: blue;
    width: 100%;
    height: auto;
  }
}

@media only screen and (min-width: 576) and (max-width: 768xp) {}

@media only screen and (min-width: 768) and (max-width: 992px) {}

/* Adding above this line will effect all views */

/* Small devices (tablets, 768px and up) */

@media only screen and (min-width: 993) and (max-width: 1139px) {
  .pageWrapper {
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
    width: 100%;
    height: auto;
  }
  .col-xl-bg2 {
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
  }
  header {
    width: 100%;
    margin: auto;
    background-color: #ddd8af;
    display: inline-block;
  }
  .topHeadboxleft {
    float: left;
    width: 59%;
    text-align: center;
    margin-left: 1%;
  }
  .logoImage {
    float: left;
    display: inline-block;
    background-image: url("../images/logoBobs.jpg");
    background-repeat: no-repeat;
    width: 170px;
    height: 170px;
  }
  .businessBox {
    float: left;
  }
  .busName {
    float: left;
    margin-top: 20px;
    padding: 2px 2px 2px 2px;
  }
  #nameBox {
    float: left;
    font-family: "Great Vibes";
    font-size: 5em;
    font-weight: 800;
    color: #544e1f;
    text-shadow: -2px 0 #aa830b, 0 2px #aa830b, 2px 0 #aa830b, 0 -2px #aa830b;
  }
  #businessName {
    font-family: "Shrikhand", cursive;
    font-size: 3em;
    font-weight: 400;
    text-shadow: .5em;
    color: #aa830b;
    text-shadow: -2px 0 #544e1f, 0 2px #544e1f, 2px 0 #544e1f, 0 -2px #544e1f;
  }
  .topHeadboxright {
    width: 48%;
    height: auto;
    float: right;
    vertical-align: middle;
    margin-top: 1.5%;
  }
  .contactBox {
    width: 100%;
    height: auto;
    float: right;
    margin-right: 1%;
  }
  #contactDetail {
    font-family: "Indie Flower", cursive;
    font-size: 1.5em;
    text-align: right;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    padding: 5px 5px 5px 5px;
  }
  #contactPhone {
    font-family: "Anton", cursive;
    font-size: 4em;
    font-weight: 800;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    text-align: right;
    padding: 5px 5px 5px 5px;
  }
  #eName {
    font-family: "Indie Flower", cursive;
    font-size: 2em;
    font-weight: 800;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    padding: 5px 5px 5px 5px;
  }
  .subTitle {
    text-align: right;
  }
  a {
    color: #025900;
    text-decoration-line: none;
  }
  .container {
    width: 100%;
  }
  .col-xl-9 {
    padding-top: 25px;
  }
  .breadcrumb {
    padding: 2px 2px 2px 2px;
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
  }
  #breadcrumb {
    display: inline-block;
    background-image: inherit;
  }
  #navigation_links {
    padding-top: 5px;
    color: #b5a356;
  }
  #navigation_links>ul,
  li {
    list-style-type: none;
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    color: #b5a356;
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
  }
  li a {
    color: #e0d298;
    font-famiLy: 'Indie Flower', cursive;
    font-size: 1.5em;
    text-decoration-line: none;
  }
  .vertical-menu {
    width: 200px;
  }
  .upperMenuitem {
    padding: .3em .3em .3em .3em;
  }
  i,
  .imageIcon {
    margin-top: .3em;
    float: left;
    margin-right: .4em;
  }
  .vertical-menu a {
    display: block;
    background-color: #eee;
    color: black;
    text-decoration: none;
    float: left;
  }
  li .menuItem {
    margin-top: .3em;
  }
  .vertical-menu a:hover {
    background-color: #ccc;
  }
  .vertical-menu a.active {
    background-image: inherit;
    color: #b5a356;
    width: 200px;
    height: auto;
  }
  footer {
    text-align: center;
    padding: 5px 5px 5px 5px;
  }
  .footInfo {
    text-align: center;
    padding: 5px 5px 5px 5px;
  }
  /*.myBox{
        width: 1000px;
        height: 800px;
        /* the size doesn't really matter bootstrap img class="responsive" used */
  a:hover {
    text-decoration-line: none;
    text-decoration-color: #aa830b;
  }
}

/* @ extra Large displays (desktops, 1140px and up) */

@media only screen and (min-width: 1140px) {
  body {
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
    width: 100%;
    height: auto;
    margin: auto;
  }
  .col-xl {
    background-color: inherit;
    margin: auto;
  }
  header {
    width: 100%;
    margin: auto;
    display: inline-block;
  }
  .topHeadboxleft {
    float: left;
    width: 59%;
    text-align: center;
    margin-left: 1%;
  }
  .logoImage {
    float: left;
    display: inline-block;
    background-image: url("../images/logoBobs.jpg");
    background-repeat: no-repeat;
    width: 170px;
    height: 170px;
  }
  .businessBox {
    float: left;
  }
  .busName {
    float: left;
    margin-top: 1.5em;
  }
  #nameBox {
    float: left;
    font-family: "Great Vibes";
    font-size: 5em;
    font-weight: 800;
    color: #544e1f;
    text-shadow: -2px 0 #aa830b, 0 2px #aa830b, 2px 0 #aa830b, 0 -2px #aa830b;
  }
  #businessName {
    font-family: "Shrikhand", cursive;
    font-size: 3em;
    font-weight: 400;
    text-shadow: .5em;
    color: #aa830b;
    text-shadow: -2px 0 #544e1f, 0 2px #544e1f, 2px 0 #544e1f, 0 -2px #544e1f;
  }
  .topHeadboxright {
    width: 39%;
    height: auto;
    float: right;
    vertical-align: middle;
  }
  .contactBox {
    width: 100%;
    height: auto;
    float: right;
    margin-right: 1%;
  }
  #contactDetail {
    font-family: "Indie Flower", cursive;
    font-size: 1.5em;
    text-align: right;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    padding: 5px 5px 5px 5px;
  }
  #contactPhone {
    font-family: "Anton", cursive;
    font-size: 4em;
    font-weight: 800;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    text-align: right;
    padding: 5px 5px 5px 5px;
  }
  #eName {
    font-family: "Indie Flower", cursive;
    font-size: 2em;
    font-weight: 800;
    color: #025900;
    text-shadow: -1px 0 #aa830b, 0 1px #aa830b, 1px 0 #aa830b, 0 -1px #aa830b;
    padding: 5px 5px 5px 5px;
  }
  .subTitle {
    text-align: right;
  }
  a {
    color: #025900;
    text-decoration-line: none;
  }
  .container {
    width: 100%;
    margin-left: 0px;
  }
  .col-xl-bg1 {
    background-image: linear-gradient(to bottom, #419560, #357e48, #2a6730, #1d511a, #113c03);
    margin-left: 0px;
  }
  .breadcrumb {
    padding: 2px 2px 2px 2px;
  }
  #breadcrumb {
    display: inline-block;
    background: inherit;
  }
  #navigation_links {
    padding-top: 5px;
    color: #b5a356;
  }
  #navigation_links>ul,
  li {
    list-style-type: none;
    float: left;
    margin-right: 15px;
    color: #b5a356;
  }
  li a {
    color: #e0d298;
    font-famiLy: 'Indie Flower', cursive;
    font-size: 1.5em;
    text-decoration-line: none;
  }
  .vertical-menu {
    width: 100%;
  }
  .upperMenuitem {
    padding: .3em .3em .3em .3em;
  }
  i,
  .imageIcon {
    margin-top: .3em;
    float: left;
    margin-right: .4em;
  }
  .vertical-menu a {
    display: block;
    background-color: #eee;
    color: black;
    text-decoration: none;
    float: left;
  }
  li .menuItem {
    margin-top: .3em;
  }
  .vertical-menu a:hover {
    background-color: #ccc;
  }
  .vertical-menu a.active {
    background-image: inherit;
    color: #b5a356;
    width: 200px;
    height: auto;
  }
  imageBox {
    position: relative;
    float: right;
    width: 80%;
    height: auto;
  }
  footer {
    text-align: center;
    padding: 5px 5px 5px 5px;
  }
  .footInfo {
    text-align: center;
    padding: 5px 5px 5px 5px;
    color: #b5a356;
  }
  /*.myBox{
    width: 1000px;
    height: 800px;
    /* the size doesn't really matter bootstrap img class="responsive" used */
  a:hover {
    text-decoration-line: none;
    text-decoration-color: #aa830b;
  }
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="js/breadcrumbles.js"></script>
    <link rel="shortcut icon" href="">
    <link href="https://fonts.googleapis.com/css?family=Anton|Courgette|Great+Vibes|Indie+Flower|Shrikhand" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <!--[if IE]>
        <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="pageWrapper">
      <header>
        <div class="col-sm-bg2 col-md-bg2 col-lg-bg2 col-xl-bg2">
          <div class="logoImage"></div>
          <div class="col-xl-3">
            <div class="busName">
              <div id="nameBox">Bob Summers'</div>
              <div id="businessName">Lanndscaping Limited</div>
            </div>
          </div>
        </div>
        <div class="col-sm col-md col-lg col-xl">
          <div class="col-xl-3">
            <div id="contactDetail">5002 EverGreen Way, Pine City, ON T8N 9Z1</div>
            <div id="contactPhone">(899) 867-5309</div>
            <div id="eName">
              <a href="contactUs.html">
                <p class="subTitle">Send Us A Message / Get A Quote</p>
              </a>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <div class="col-sm col-md col-lg col-xl">
          <div class="breadcrumb">
            <div id="breadcrumb">
              <ul id="navigation_links">
                <li><a href="page1.html">Home</a></li>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
                <li><a href="page3.html">Page 3</a></li>
                <li><a href="page4.html">Page 4</a></li>
              </ul>
            </div>
          </div>
          <!--     </div> -->
          <div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <div class="vertical-menu">
              <ul class="topMenulevel">
                <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-home"></i><p class="menuItem">Home</p></a></li>
                <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-info-sign"></i><p class="menuItem">About Us</p></a></li>
                <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-edit"></i><p class="menuItem">OutDoor Design</p></a></li>
                <li class="upperMenuitem"><a href="#" class="active"><i class="glyphicon glyphicon-tint"></i><p class="menuItem">Water Flow</p></a></li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-exclamation-sign"></i>Insects and Pests</p>
                  </a>
                </li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-leaf"></i>Lawn Maintenance</p>
                  </a>
                </li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-tree-deciduous"></i>Spring and Fall</p>
                  </a>
                </li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-asterisk"></i>White Out</p>
                  </a>
                </li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-tree-conifer"></i>Products</p>
                  </a>
                </li>
                <li class="upperMenuitem">
                  <a href="#" class="active">
                    <p class="menuItem"><i class="glyphicon glyphicon-envelope"></i>Contact Us</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
            <!-- <div class="myBox">image replacement box -->
            <div class="imageBox">
              <img src="./images/boblandscaperv2.png" class="img-responsive" alt="Information Image">
            </div>
          </div>
          <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12bg1">
            <footer>
              <div class="candc">
                <p class="footInfo">&#x24B8; M2D2.io - Web Design House</p>
              </div>
            </footer>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您的媒体查询格式不正确。宽度值必须包含单位（在这种情况下为px）才能正常工作。更改以下

@media only screen and (min-width: 993) and (max-width: 1139px) {

到

@media only screen and (min-width: 993px) and (max-width: 1139px) {

您还必须更新其他一些内容并更正类似问题，包括错误使用max-width: 768xp的{​​{1}}。

相关问题
最新问题