一、 任务情况：
1. 任务效果
① 首页
② 合作企业页
③ 职业选择页
2. 任务架构：
@charset "utf-8";
// 每个scss文件都要在首行加上，否则中文会编译出错
/*!
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _placeholder.scss # Sass Placeholder
| |– _functions.scss # Sass Functions
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _colors.scss # Colors' type
| |– _animation.scss # Animation
|
|– components/
| |– _buttons.scss # Buttons
| |– _lists.scss # List-group
| |– _cards.scss # Cards
| |– _navs.scss # Navs
| |– _breadcrumb.scss # Breadcrumb
| |– _scrollspy.scss # Scrollspy
| |– _tables.scss # Tables
|
|– layout/
| |– _body.scss # Body
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _main.scss # Main
| |– _footer.scss # Footer
| |– _navigation.scss # Navigation
| |– _aside.scss # Aside
|
|– vendors/
| |– _normalize.scss # normalize
| |– _glyphicons.scss # Glyphicons
|
|– vendors-extensions/
| |– _carousel.scss # Carousel
| |– _collapse.scss # Collapse
| |– _popover.scss # Popover
|
`– main.scss # Main Sass file
*/
二、 具体情况（部分展示）：
1. abstracts
① variables，新增display即显示情况的值列表，为增加在特定的分辨率情况下的显示情况，来方便约束占位元素的显隐；
$d-list: ("none", "block", "inline", "inline-block", "flex");
// 声明显示情况的列表
② functions，新增函数文件，主要放置函数，可以通过函数来维护或调整其他样式或数值的变化，即可以访问所有全局变量来调用，但需要设置返回值@return，不会用，暂时用来放置条件指令，而自带函数基本可以混合进混合宏、占位符等文件内使用，还是需要学习到JS后才知道如何使用；
如条件指令@if、@each、@for等（对于指令，不知道需不需要新建），自带函数（字符串函数、数字函数、列表函数、颜色函数），或者自定义函数（@function，没有经验），如增加了可以一次性定义各个分辨率下的显示情况，方便作为类来使用，或者作为占位符也可以；
@each $d in $d-list {
.d-#{$d} {
display: #{$d}!important;
}
}
@each $bp-key in $bp-keys-list {
@include respond-to($bp-key) {
.d-#{$bp-key}-block {
display: block!important;
}
.d-#{$bp-key}-none {
display: none!important;
}
}
}
// 声明通用显示类，以及在不同分辨率的显隐情况的条件函数，声明顺序不能倒转
也增加首页中各个模块之间的边距的规律，也是作为类来方便使用，本来想作为变量声明使用，只是变量无法搭配#{$i}插值和其他变量使用；
@for $i from 1 through 6 {
.main-mt-no#{$i} {
margin-top: 4em - 0.5em * ($i - 1);
}
}
// 声明首页的模块的上外边距的类，并形成规律
③ mixins，新增定义阴影的混合宏，发现组件的阴影基本都一致，所以可以提取出来来方便使用，同时也是因为可以传递参数，所以用@mixin混合宏来声明，即添加默认参数；
@mixin box-shadow($offset: 0.25em, $effect: 0.75em) {
box-shadow: 0 $offset $effect $color-box-shadow;
}
// 定义阴影的混合宏
④ placeholder，占位符用的不多，其实不用传递参数的代码块都可以作为占位符使用，即布局工具、显隐工具、清除浮动、边距工具、对齐工具等，基本能作为类使用，都可以作为占位符来通过@extend来调用，来进一步压缩css文件的大小（其实函数文件内那些条件指令，都可以作为占位符使用）；
%clearfix {
&::after {
content: "";
display: block;
clear: both;
}
}
// 声明清除浮动的占位符
%text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 声明文本隐藏样式为省略号的占位符
2. base
① reset，基本normalize插件可以代替，不过还是放置一些特殊的重置样式，如表单的基本样式、按钮、链接的基本样式、标题标签h、段落标签p的margin值；
② typography，根据网页设计，重新声明字体在不同分辨率范围内的变化情况，以及声明标题标签、段落标签、基本文本以及特殊按钮字体等的文字；
@each $font-bp in $bp-keys-list {
body {
@include respond-to($font-bp) {
$i: index($bp-keys-list, $font-bp);
font-size: 0.625rem * ($i * 0.8);
}
}
}
// 定义body标签在不同断点下的字体大小
@for $h-numb from 1 through 6 {
h#{$h-numb} {
font-size: 0.6em - (0.05 * $h-numb);
font-weight: 600;
}
}
// 定义h1~h6的文字大小
p {
font-size: 0.35em;
}
// 定义正文的文字大小
@mixin fs-($f-numb) {
font-size: 0.6em - (0.05 * $f-numb);
}
// 定义font的1~6等级的文字大小
$fs-btn-lg: 1em;
// 定义大型按钮的字体大小
③ colors，这次的颜色规律比较明显，基本可以列出所有颜色，整理好并分类来调用如基本颜色（常用主次、背景或状态）、字体颜色、边线颜色、特殊样式颜色（阴影、点缀等）、特殊组件颜色（按组件分类）；
// 以下为基本类型颜色
$color-bg: #FAFAFA;
// 背景颜色
$color-primary: #29B078;
// 主要颜色
$color-secondary: #26A26F;
// 次要颜色
$color-light: #FFF;
// 明亮颜色
$color-info: #F01400;
// 提醒颜色
$color-active: #FF650E;
// 点击状态颜色
// 以下为基本文字颜色
$color-title: #333;
// 题目文字颜色
$color-text: #999;
// 正文文字颜色
// 以下为基本边线颜色
$color-border-primary: #D0D6D9;
// 主要边线颜色
$color-border-secondary: #EDF1F2;
// 次要边线颜色
$color-aside-border: #32C086;
// 底部下侧边边线颜色
$color-main-dashed: #DEDEDE;
// 主体内容里虚线颜色
$color-list-border: #E6E6E6;
// 列表的边线颜色
// 以下为特殊样式或组件颜色
$color-box-shadow: rgba(8, 1, 3, 0.15);
// 阴影颜色
$color-msg-bg: rgba(0, 0, 0, 0.76);
// 提示信息组件的背景颜色
④ animation，这次的动画交互效果不多，把之前的3d翻转归类到动画效果里面（3d翻转中，需要给默认显示的元素添加-front的类，默认隐藏的元素添加-back的类），以及新增底边随鼠标移动的平移效果；
@mixin border-bottom-slide($border-width) {
&:before {
content: "";
position: absolute;
bottom: 0;
left: 100%;
width: 0;
border-bottom: $border-width solid $color-light;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
} // 定义导航栏的下划线
&:hover:before,
&.active:before {
left: 0;
width: 100%;
} // 定义下滑线的展开方式
&:hover ~ &:before {
left: 0;
} // 定义下划线的滑动方向
}
// 声明底边随鼠标移动而滑动的效果
@mixin transform-3d {
position: relative;
width: 100%;
overflow-x: hidden;
@extend %clearfix;
transform-style: preserve-3d;
&-front,
&-back {
float: left;
margin-right: -100%; // 使布局变为左右布局
width: 100%;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
&-front {
transform-origin: left center;
// 定义旋转中心在左边中间点
}
&-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden; // 使翻转的背面的隐藏
transform-origin: right center;
transform: translateX(-100%) rotateY(-180deg);
} // 定义旋转中心在右边中间点，并通过transform来默认隐藏
&:hover &-front {
transform: translateX(100%) rotateY(180deg);
}
&:hover &-back {
transform: translateX(0) rotateY(0);
}
// 定义在悬浮状态下的3d翻转变化
}
// 声明隐藏元素以3d翻转显示的动画效果
3. components
① buttons，这次独立的按钮比较少，主要是header、fixed的按钮，以及特殊效果的按钮，基本很多按钮都作为大组件的自带元素，如导航条的选项、轮播图的轮播控制器等，都是在那文件内定义样式的，而且定义按钮样式并不复杂，主要还是交互效果比较复杂；
② lists，主要是不是传统导航条样式的链接组，以及带有序号顺序的步骤区，定义好list-group(整体布局）、list-item（选项布局）、list-prepend（前缀符号样式）、list-text(文本样式)，以及交互效果即可，当然也是要用页面名和模块名来作为前缀区分不同的列表组；
③ cards，卡片，基本很多组件都是卡片形式，即带有图文形式内容的包含块，（这次犯了个错误，没有统一所有卡片样式的规律），应该先定义.card的通用类的基本背景颜色、基本样式，定义好card-group、card、card-img、card-header、card-body、card-text等，再按前缀来分类定义各自的布局以及特殊样式，导致这次cards文件编写很多重复的样式；
④ navs，导航条，主要定义好navbar-nav、nav-item、nav-link等样式，由于需要应用bootstrap的JS文件，所以nav-item、nav-link的类名不能用前缀（即不能改名，否则检索不到而无法生效），通过后代选择器来作为子元素来进行分类定义；
⑤ breadcrumb，面包屑导航，参考bootstrap，跟导航条不同，多了之间的分隔符，主要定义breadcrumb、breadcrumb-item以及交互效果和状态；
// 1. 定义面包屑导航为flex弹性布局
// 2. 定义面包屑导航的边距值
.breadcrumb {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; // 1
margin-top: 0.6em;
margin-bottom: 0.8em; // 2
}
.breadcrumb-item {
@include fs-(4);
& a {
color: $color-title;
}
} // 定义面包屑导航的导航选项字体大小以及颜色
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.25em;
&::before {
display: inline-block;
padding-right: 0.1em;
color: $color-title;
content: ">";
}
// 定义面包屑导航之间的边距值，以及分割的符号
&:hover::before {
text-decoration: none;
}
}
// 定义面包屑导航悬浮状态的样式
.breadcrumb-item.active {
color: $color-primary;
}
// 定义面包屑导航点击状态的样式
⑥ scrollspy，滚动监听对象，主要定义滚动监听对象的布局以及基本样式，作为滚动内容的包含块，感觉可以放在布局文件夹内；
.introduce-scrollspy {
position: relative;
width: 100%;
height: 72rem;
overflow: hidden;
background-color: $color-light;
border-radius: 0.1em;
@include box-shadow;
@include respond-to(lg) {
margin-left: 0.6em;
}
}
// 定义品牌介绍区滚动监听的对象的布局和样式
⑦ tables，表格，主要在html文件定义好th、td等标签，并对特殊样式的单元格添加状态类，如-info、-danger等，以及特殊样式的文本用<span>包含来定义，再定义通用样式以及特殊样式，尤其带有边线、带有悬浮状态、单元格颜色相隔等的基本类型也都可以定义；
.profession-table {
&,
& th,
& td {
border-top: 1px solid $color-border-secondary;
} // 定义上边
& th:nth-child(2),
& td {
border-left: 1px solid $color-border-secondary;
} // 定义左边
}
// 定义职业选择区的表格边框
4. layout
① 主要还是难在栅格系统，这次因需要分隔占位元素，所以新增.col-divider来分隔多个列变为行；
.col-divider {
display: block;
width: 100%;
}
// 定义栅格系统的分隔占位元素
② 对于header、footer、aside、navigation、main，除了定义整体布局外，还定义了背景样式、子元素内容的文本样式，基本除了能作为组件化的其他元素都在该文件定义，尤其footer，由于不知道底部那三栏内容（footer-left、footer-center、footer-right）应该放在哪个文件内，所以都在footer文件内定义布局和样式；
③ body，主要定义背景颜色和position:relative(由于滚动监听需要监听相对于body的位置）；
④ main，还定义在主体内容通用的布局、文本样式，以及特殊的模块布局和样式，主要是对于主体内容里的模块，不想另外新建文件来定义，如果比较多还是建议新建模块文件，再往里面放置组件；
.main {
width: 100%;
&-container {
margin-left: 18.75%;
margin-right: 18.75%;
&-title {
margin-top: 0;
margin-bottom: 1.7em;
color: $color-title;
text-align: center;
}
} // 定义主体内容的边距值，以及标题
&-banner {
width: 100%;
} // 定义主体内容的广告图宽度
}
// 定义主体内容的宽度值
.main {
& .introduce {
@extend .main-container;
align-items: flex-start;
margin-bottom: 5.8em;
}
}
// 定义主体内容区的品牌介绍区模块的整体布局
5. vendors/vendors-extensions
① vendors文件夹内放置没有修改的插件、库以及框架，还是难以完全脱离所有插件、库以及框架，主要涉及JS文件都还是要应用；
② vendors-extensions放置修改过的插件、库以及框架，并以同样的名字命名，如bootstrap的轮播图组件、折叠组件、弹出框组件等，都是需要有交互效果的，里面的类的名字不能随意修改，否则对应的JS文件无法识别，主要通过后代选择器进行分类，所以这次把参考bootstrap的（基本照搬代码）文件都归类于此，同样也修改一些复杂的代码块如媒体识别；
@each $bp-key in $bp-keys-list {
@include respond-to($bp-key) {
.collapse-expand-#{$bp-key} {
& {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
} // 定义导航栏的布局
& .navbar-toggler {
display: none;
} // 定义导航栏的折叠触发器
& .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
} // 定义导航栏的导航条的布局
& .navbar-nav {
@include flex-align-center;
-ms-flex-direction: row;
flex-direction: row;
margin-left: auto;
margin-right: 0;
} // 定义导航栏的选项的布局
}
}
}
// 定义在不同的分辨率内的flex布局
6. JQuery初步应用
① 自动添加active
$(".navbar-nav-item").click(function() {
$(".navbar-nav-item").removeClass("active");
$(this).addClass("active");
}); // 自动添加active
② 返回顶部按钮的滚动监听
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 0 )
$(".backtop").fadeIn();
else
$(".backtop").fadeOut();
}); // 当滚动值大于0时，即有滚动时，返回顶部按钮就会渐显
$(".backtop").click(function() {
$("html, body").animate({ scrollTop: 0 }, 500);
}); // 给返回顶部按钮一个点击事件，即为改变滚动值为0的动画，且动画时间为500ms
});
三、 总结及困难
1. 经过这一系列css任务，基本学会了git及GitHub、h5的标签语义化、各种布局工具（尤其flex布局、自适应布局）、通用css样式以及纯css的交互效果、css图形、编写规范、bootstrap的使用、组件化思维、sass的使用等不涉及服务器、数据库的平面页面及切图能力，还有初步应用Jquery，但对于JS的涉及不多；
2. 由于没有深入了解太多涉及服务器、数据库的内容，对于网站交互的响应与反馈、dom的操作、JS的数据驱动等落地应用知识还是很缺乏，基本想要建立起一个专属的博客还是比较困难；
3. 由于花在应用练习的时间比较多，对于理论知识没有牢牢记住，如果涉及到相关的面试题，还是很虚的，所以还是需要回顾之前任务的深度思考，整理好来背诵记住，应该会使代码思考时间会大大减少；
4. 同样没有完全理解和记住理论知识，在练习的过程中需要逐步验证，没有做到一次性编写完成，所以花费的时间还是比较多，不够熟练，而且部分样式尤其布局容易堆积重复代码，没有做到优化性能和简洁代码量，不知道还需不需要通读经典书籍如《css权威指南（第四版）》、《css揭秘》；
四、 接下来的计划
1. 整理之前任务的深度思考问题，并整理好答案进行背诵，同样也寻找前端相关的面试题及答案进行牢记；
2. 在开启JS学习之前，阅读完《Javascript高级程序设计》、《Javascript语言精粹》、《ES6标准入门》、《你不知道的JS》;
3. 目标：做出一个h5专属网页如博客，能够正常运行和交互
进阶：做出一个小程序的网页游戏
返回列表
评论