任务进展
一、 任务进度：95%；
① 效果呈现
战略合作企业页面
职业推荐页面
二、 近期情况
注：html里部分类是引用bootstrap的css样式，参考bootstrap4的工具页面（http://bs4.ntp.org.cn/pages/utilities.html）
1. 完成bootstrap的面包屑导航的应用
HTML
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
<li class="breadcrumb-item active p-0" aria-current="page">
合作企业
</li>
</ol>
</nav>
<!--面包屑导航-->
CSS
由于面包屑导航的分隔符已经以::before的伪类存在，所以只需替换content值
.breadcrumb {
padding: 2em 0;
font-size: 0.4em;
background: none;
}
.breadcrumb a {
color: #333;
}
.breadcrumb .active {
color: #29b078;
} /* 定义面包屑的字体和颜色 */
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding: 0;
color: #333;
content: ">";
} /* 定义面包屑导航的分隔符 */
2. 完成bootstrap的导航折叠和滚动监听的结合应用；
战略合作企业页面的左右布局（监听滚动文本区）
职业推荐页面的上下布局（监听body整个页面）
① 导航折叠
HTML
导航栏的父元素需要有navbar-expand-lg的类声明，来定义在哪个分辨率范围内是展开状态；
而折叠按钮增加d-lg-none的类声明，是为了在lg及以上的范围内，处于隐藏状态；
折叠按钮的同级元素则是包含列表组的包含块，从而进行css定义样式和布局即可；
<section class="navbar-expand-lg row no-gutters" id="introduce">
<button
class="btn navbar-toggle w-100 d-lg-none shadow-sm"
type="button"
data-toggle="collapse"
data-target="#brand-nav"
aria-controls="brand-nav"
aria-expanded="true"
aria-label="Toggle navigation"
>
合作企业
<span class="dropdown-toggle ml-2"></span>
</button>
<!--品牌选择链接区，折叠按钮-->
<div class="align-items-start collapse navbar-collapse in" id="brand-nav">
<div id="brand-list" class="list-group text-nowrap text-center shadow-sm rounded">
<h4 class="list-group-item d-none d-lg-block">合作企业</h4>
<a class="list-group-item mt-3 active" href="#alibaba-1">阿里巴巴 </a>
<a class="list-group-item" href="#tencent-2">腾讯视频 </a>
<a class="list-group-item" href="#tudou-3">土豆网  </a>
<a class="list-group-item" href="#putaoteng-4">北京葡萄藤</a>
<a class="list-group-item" href="#alibaba-5">阿里巴巴 </a>
<a class="list-group-item" href="#jinshanyun-6">金山云  </a>
<a class="list-group-item" href="#huanxin-7">环信   </a>
<a class="list-group-item" href="#ronglian-8">容联   </a>
<a class="list-group-item" href="#qiniu-9">七牛   </a>
<a class="list-group-item" href="#alibaba-10">阿里巴巴 </a>
<a class="list-group-item" href="#putaoteng-11">北京葡萄藤</a>
<a class="list-group-item mb-3" href="#alibaba-12">阿里巴巴 </a>
</div>
</div>
<!--品牌选择链接区，滚动监听作用-->
CSS
#introduce .btn {
background-color: #fff;
color: #333;
font-size: 1.6em;
font-weight: 500;
} /* 定义内容介绍区的折叠按钮样式 */
#brand-list {
background-color: #fff;
}
#brand-list h4,
#brand-list a {
padding: 1em 5em;
font-size: 0.6em;
color: #29b078;
border: none;
} /* 定义品牌链接的全局样式 */
#brand-list h4 {
color: #333;
border-bottom: 0.1em solid #e6e6e6;
} /* 定义品牌链接的小标题样式 */
#brand-list a:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
width: 0.6em;
height: 0.6em;
border: 0.1em solid #ff650e;
border-radius: 50%;
}
#brand-list a:hover,
#brand-list .active {
color: #ff650e;
background: none;
text-decoration: none;
cursor: pointer;
}
#brand-list a:hover:before,
#brand-list .active:before {
background-color: #ff650e;
} /* 定义品牌链接的样式和悬浮及点击状态 */
② 滚动监听
HTML
在上方的导航栏的每个链接指定跳转的id值，即可实现点击导航栏的链接，页面跳转到指定的位置；
同样也可以跨html文件进行同域跳转，只需在对应的html后添加#id值即可，如href="index.html#banner"，就会跳转到index页面的banner位置；
data-offset值，为计算位置时，从监听对象的顶部开始计算的偏移距离，来确定滚动初始位置，从而使active值更加准确地生效在点击的链接；
<div
data-spy="scroll"
data-target="#brand-list"
data-offset="60"
class="scrollspy ml-lg-2 overflow-hidden shadow-sm rounded"
>
<div class="card" id="alibaba-1">
<div class="card-body">
<h4 class="card-title">阿里巴巴-1</h4>
<p class="card-text">...</p>
</div>
</div>
<div class="card" id="tencent-2">
<div class="card-body">
<h4 class="card-title">腾讯视频-2</h4>
<p class="card-text">...</p>
</div>
</div>
CSS
如没有给滚动文本区确定高度，则给body定义为相对定位，再在html给body添加scroll属性来应用，从而滚动监听为整个body，如下：
body { position: relative; }
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
如给滚动文本区确定高度，则给滚动文本区定义为相对定位，再在html给滚动文本区添加scroll属性，且在css给监听对象来应用如下：
#introduce .scrollspy {
position: relative;
height: 60em;
} /* 滚动监听必须对监听对象添加相对定位 */
<div
data-spy="scroll"
data-target="#brand-list"
data-offset="60"
class="scrollspy ml-lg-2 overflow-hidden shadow-sm rounded"
>
<div class="card" id="alibaba-1">...
如想滚动文本区只展示对应的文本，则需给每个文本的card类，定义高度与滚动文本区的高度一样，且只需给card类添加overflow-y:auto即可，如下
#introduce .scrollspy .card {
overflow: auto;
border: none;
height: 100%;
} /* 定义介绍区的整体布局，目前只会使文本去的父元素高度与卡片高度一致才能对应展示 */
3. 完成bootstrap的媒体对象的应用
HTML
给滚动文本区中的文本标题，应用媒体对象，因其为图文左右布局，在自适应时，图片不会自适应收缩为固定宽度，文字不会溢出到图片那一列；
<h4 class="card-title media">
<img
class="align-self-start mr-2"
src="../PCweb/img/cooperative/tudou@2x.png"
alt="Generic placeholder image"
/>
<div class="media-body">
土豆网公司成立于1998年11月，
是目前中国最大的互联网综合服务提供商之一，也是中国
服务用户最多的互联网企业之一。成立10多年以来，腾讯一直秉承一切以用户价值为依归的
经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板
公开上市（股票代号700）。
</div>
</h4>
4. 完成bootstrap的组件——卡片内嵌媒体对象和表格的结合应用
通过卡片的card-body分为card-title和card-text，card-title应用媒体对象，card-text应用表格；
表格中，rowspan值为合并多少行的单元格即纵向合并，colspan值为合并多少列的单元格即横向合并，如
<th
scope="col"
rowspan="3"
class="text-center align-middle"
>
薪资待遇
</th>
<th colspan="2">
提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础
</th>
5. 完成bootstrap的栅格系统的新应用，即在设置栅格间距值时，通过栅格系统的自动等宽和列拆分完成自适应布局
HTML
a. 如不需要父元素的margin值，可以声明no-gutters的类来消除margin的左右值；
b. 通过对所有子元素在相同范围内不声明具体列数来实现自动等宽，即col-lg、col-md，从而在子元素有margin的间距值时，可以自适应地等宽均匀分布；
c. 如想确定在一行分布几个子元素，无需另起row类的父元素，只需增加空白的div同级元素，声明为w-100，即有一个宽度为100%的拆分线，来换行；
d. 如出现新起的一行，子元素数量不够需要等宽的数量，则同样增加空白的div同级元素，同样声明为col-md或其他，来作为占位使用；
e. 由此想在对应的分辨率范围内，空白div同级元素出现，在其他范围则消失，可以声明以下方式来控制显隐：
6. 完成职业推荐页面的各个卡片的悬浮状态下的展示动画效果
HTML
在卡片下增加一个panel面板的子元素，方便此隐藏面板可以以卡片作为相对定位；
<div class="panel shadow-sm w-100">
<h5 class="panel-heading text-center">ios工程师</h5>
<p class="panel-body">
iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS
X操作系统一样，也是以Darwin为基础的，因此同样属
于类Unix的商业操作系统。国内iOS开
发起步相对较晚，人才培养机制更是远
远跟不上市场发展速度。有限的iOS开
发人才成了国内企业必争的资源。国内
iOS开发起步相对较晚，人才培养机制
更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
</p>
</div>
CSS
通过改变z-index、padding、height值来实现隐藏面板在悬浮状态时，下滑出现的动画效果；
#profession-sel .panel {
position: absolute;
border-radius: .25rem;
background-color: rgba(0, 0, 0, 0.76);
color: #FFF;
}
#profession-sel .panel .panel-heading {
margin-bottom: 2.5em;
font-size: .4em;
}
#profession-sel .panel .panel-body {
font-size: .4em;
line-height: 2;
} /* 定义职业选择区的卡片隐藏面板的样式 */
#profession-sel .panel {
z-index: -1;
padding: 0;
height: 0;
-webkit-transition: 0.2s all ease;
transition: 0.2s all ease;
}
#profession-sel .card:hover .panel {
z-index: 1;
padding: 2.2em 2em;
height: 100%;
} /* 定义职业选择区的卡片隐藏面板在悬浮状态下显示的动画 */
7. 完成返回顶部按钮的定义，和初步使用jQuery函数
HTML
<a class="gotop fixed-bottom card shadow-sm border-0 mb-md-2">
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</a>
<!--返回顶部按钮-->
CSS
.gotop {
left: auto;
margin-right: 5%;
margin-bottom: 10em;
width: 2em;
height: 2em;
min-width: 32px;
min-height: 32px;
background-color: #29b078;
display: none;
cursor: pointer;
transform: rotate(-90deg);
}
.gotop .carousel-control-next-icon {
width: 100%;
height: 100%;
background-size: 1em 1em;
} /*定义返回顶部的按钮样式 */
JS
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 0 )
$(".gotop").fadeIn();
else
$(".gotop").fadeOut();
}); // 当滚动值大于0时，即有滚动时，返回顶部按钮就会渐显
$(".gotop").click(function() {
$("html, body").animate({ scrollTop: 0 }, 500);
}); // 给返回顶部按钮一个点击事件，即为改变滚动值为0的动画，且动画时间为500ms
});
三、 任务问题
1. 对于导航栏，bootstrap没有自动添加active值的功能，即无法实现点击后固定状态，不过由于导航栏一般为跳转链接，只要跳转后，页面就会重置状态，所以不用设置自动添加active值也可以，只需手动确定哪个链接为固定点击状态即可；
2. 对于浏览器编写的开发尺寸还是以480P的标注尺寸为准，尤其受到chrome浏览器的最小字体限制，以致在小分辨率范围内部分文本布局的间距值较大，与设计图有所偏差，而且bootstrap的默认样式的修改也比较麻烦，即使应用bootstrap的内容，还是在css文件编写比较多，还是需要多思考尽可能简洁；
四、 明天任务
1. 尝试和分析任务9；
2. 看国庆阅兵，国庆过的愉快
返回列表
评论