logo如何居中，nav和btn怎么固定

首页课程实战体系课手记专栏慕课教程

来源：4-4 自由编程

慕仰3297879

2020-04-22 15:33:27

<!DOCTYPE html>

<html>

<head>

<title>栅格4-4(响应式布局)</title>

box-sizing: border-box;

padding: 0;

margin: 0;

}

body{

font-size: 14px;

}

li{

list-style: none;

}

font-size: 14px;

text-decoration: none;

}

img{

width: 100%;

border:none;

vertical-align: top;

}

.header-container{

background-color: #fff;

border-bottom: 1px solid #dadada;

}

.header-logo-container,

.header-nav-container,

.header-btn-container{

height: 64px;

}

.header-btn-container{

display: flex;

justify-content: flex-start;

-ms-align-items: center;

align-items: center;

}

/*btn-toggle*/

.btn-toggle{

padding: 10px;

background-color: transparent;

border: none;

border-radius: 4px;

cursor: pointer;

}

.btn-toggle:hover{

background-color: #f9f9f9;

}

.btn-toggle-bar{

display: block;

width: 24px;

height: 4px;

background-color: #363636;

border-radius: 2px;

}

.btn-toggle-bar+.btn-toggle-bar{

margin-top: 4px;

}

.btn-toggle:hover .btn-toggle-bar{

background-color: #1428a0;

}

/*header*/

.header-logo{

display: flex;

justify-content: center;

align-items: center;

width: 136px;

height: 100%;

text-align: center;

}

.header-nav,

.header-nav-item,

.header-nav-link{

height: 100%;

}

.header-nav{

display: flex;

justify-content: flex-start;

font-size: 14px

}

.header-nav-item{

margin-left: 24px;

}

.header-nav-item:first-child{

margin-left: 0;

}

.header-nav-link{

display: flex;

-ms-align-items: center;

align-items: center;

font-weight: bold;

color: #000

}

</style>

</head>

<body>

</button>

</div>

</ul>

</div>

</div>

</body>

</html>

写回答

1回答

好帮手慕慕子

2020-04-22

已采纳

同学你好，对于你的问题解答如下：

1、可以给header-logo-container设置为弹性盒子，然后调整下header-logo的样式，让logo图片水平居中显示。如下示例：

2、使用媒体查询，当屏幕宽度小于768px时，设置左侧按钮固定在左侧显示

3、没有实现练习题效果中，点击按钮显示下拉列表。

建议：在html新添加下拉菜单内容，如下：

设置样式

通过js控制下拉菜单的显示和隐藏

4、左侧按钮是一个四分之一圆，里面有两条横线的效果。这个效果可以用css完成，建议同学参考效果优化下，最终实现效果类似即可。

修改后的代码如下，同学可以测试理解下

<!DOCTYPE html>
<html>

<head>
<title>栅格4-4(响应式布局)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-size: 14px;
}
li {
list-style: none;
}
a {
font-size: 14px;
text-decoration: none;
}
img {
width: 100%;
border: none;
vertical-align: top;
}
.header-container {
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-nav-container,
.header-btn-container {
height: 64px;
}
.header-btn-container {
display: flex;
justify-content: flex-start;
-ms-align-items: center;
align-items: center;
}
@media (max-width: 768px) {
/* 设置左侧按钮固定定位在左侧显示 */
.header-btn-container {
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
/* 设置右侧内容宽度百分百显示 */
.header-logo-container {
width: 100%;
}
}
/* 设置header-nav-container定在头部下方隐藏显示 */
.nav {
position: fixed;
top: 64px;
left: 0;
width: 100%;
overflow: hidden;
/* 通过设置高度为0，隐藏元素*/
height: 0;
/* 对height属性设置过渡，让下拉列显示和隐藏时有一个动画效果 */
transition: height 0.3s;
background: #888;
}
.nav a {
display: block;
padding-left: 24px;
color: #eee;
border-bottom: 1px solid black;
}
/*btn-toggle*/
.btn-toggle {
padding: 10px;
background-color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover {
background-color: #f9f9f9;
}
.btn-toggle-bar {
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}
.btn-toggle-bar+.btn-toggle-bar {
margin-top: 4px;
}
.btn-toggle:hover .btn-toggle-bar {
background-color: #1428a0;
}
/*header*/
.header-logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.header-logo {
/* display: flex;
            justify-content: center;
            align-items: center; */
width: 136px;
height: 100%;
/* text-align: center; */
}
.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}
.header-nav {
display: flex;
justify-content: flex-start;
font-size: 14px
}
.header-nav-item {
margin-left: 24px;
}
.header-nav-item:first-child {
margin-left: 0;
}
.header-nav-link {
display: flex;
-ms-align-items: center;
align-items: center;
font-weight: bold;
color: #000
}
</style>
</head>

<body>
<div class="header-container">
<div class="container">
<div class="row">
<div class="header-btn-container col-4 col-sm-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-md-4 d-none d-md-block ">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">首页</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">关于</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">商业合作</a></li>
</ul>
</div>
<div class="header-logo-container col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
<a href="./响应式布局4-4.html" class="header-logo"><img src="img-mc/logo.png"></a>
</div>
</div>
</div>
<div class="nav">
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">关于</a></li>
<li><a href="###">商业合作</a></li>
</ul>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
// 设置一个标识符，当前要显示还是隐藏
var flag = true
$('.header-btn-container').click(function() {
if (flag) {
$('.nav').height('64px')
flag = false
} else {
$('.nav').height(0)
flag = true
}

})
</script>
</body>

</html>

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

logo居中

回答 2

为什么这里的 header-btn-container 使用float：right不起效果

回答 3

回答 2

再看！如何？！优化有？！

回答 2

margin水平居中的问题

回答 1

打开慕课网App查看更多内容