任务进展
一、 任务进度：40%；
① 效果呈现：
二、 今日情况
1. 采用带有折叠按钮的导航栏样式，
困难：
① 导航栏的高度由子元素高度确定，如声明导航栏高度，折叠按钮的下拉菜单就会被覆盖；
② 导航栏中的导航文字位置调整后，其折叠按钮的下拉菜单的文字位置也会调整，没有实现居中，且如官网那样鼠标悬浮时，背景变色也没有做到；
HTML
<nav class="navbar navbar-expand-sm navbar-dark">
<button
class="navbar-btn navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="true"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse in" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"
>首页 <span class="sr-only">(current)</span>
</a>
</li>
<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>
CSS
#home nav {
padding: 0;
padding-left: 62%;
background-color: #29B078;
box-shadow: 0 0 .1em rgba(8, 1, 3, 0.15);
} /* 定义导航栏的样式 */
#home nav .navbar-toggler {
margin: .25em;
padding: 0;
margin-left: auto;
margin-right: .25em;
width: 2.5em;
height: 2em;
font-size: 1em;
} /* 定义折叠按钮的样式 */
#navbarNav .nav-item {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2.5em;
height: 2.5em;
}
#navbarNav .nav-item .nav-link{
padding: 0;
font-size: .4em;
color: #FFF;
} /* 定义导航栏的字体样式 */
2. 实现导航栏文本的下划线滑动效果；
困难：只能实现在鼠标悬浮情况下，且相邻的文本，其下划线可以做到无缝跟随鼠标来滑动，但实现不了相隔的文本间，下划线可以如同轮播图那样滑动；
HTML如上
CSS：通过伪类来添加下划线，再赋予下划线的宽度变化的过渡动画效果来实现；
#navbarNav .nav-item:before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: .1em solid #FFF;
-webkit-transition: 0.2s all linear;
transition: 0.2s all linear;
} /* 定义导航栏的下划线 */
#navbarNav .nav-item:hover:before {
left: 0; /*鼠标滑过时，下划线从右向左移动*/
width: 100%; /*同时，下划线宽度从0-100%*/
}
#navbarNav .nav-item:hover ~ .nav-item:before { /*~ 选择器：查找指定元素后面的所有兄弟结点*/
left: 0; /*处于hover后面元素的下划线从左侧开始显示*/
} /* 定义下划线的滑动方向 */
3. 应用bootstrap的卡片组件，适用于上图下文的结构，尤其适合配合栅格系统应用，如瓷片区、功能入口、人员介绍等；
HTML
<div class="card col-md">
<div class="card-img-top"></div>
<div class="card-body">
<h5 class="card-title">高效</h5>
<p class="card-text">
将五到七年的成长时间，缩短到一年到三年。
</p>
</div>
</div>
CSS
#feature .card {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2.2em;
background: none;
border: none;
} /* 定义特点区和卡片的布局 */
#feature .card-img-top {
width: 1.6em;
height: 1.6em;
}
#feature .card:first-child .card-img-top {
background: url(../PCweb/img/rocket@3x.png) no-repeat center;
background-size: 1.1em 1.6em;
}
#feature .card-body {
padding: 0;
width: 5.6em;
display: flex;
flex-direction: column;
align-items: center;
}
#feature .card-body .card-title {
margin: 0;
padding: 0;
margin-top: 2em;
font-size: .5em;
color: #333;
}
#feature .card-body .card-text {
margin-top: 2em;
padding: 0;
font-size: .4em;
color: #999;
letter-spacing: 0.5;
} /* 定义特点区的卡片文本的布局和样式 */
4. 应用bootstrap的轮播图组件和卡片组件来实现，优秀学员展示切换的效果，即轮播图的轮播区域container用栅格系统加卡片组件完成，取消自动轮播效果，再自定义轮播指标的样式即可；
HTML
<section id="students" class="carousel slide">
<h4 class="text-center">优秀学员展示</h4>
<ol class="carousel-indicators">
<li data-target="#students" data-slide-to="0" class="active"></li>
<li data-target="#students" data-slide-to="1"></li>
<li data-target="#students" data-slide-to="2"></li>
<li data-target="#students" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="container carousel-item active">
<div class="row">
<div class="card col-md">
<div class="card-img-top"></div>
<div class="card-body">
<h5 class="card-title">技术顾问：罗大佑</h5>
<p class="card-text">
百度技术总监：互联网基础 服务领域，从事虚拟主机、
云服务器、域名。曾任新网 高级技术经理，负责技术研
发、团队管理与建设。
</p>
</div>
</div>...
CSS
#students .card,
#students .card-body {
display: flex;
flex-direction: column;
align-items: center;
}
#students .card {
margin: 0 .5em;
} /* 定义学员展示区的卡片布局 */
#students .card-img-top{
width: 3.2em;
height: 3.2em;
}
#students .card:first-child .card-img-top {
background: url(../PCweb/img/head1@3x.png) no-repeat;
background-size: cover;
}
#students .card-body {
padding: 1em .8em;
}
#students .card-title {
margin-bottom: 1.4em;
font-size: .5em;
color: #333;
}
#students .card-text {
font-size: .4em;
color: #999;
} /* 定义学员展示区的卡片文本 */
#students .carousel-indicators {
height: .4em;
margin-bottom: -1em;
}
#students .carousel-indicators li {
width: .4em;
height: .4em;
border: none;
border-radius: 50%;
background-color: #FFF;
box-shadow: 0 0 0.2em rgba(8, 1, 3, 0.15);
}
#students .carousel-indicators .active {
background-color: #29B078;
} /* 定义学员展示区的轮播指示的样式 */
5. 其他组件基本都是用栅格系统完成均匀分布，来实现自适应布局的效果，即缩小屏幕时，格局会变为纵向分布；
三、 任务问题：
1. 自适应问题：应用栅格系统，对于col-后缀的了解不够，影响在手机上显示的布局，基本都是纵向分布，不够美观，且对于在1920P的高清屏下，整体布局偏大，还需再对不同的设备及屏幕下进行进一步调试和修正；
2. 尺寸问题：由于没有制作网站的经验，对于网站的开发尺寸不够了解，基本都是按480P即设计尺寸的四分之一来声明，再通过媒体查询来调整html的rem值来适配，但布局还是很奇怪，不够好，还需调整下；
3. chrome浏览器的最小字体限制：基本chrome浏览器限制字体大小不能低于9.6px，所以在用480P标注尺寸来声明时，如导航栏和页脚，就会出现尺寸偏大的误差，只有在更高的分辨率下才正常，暂时没有找到方法来清除限制；
4. 适配设计图问题： 由于采用栅格系统，基本都是平均分布，就不会跟设计图完全一样，且由于字体声明后，部分间距难以用字体的整数乘积得到，也会有所调整为偶数；
5. 声明尺寸问题：尤其采用栅格系统后，如是对栅格系统的包含块的高度声明固定高度后，该栅格系统组件就会变为浮动模型，导致后面组件浮上来而遮住，所以基本都是通过子元素内容和间距值来撑宽父元素，还是对于布局不够熟悉导致需要一下一下试；
6. 官网的动效的实现问题：
① 联系方式上，qq等图标的展示动效，即符号上升，下面弹出提示框，应该可以通过bootstrap的提示框组件和图标的点击变化动画可以实现；
② 导航栏的折叠下拉菜单的悬浮动效，即点击折叠按钮后，展示出下拉菜单，鼠标悬浮时背景变色；
四、 明天任务：
1. 完成其他设备或分辨率下的布局调整；
2. 尝试实现官网的动效；
3. 继续完成剩余的页面；
返回列表
评论