响应式导航问题

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

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

<!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">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>蛋糕商店</title>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="CSS/style.css">
     
    <!-- 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>
    <nav class="navbar navbar-default">
      <div class="container">
          <div class="warp">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="logotext">IMOOC</a>
        </div>
 
        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-left">
                <li class="dropdown">
                   <a class="dropdown-toggle actives" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    首页
                  </a>
                  <ul class="dropdown-menu">
                       
                  </ul>
                </li>
 
                <li 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 one-1">
                      <span>风味</span>
                      <div class="divider"></div>
                      <li><a href="#">巧克力</a></li>
                      <li><a href="#">水果</a></li>
                      <li><a href="#">&nbsp;</a></li>
                    </div>
                  </ul>
                </li>
 
                <li 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 one-2">
                      <span>风味</span>
                      <div class="divider"></div>
                      <li><a href="#">巧克力</a></li>
                      <li><a href="#">水果</a></li>
                      <li><a href="#">&nbsp;</a></li>
                    </div>
                    <div class="one one-3">
                      <span>主旋律</span>
                      <div class="divider"></div>
                      <li><a href="#">心形</a></li>
                      <li><a href="#">卡通</a></li>
                      <li><a href="#">&nbsp;</a></li>
                    </div>
                  </ul>
                </li>
 
                <li 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 one-4">
                      <span>风味</span>
                      <div class="divider"></div>
                      <li><a href="#">巧克力</a></li>
                      <li><a href="#">水果</a></li>
                      <li><a href="#">&nbsp;</a></li>
                    </div>
                  </ul>
                </li>
 
                <li 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 one-5">
                      <span>风味</span>
                      <div class="divider"></div>
                      <li><a href="#">巧克力</a></li>
                      <li><a href="#">水果</a></li>
                      <li><a href="#">&nbsp;</a></li>
                    </div>
                  </ul>
                </li>
              </ul>
 
              <ul class="nav navbar-nav navbar-right-1">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-shopping-cart"></span>
                  </a>
                <div class="up-1 glyphicon glyphicon-triangle-top">
                   
                </div>
                <ul class="dropdown-menu dm1">
                    <p>$0.00(0)</p>
                    <button type="button">空</button>
                </ul>
              </ul>
 
              <ul class="nav navbar-nav navbar-right-2">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-user"></span>
                  </a>
                <div class="up-2 glyphicon glyphicon-triangle-top">
                   
                </div>
                <ul class="dropdown-menu dm2">
                    <form action="post" class="dm2-in">
                        Email<input type="email" class="int">
                        Password<input type="password" class="int">
                        <button type="button">登录</button>
                        <input type="checkbox" class="box"><p class="boxs">记住</p>
                        <p class="dm2-bottom">新用户?<a href="#" class="join">注册</a> 丨 忘记密码?</p>
                    </form>
                </ul>
              </ul>
 
              <ul class="nav navbar-nav navbar-right-3">
                  <a href="#" id="dropdownMenu1" data-toggle="dropdown" class=" dropdown-toggle" aria-haspopup="true" aria-expanded="true">
                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                  </a>
                <div class="up-3 glyphicon glyphicon-triangle-top">
                   
                </div>
                <ul class="dropdown-menu dm3">
                    <input type="text"><button type="button">搜</button>
                </ul>
              </ul>
              <div class="clearfix"></div>
            </div><!-- /.navbar-collapse --> 
         </div> <!-- /.warp -->
      </div><!-- /.container -->
    </nav>
    <section class="banner">
      <div class="warp">
        <div class="lefttext">
            <p class="topimooc">IMOOC <span>蛋糕</span></p>
            <p class="special">特 别 的 日 子 ，特 别 的 你</p>
            <button type="button">SHOP NOW</button>
        </div>
        <img class="img-responsive" src="img/2.png" alt="abc">
      </div>
      <div class="clearfix"></div>
    </section>
 
    <!-- 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>

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

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

*{
  margin: 0;
  padding: 0;
}
.actives{
    background-color: #F07818;
}
.clearfix{
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
}
.navbar{
    border-radius: 0;
    margin: 0;
}
.navbar-default{
    background-color: #5D4B33;
    border: none;
}
.navbar-default .navbar-nav > li > a{
    color: #fff;
}
.container{
    width: 1230px;
}
.navbar-collapse{
    width: 1230px;
}
.warp{
    width: 1200px;
    margin: 0 auto;
}
.logotext{
    height: 60px;
    font-size: 60px;
    color: #fff;
    line-height: 60px;
    display: inline-block;
    font-weight: normal;
    float: left;
    margin-right: 0;
}
.logotext:hover{
    color: #fff;
    text-decoration: none;
}
.navbar .warp .nav .dropdown{
    width: 100px;
    height: 60px;
    text-align: center;
}
.navbar .warp .nav .dropdown a{
    width: 100px;
    height: 60px;
    line-height: 30px;
}
.navbar .warp .nav .dropdown:hover{
    background-color: #F07818;
}
.navbar .warp .nav .dropdown a:hover{
    color: #fff;
}
.navbar .warp .nav .open > a,
.navbar .warp .nav .open > a:hover,
.navbar .warp .nav .open > a:focus {
  background-color: #F07818;
  color: #fff;
}
.navbar .warp .nav .dropdown .dropdown-menu{
    width: 600px;
    height: 200px;
    border-radius: 0;
}
.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;
}
.collapse .nav .dropdown-menu .one li a:hover{
    color: #F07818;
}
.one span{
    color: #F07818;
    font-weight: bold;
    font-size: 17px;
}
 
.container .navbar-right-1{
    display: inline-block;
    float: right;
    width: 65px!important;
    height: 60px!important;
    line-height: 60px;
    font-size: 18px;
    text-align: center;
    border-left: 1px gray solid;
    cursor: pointer;
}
.container .navbar-right-1 a{
    width: 65px!important;
    height: 60px!important;
}
.container .navbar-right-1 a:hover{
    background-color: #5D4B33!important;
}
.container .navbar-right-2{
    display: inline-block;
    float: right;
    width: 65px;
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    border-left: 1px gray solid;
    cursor: pointer;
}
.container .navbar-right-2 a{
    width: 65px;
    height: 60px;
}
.container .navbar-right-2 .drop-toggle:hover{
    background-color: #5D4B33;
}
.container .navbar-right-3{
    display: inline-block;
    float: right;
    width: 65px!important;
    height: 60px!important;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    border-left: 1px gray solid;
    cursor: pointer;
}
.container .navbar-right-3 .dropdown a{
    width: 65px!important;
    height: 60px!important;
}
.container .navbar-right-1 a{
    color: #fff;
    position: relative;
}
.container .navbar-right-2 a{
    color: #fff;
    position: relative;
}
.container .navbar-right-3 a{
    color: #fff;
    position: relative;
}
.container .navbar-right-1 .dm1{
    width: 200px;
    height: 110px;
    position: absolute;
    left: 1155px;
    top: 58px;
    border-top: none;
    border-radius: 0;
    text-align: center;
    font-size: 18px;
    cursor: default;
}
.container .navbar-right-2 .dm2{
    width: 320px;
    height: 300px;
    position: absolute;
    left: 985px;
    top: 58px;
    border-top: none;
    border-radius: 0;
    cursor: default;
}
.container .navbar-right-3 .dm3{
    width: 290px;
    height: 100px;
    position: absolute;
    left: 945px;
    top: 58px;
    border-top: none;
    border-radius: 0;
    text-align: center;
    cursor: default;
}
.container .navbar-right-1 .up-1{
    color: #fff;
    position: absolute;
    top: 47px;
    left: 1310px;
    display: none;
}
.container .navbar-right-2 .up-2{
    color: #fff;
    position: absolute;
    top: 47px;
    left: 1245px;
    display: none;
}
.container .navbar-right-3 .up-3{
    color: #fff;
    position: absolute;
    top: 47px;
    left: 1180px;
    display: none;
}
.container .navbar-right-1 .dm1 button{
    position: absolute;
    width: 85%;
    height: 42px;
    text-align: center;
    line-height: 47px;
    top: 55px;
    left: 15px;
    background-color: #F07818;
    border: 1px #F07818 solid;
    color: #fff;
}
.container .navbar-right-1 .dm1 button:hover{
    color: #F07818;
    background-color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in{
    width: 90%;
    height: 95%;
    margin: -3px auto;
    position: relative;
}
.container .navbar-right-2 .dm2 .dm2-in .int{
    width: 100%;
    height: 35px;
    display: block;
    margin-top: -12px;
    margin-bottom: 5px;
}
.container .navbar-right-2 .dm2 .dm2-in button{
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #F07818;
    border: 1px #F07818 solid;
    color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in button:hover{
    color: #F07818;
    background-color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in .box{
    position: absolute;
    top: 226px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    outline: none;
}
input[type=checkbox]{
    -webkit-appearance:none;
    background-color: #fff;
    border: 2px lightgray solid;
    border-radius: 3px;
}
input[type=checkbox]:checked:after{
    content: '✔';
    position: absolute;
    top: -5px;
    color: black;
    -webkit-transform: rotate(10deg);
}
.container .navbar-right-2 .dm2 .dm2-in .boxs{
    display: inline;
    position: absolute;
    top: 208.5px;
    left: 17px;
}
.container .navbar-right-2 .dm2 .dm2-in .dm2-bottom{
    width: 100%;
    text-align: center;
}
.container .navbar-right-2 .dm2 .dm2-in .dm2-bottom .join{
    color: #F07818;
    text-decoration: none;
}
.container .navbar-right-3 .dm3 input{
    position: absolute;
    top: 30px;
    left: 14px;
    width: 200px;
    height: 35px;
    border: 1px #F07818 solid;
    outline: none;
}
.container .navbar-right-3 .dm3 button{
    position: absolute;
    top: 30px;
    left: 214px;
    width: 60px;
    height: 35px;
    line-height: 35px;
    border: 1px #F07818 solid;
    border-left: none;
    background-color: #F07818;
    color: #fff;
}
.container .navbar-right-3 .dm3 button:hover{
    color: #F07818;
    background-color: #fff;
}
 
 
.banner{
    width: 100%;
    height: 450px;
    position: relative;
    background-color: #f3f6f8;
}
.banner .lefttext{
    display: inline-block;
    width: 400px;
    height: 250px;
    margin-top: 140px;
}
.banner .lefttext .topimooc{
    font-size: 60px;
}
.banner .lefttext .topimooc span{
    color: #F07818;
}
.banner .lefttext .special{
    color: #F07818;
}
.banner .lefttext button{
    width: 180px;
    height: 42px;
    border: 3px #5d4b33 solid;
    background-color: transparent;
    margin-top: 20px;
    font-weight: bold;
    color: #5d4b33;
}
.banner .lefttext button:hover{
    color: #F07818;
    border-color: #F07818;
}
.banner img{
    width: 330px;
    height: 270px;
    position: absolute;
    right: 230px;
    top: 150px;
}

老师，为什么我的导航栏没有响应式的效果呢

qq_一个人一個人_0 2018-09-17

源自：项目：实现企业网站首页 2-7 作业题

收起

2回答

好帮手慕星星 2018-09-18 16:31:19

经测试可以将右侧的三个小图标放在导航的右侧，然后再设置样式：

自己测试下。

收起回答

好帮手慕星星 2018-09-18 09:57:23

经测试浏览器缩小之后，宽度还是原来设置的1200px，建议使用媒体查询来完成，参考：

建议将右侧的三个小图标从中间导航中拿出来，单独放在右边，否则浏览器缩小之后，右侧的小图标会在下拉菜单里面。

自己测试下，祝学习愉快~~

收起回答

提问者 qq_一个人一個人_0 #1

是拿到container外面吗

2018-09-18 10:02:37
好帮手慕星星回复提问者 qq_一个人一個人_0 #2

拿到collapse的外面，也就是中间导航项的外面。

2018-09-18 10:35:37
提问者 qq_一个人一個人_0 #3

老师，为什么我把右边的3个图标拿出来之后让中间的collapse的display为inline-block才能将他们放到一行嘛，但是为什么最后整个的container的高度都多了5.6px，而且屏幕缩小时的效果也不对

2018-09-18 15:50:35