Question

我不是计算机程序员，但我被分配了设计网页的任务。这就是我所拥有的：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>

    <!-- Bootstrap -->
     <link href="file:///Users/Theresa/Desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">

     <!---Custom -->
     <link href="file://localhost/Users/Theresa/Desktop/1page/custom.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
     shastic
  </div>
</nav>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Shastic</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Text</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Text</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="container" style="background: #f1f1f1;;">
  <div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;">
<h1 style="  font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1>
 <h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2>

<p style="font-size: 12px;
  -webkit-font-smoothing: antialiased;">
Jump to same section in another guide:</p>
<a href="#" style="color: #0055CC; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">Web</a> | <a href="#" style="color: #0055CC; font-family: inherit; font-size:12px; -webkit-font-smoothing: antialiased; margin-right:-">Homepage</a> 
</div>

<div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;">
The designs in this guide cover the visual treatment and interaction details for the mobile SSO pages from the below the top navigation bar. They also provide an overview of how the navigation works for Mobile SSO pages. 
</div>

    <div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;">
     <img src="file:///Users/Theresa/Desktop/1page/images/iphone.png"><BR>
    </div>


  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="file:///Users/Theresa/Desktop/1page/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

基本上，我的HTML非常复杂，因为我不能为我的生活弄清楚如何为容器部分覆盖bootstrap的CSS（字体等）。我遇到的另一个问题是我无法将OVERALL正文背景颜色从白色更改为另一种颜色。

这是我的CSS：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
    <HEAD>
        <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
    </HEAD>
    <body>

<style>

/* navbar */
.navbar.navbar-default {
    background-color: #0078B1;
    border-color: #E7E7E7;
}

.navbar.navbar-inverse {
    background-color: #003B6A;
    border-color: #003B6A;
    margin-bottom: -20px;
    padding-bottom: 20px;
}

.container-fluid{
    background-color: #0078B1;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-align: right;
}
/* title */
.navbar-default .navbar-brand {
    color: #FFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #0078B1;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFF;
    text-decoration: underline;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFF;
    background-color: #0078B1;
}
/* dropdown and caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #FFF;
    border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #0078B1;
    border-bottom-color: #0078B1;
    background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #0078B1;
    border-bottom-color: #0078B1;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #FFF;
    }

/*body*/

.container{background-color: #0078B1;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-align: right;}



</style>
</body>
</HTML>

任何帮助表示赞赏。非常感谢你。

Answer 1

Change navbar color in Twitter Bootstrap 3

此链接已详细讨论了更改导航栏颜色

默认情况下，Bootstrap带有亮/暗选项 - 但是如果你想要自定义颜色最好阅读上面链接中的细节，那么这里没有重复太多的信息。

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

需要帮助清理CSS脚本/覆盖引导程序

1 个答案: