作业问题bootstrap

作业问题bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>蛋糕商店</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="CSS/style.css">
    <link href="CSS/bootstrap.css" rel="stylesheet">
     
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <ul class="nav nav-pills cont">
        <li role="presentation" class="dropdown actives">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            首页
          </a>
        </li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            生日 <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <div class="one">
              <span>关系</span>
              <div class="divider"></div>
              <li><a href="#">朋友</a></li>
              <li><a href="#">爱人</a></li>
              <li><a href="#">姐妹</a></li>
            </div>
            <div class="one">
              <span>风味</span>
              <div class="divider"></div>
              <li><a href="#">巧克力</a></li>
              <li><a href="#">水果</a></li>
              <li>&nbsp;</li>
            </div>
          </ul>
        </li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            婚礼 <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <div class="one">
              <span>关系</span>
              <div class="divider"></div>
              <li><a href="#">朋友</a></li>
              <li><a href="#">爱人</a></li>
              <li><a href="#">姐妹</a></li>
            </div>
            <div class="one">
              <span>风味</span>
              <div class="divider"></div>
              <li><a href="#">巧克力</a></li>
              <li><a href="#">水果</a></li>
              <li>&nbsp;</li>
            </div>
            <div class="one">
              <span>主旋律</span>
              <div class="divider"></div>
              <li><a href="#">心形</a></li>
              <li><a href="#">卡通</a></li>
              <li>&nbsp;</li>
            </div>
          </ul>
        </li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            专用 <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <div class="one">
              <span>关系</span>
              <div class="divider"></div>
              <li><a href="#">朋友</a></li>
              <li><a href="#">爱人</a></li>
              <li><a href="#">姐妹</a></li>
            </div>
            <div class="one">
              <span>风味</span>
              <div class="divider"></div>
              <li><a href="#">巧克力</a></li>
              <li><a href="#">水果</a></li>
              <li>&nbsp;</li>
            </div>
          </ul>
        </li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            商铺 <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <div class="one">
              <span>关系</span>
              <div class="divider"></div>
              <li><a href="#">朋友</a></li>
              <li><a href="#">爱人</a></li>
              <li><a href="#">姐妹</a></li>
            </div>
            <div class="one">
              <span>风味</span>
              <div class="divider"></div>
              <li><a href="#">巧克力</a></li>
              <li><a href="#">水果</a></li>
              <li>&nbsp;</li>
            </div>
          </ul>
        </li>
      </ul>
    </header>
 
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="JS/index.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
*{
  margin: 0;
  padding: 0;
}
.actives{
    background-color: #F07818;
}
.open{
    background-color: #F07818 !important;
}
header{
    width: 100%;
    height: 60px;
    background-color: #5D4B33;
}
.cont{
    display: inline-block;
}
.cont > li > a{
    border-radius: 0;
}
.cont > li > a,span{
    width: 100px;
    height: 60px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
.cont > li > a:hover{
    background-color: #F07818;
}
.dropdown-menu{
    width: 600px;
    height: 200px;
}
.one{
    width: 150px;
    height: 150px;
    display: inline-block;
    margin-top: 20px;
    margin-left: 25px;
}
.one li{
    margin: 10px auto;
}
.one li a{
    color: gray;
    text-decoration: none;
}
.one li a:hover{
    color: #F07818;
}
.one span{
    color: #F07818;
    font-weight: bold;
    font-size: 17px;
}
1
2
3
4
5
6
$(function(){
    var li = $(".cont > li");
    li.click(function(event) {
        $(this).addClass('actives').siblings().removeClass('actives');
    });
});

老师，每点击一次都会给每个导航项加了一个open类，然后覆盖掉了我的active的样式，在bootstrap里面我也找不到在哪，于是我就在我自定义的CSS文件中改变了open类的background-color的属性值，但是在点击的时候还是没有起作用啊，而且我发现自己写的avtive类加在li里面根本就没用，但是加在a上面就有用了，这是为什么
qq_一个人一個人_0 2018-09-13
源自：项目：实现企业网站首页   2-7 作业题
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕星星 2018-09-14 14:28:05

是可以添加新的样式，但是如果要把bootstrap里面样式覆盖的话，需要选择器的权重优先于bootstrap里面的哦。所以建议将自己写的样式放在bootstrap样式的下面，这样有的样式可以覆盖掉bootstrap里面的样式。如下：

http://img1.sycdn.imooc.com//climg/5b9b54ee00011b9906640054.jpg

自己测试下。


0
收起回答
好帮手慕星星 2018-09-14 10:26:17

点击导航项的时候，这是bootstrap里面的样式：

http://img1.sycdn.imooc.com//climg/5b9b1c050001dba909960099.jpg

本身就是添加在a标签上面的，所以你也要添加在a标签上面。

祝学习愉快~~

0
收起回答
  • 提问者 qq_一个人一個人_0 #1
    老师不是说可以在自己的CSS里面重新定义bootstrap里面的类的样式吗，为什么我定义了open类没用呢
    2018-09-14 14:08:37
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

作业--下拉菜单问题
24 0 4
2-9大作业问题
61 0 4
老师，我的问题是本节的5-12课程作业。
14 0 3
关于作业0分问题
16 0 3
阶段五没有作业了吗？
40 1 7

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码