发表于： 2020-07-02 21:20:36
1 1089
今天完成的事情
了解js如何运行
了解js的数据类型
了解js的运算符
修正错误，使用flex属性重新完善部分以前固定大小样式会在改变屏幕大小就会变形的布局，并提交以前的任务
遇到的问题：
任务9导航栏文字设置颜色无效，默认颜色黑色
html：
<div class="header-nav-wrap nav">
<div class="container">
<div class="row" style="width: 100%;">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="./images/src/战略合作企业_01.jpg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<img src="./images/src/jnshu按钮.jpg" alt="">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mr-auto"></div>
<ul class="navbar-nav mr-right">
<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>
css:
/* 导航栏 */
.header-nav-wrap {
background-color: #29b078;
line-height: 100%;
}
.navbar {
margin: 0;
padding: 0;
background-color: #29b078;
width: 100%;
line-height: 100%;
}
#navbarSupportedContent {
margin: 0;
padding: 0;
height: 100%;
}
.navbar-toggler {
border: none;
}
.navbar-nav {
display: flex;
justify-content: space-between;
}
.nav-item {
display: inline-block;
white-space: nowrap;
}
.nav-link {
height: 100%;
line-height: 100%;
padding: 3rem 3rem;
border-top: 4px solid #29b078;
border-bottom: 4px solid #29b078;
font-size: 2rem;
text-align: center;
color: white;
}
.nav-link:hover {
border-bottom: 4px solid white;
}
明天的计划：
学习练习js属性
返回列表
评论