发表于： 2018-11-10 22:00:25
1 925
今天完成的事情：今天布局了任务八，添加了轮播图，然后添加了折叠导航栏：
<nav class="navbar navbar-expand-md header-green justify-content-end">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">职业殿堂</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">线上学习</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">线下学习</a>
</li>
</ul>
</div>
</nav>
开始在nav上加了类名.justify-content-between发现没作用，后来发现三个导航块在一个父级块ul里
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="task8-1.css">
<title>Document</title>
</head>
<body>
<div class="container-fluid header justify-content-between align-items-center">
<p>客服热线：010-465-64889</p>
<div><img src="css8-sprites.png" alt=""></div>
</div>
<nav class="navbar navbar-expand-md header-green justify-content-end">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">职业殿堂</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">线上学习</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">线下学习</a>
</li>
</ul>
</div>
</nav>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
body,p{
margin: 0;
}
.carousel-inner img {
width : 100%;
height: 100%;
}
.header{
display: flex;
top : 0;
}
.header p{
margin-left: 5%;
color : #29b078;
white-space: nowrap;
}
.header div{
margin-right: 5%;
}
.header-green{
background: #29b078;
}
.navbar a{
font-size : 20px;
color : #fff;
text-align: center;
}
明天计划的事情：接着完成任务8图一
遇到的问题：在写css部分的时候
nav a{
font-size : 20px;
color : #fff;
text-align: center;
}
不生效，改成.navbar a 才生效，可能优先级靠后被覆盖掉了。
收获：第一次上手具体写导航栏。
返回列表
评论