规划在线
-
2023年3月18日发(作者：电热毯原理)学成在线职业规划页⾯
学成在线职业规划页⾯
为什么这么赶呢，主要是PS⽩嫖期快过了1/3了，总得赶在试⽤期之前做完嘛……
之前的进度
第⼀版跟着视频做的，也写了步骤分解，详情可以看这个：。
完整的页⾯之前做完了，效果图看着⾥：
源码在上，新写完的在v2⽂件夹⾥。
职业规划页⾯的实现
做的还是挺像的（点头），对⽐图如下：
PSD完成图
和⾸页⽐起来这个其实做的很快了，原因有以下⼏点：
ow的部分没写，这个部分下个礼拜会补上，下3p就是讲overflow溢出的部分了。
2.这个页⾯没有⾸页这么复杂，对⽐起来，⾸页可以说是所有页⾯当中最复杂的了。
3.头部和尾部已经完成了，可以直接复制粘帖。换句话说⼯作量只有中间的body部分
4.样式都已经写的差不多了，以课程为例，其实这部分的内容我是直接复制粘帖的，唯⼀要修改的⼀些地⽅就是样式，但是因为CSS的
样式有⼀个特性：层叠性，所以只要覆写⼀部分的样式就可以了。
整个职业规划页⾯的CSS⽤了不到⼀百⾏：
/*beginofcareerplanning*/
/*beginofbanner*/
.career-planning-banner{
background:url("../img/")no-repeat;
background-size:cover;
height:370px;
}
/*endofbanner*/
/*beginofcareerpath*/
.career-pathullia{
padding:020px;
border-right:1pxsolid#ccc;
border-left:0;
}
.career-pathulli:first-childa{
padding-left:10px;
}
.career-pathulli:last-childa{
border-right:0;
padding-right:0;
}
.ed{
color:#00a4ff;
font-weight:600;
}
/*endofcareerpath*/
/*beginofdetailedcareerpath*/
.career-path-detail{
margin:10px040px0;
margin:10px040px0;
}
.career-level{
margin-bottom:10px;
padding:43px000;
background-color:#fff;
min-height:100px;
}
.career-level>div{
float:left;
}
.engineer-level{
margin:012px028px;
text-align:center;
}
.engineer-title{
margin:34px039px0;
color:#ba7ce1;
font-size:20px;
font-weight:600;
}
.engineer-divider{
position:relative;
}
.engineer-dividerimg{
position:absolute;
top:8px;
}
.career-desc{
margin:052px060px;
width:340px;
}
.career-desc-hdh3{
margin-bottom:3px;
line-height:36px;
color:#000;
font-size:20px;
font-weight:400;
}
.-desc{
font-size:14px;
color:#666;
}
.-descp{
margin-bottom:35px;
}
.current-price{
color:#000;
margin-right:21px;
}
.current-amount{
color:#ff2d2d;
}
.current-amount-in-number{
font-size:19px;
}
.original-price{
color:#999;
text-decoration:line-through;
}
.original-amount{
color:#ff7c2d;
}
.-product-suggestion-bd{
margin:-20px045px0;
}
}
.-product-suggestion-bdli{
box-shadow:3px3px0.5emrgb(000/30%);
}
/*endofdetailedcareerpath*/
/*endofcareerplanning*/
⽐起来，⾸页⽤了469⾏，算起来差不多是⾸页的1/5。
HTML部分的代码如下：
学成⽹-职业规划
⾸页
课程
职业规划
type="button" value="" style="background:url(./img/)" /> 个⼈中⼼ qq-leishui
初级⼯程师
从零基础⼊门到应⽤流⾏框架快速搭建⽹页
适合⼈群：
零基础，对前端有兴趣的学员
学习⽬标：
从学习前端html、css基础开始，到H5、CSS3的升级，再到JavaScript、jQuery实现交互页⾯！到H5、CSS3的升级，再到JavaScript、jQuery实现
交互页⾯！
阶段价格
>￥999
>
原价￥1799
src="./img/"
alt="hotpick"
srcset=""
class="hot-pick"
/>
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
初级⼯程师
从零基础⼊门到应⽤流⾏框架快速搭建⽹页
适合⼈群：
零基础，对前端有兴趣的学员
学习⽬标：
从学习前端html、css基础开始，到H5、CSS3的升级，再到JavaScript、jQuery实现交互页⾯！到H5、CSS3的升级，再到JavaScript、jQuery实现
交互页⾯！
阶段价格
>￥999
>
原价￥1799
src="./img/"
alt="hotpick"
srcset=""
class="hot-pick"
/>
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
初级⼯程师
从零基础⼊门到应⽤流⾏框架快速搭建⽹页
适合⼈群：
零基础，对前端有兴趣的学员
学习⽬标：
从学习前端html、css基础开始，到H5、CSS3的升级，再到JavaScript、jQuery实现交互页⾯！到H5、CSS3的升级，再到JavaScript、jQuery实现
交互页⾯！
阶段价格
>￥999
>
原价￥1799
src="./img/"
alt="hotpick"
srcset=""
class="hot-pick"
/>
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
ThinkPHP5.0博客系统实战项⽬演练
⾼级·1120⼈正在学习
学成在线致⼒于普及中国最好的教育。它与中国⼀流⼤学和机构合作，提供在线课程。
©2017年XTGGInc.保留所有权利。-沪ICP备11111111号
下载APP
突然发现没能好好写注释……瘫……趁着中午吃饭的时候次补上吧。
⼜发现有个⼩三⾓没做……做overflow的时候⼀起补上好了，这个功能也是能⽤CSS做的，图先切了，下周看下哪个效果⽐较好再决定⽤哪
个吧。