<>
.zx {
right: 12px;
}
.yd {
display: none;
}
.pc {
display: none;
}
.zx .cxhdpic3 {
position: absolute;
right: 0 !important;
top: -138px !important;
z-index: 99999;
width: 123px !important;
display: none;
}
.zx img {
display: block;
width: 100%;
}
.returnmap {
display: none;
}
.header {
width: 93%;
height: 80px;
box-shadow: 0 3px 9px rgb(2282282280.3);
padding: 0 3.5%;
}
.header h2 {
float: left;
width: 150px;
margin: 20px 0 0 0;
}
.header .fl {
float: left;
width: 500px;
margin: 30px 0 0 38px;
}
.header .fl li {
position: relative;
float: left;
margin-right: 22px;
}
.header .fl li:last-child {
margin-right: 0;
}
.header .fl li a {
display: block;
height: 46px;
font-size: 16px;
color: #474747;
}
.header .fl li a:hover {
color: #d5221e;
}
.header .fl li a.nav_on {
color: #d5221e;
border-bottom: 4px #d5221e solid;
}
.header .fdnav {
display: none;
position: absolute;
left: -160px;
top: 50px;
width: 521px;
background: rgba(2552552551);
box-shadow: 0 0 10px rgba(0000.1);
z-index: 100;
overflow: hidden;
}
.header .fdnav .fdnav_main {
width: 522px;
margin: 0 auto;
padding: 1px 0 0;
overflow: hidden;
}
.header .fdnav .fdnav_main p {
float: left;
width: 260px;
height: 64px;
border-right: 1px #f9f9f9 solid;
border-bottom: 1px #f9f9f9 solid;
}
/* .header .fdnav .fdnav_main p.jcdl_icon{width: 300px;} */
.header .fdnav .fdnav_main p a {
display: block;
width: auto;
}
.header .fdnav .fdnav_main p img {
display: block;
margin: 0 auto;
float: left;
margin-right: 10px;
width: 22px;
}
.header .fdnav .fdnav_main p span {
float: left;
color: #7b7b7b;
margin-right: 0;
font-size: 14px;
line-height: 64px;
}
.header .fdnav .fdnav_main p.twolin span {
line-height: 20px;
}
.header .fdnav .fdnav_main p.li_last {
border-right: 0;
}
.header .fdnav .fdnav_main p:hover span {
color: #d50212;
}
.header .fdnav .fdnav_main p em {
float: left;
width: 36px;
margin: 14px 6px 0 18px;
height: 36px;
border-radius: 50%;
}
.header .fdnav .fdnav_main p em img {
width: 100%;
}
.header .fdnav .fdnav_main p.java_icon em {
margin-top: 10px;
}
.header .fl li:hover .fdnav {
display: block;
}
.header .head_sub {
float: right;
width: 328px;
height: 38px;
border: 1px #dee0ea solid;
border-radius: 5px;
margin: 20px 0 0 90px;
}
.header .head_sub .head_tit {
width: 100%;
height: 100%;
position: relative;
}
.header .head_sub .head_tit b {
float: left;
width: 85px;
height: 26px;
line-height: 26px;
margin-top: 6px;
border-right: 1px #ededed solid;
font-size: 15px;
color: #828282;
text-align: center;
font-weight: 100;
}
.header .head_sub .head_tit p {
font-size: 15px;
color: #929292;
float: left;
line-height: 38px;
padding-left: 10px;
width: 212px;
cursor: pointer;
}
.header .head_sub .head_tit p img {
position: absolute;
width: 8px;
right: 12px;
top: 17px;
}
.header .head_sub .head_tit .xqalls {
position: absolute;
padding: 5px 0 5px 10px;
width: 320px;
max-height: 150px;
border: 1px #dee0ea solid;
border-top: none;
left: -1px;
top: 36px;
background: #fff;
overflow-y: auto;
z-index: 6;
display: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.header .head_sub .head_tit .xqalls ul li {
line-height: 30px;
}
.header .head_sub .head_tit .xqalls ul li a {
font-size: 14px;
color: #838383;
display: block;
width: 100%;
}
.header .head_sub .head_tit .xqalls ul li a:hover {
color: #216ef4;
}
.header .head_sub .head_tit .xqalls::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.header .head_sub .head_tit .xqalls::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 5px;
background: #216ef4;
}
.header .head_sub .head_tit .xqalls::-webkit-scrollbar-track {
width: 5px;
height: 1px;
}
.header .head_sub:hover .head_tit b {
display: none;
}
.header .head_sub:hover .head_tit .xqalls {
display: block;
}
.banjava {
background-size: 480px;
padding: 40px 0 50px;
width: 93%;
margin: 0 auto;
}
.banjava h2 {
font-size: 24px;
color: #151515;
font-weight: bold;
}
.banjava h2 span {
font-size: 28px;
}
.banjava p span {
display: inline-block;
height: 37px;
font-size: 18px;
color: #fff;
line-height: 37px;
border-radius: 19px;
background: #0cc7a5;
padding: 0 18px;
margin: 15px 0 0 0;
}
.box ul li {
background: #fff;
}
.box ul li .boxlidiv {
background: #f5f9ff;
padding-bottom: 16px;
}
.box ul li h3 span.no {
display: none;
}
.box ul li h3 span.no2 {
display: none;
}
.box ul li .boxbot2 {
border-radius: 10px;
box-shadow: inset 0 0 50px rgba(1752142490.56);
background: #f5f9ff;
margin-top: 24px;
padding: 28px 25px;
}
.box ul li .boxbot2 h4 {
font-size: 14px;
color: #000;
font-weight: bold;
margin-bottom: 8px;
}
.box ul li .boxbot2 span {
display: block;
font-size: 12px;
color: #000;
line-height: 22px;
}
.box ul li .boxa {
overflow: hidden;
padding: 0 0 15px;
}
.box ul li .boxa span {
color: #fff;
font-weight: bold;
background: #0cc7a5 url("/subject/javamap/images/pcdbg1.jpg") no-repeat
right bottom;
padding: 8px 6%;
}
.box ul li .boxa a {
width: 89%;
color: #000;
box-sizing: border-box;
line-height: 16px;
font-weight: normal;
border-bottom: 1px #0cc7a5 dashed;
overflow: hidden;
padding: 12px 0 12px 40px;
margin: 0 auto;
}
.box ul li .boxa a:before {
left: 0;
top: 50%;
width: 35px;
height: 35px;
background: url("/subject/javamap/images/pcdvid1.png") no-repeat 0 0;
margin-top: -17.5px;
}
.box ul li .boxa a:hover {
color: #0cc7a5;
}
.box ul li img.pc {
display: block;
max-width: 236px;
margin: 30px auto 0;
}
.box ul li img.yd {
display: none;
}
.box ul li .boxa a i {
display: block;
}
@media screen and (max-width: 1650px) {
.banjava {
background-size: 394px;
padding: 35px 0 40px;
}
}
@media screen and (max-width: 500px) {
.wrap {
overflow: hidden;
}
.zx {
display: none;
}
body {
min-width: 100%;
}
.ban h2 {
font-size: 1.3rem;
padding: 0 20px 0 0;
}
.ban h2 em {
display: block;
}
.ban h2 span {
display: inline-block;
}
.ban p {
font-size: 0.9rem;
padding: 0 3%;
}
.ban {
padding: 30px 0;
}
.ban h2 i {
right: -55px;
top: -10px;
width: 50px;
}
.box ul li {
float: none;
width: 98.1% !important;
margin: 0 1% 5%;
}
.box ul li:after,
.header .fl {
display: none;
}
.boxbotmain {
width: 92%;
min-width: auto;
padding-right: 10px;
}
.header h2 {
width: 102px;
margin: 25px 0 0 13px;
}
.header .head_sub {
position: absolute;
right: 4%;
width: 186px;
}
.header .head_sub .head_tit b {
font-size: 0.9rem;
width: 68px;
margin-right: 5px;
display: none;
}
.header .head_sub .head_tit p {
font-size: 0.9rem;
float: none;
width: auto;
}
.header .head_sub .head_tit .xqtop {
width: 90%;
height: 38px;
overflow: hidden;
}
.header .head_sub .head_tit .xqalls {
width: 176px;
}
.boxbotmain p span.span2 {
width: 76%;
}
.banjava {
background: none;
padding: 30px 0;
}
.banjava h2 {
font-size: 19px;
text-align: center;
}
.banjava h2 span {
font-size: 22px;
display: block;
}
.banjava p {
width: 88%;
background: #caf3eb;
border-radius: 50px;
text-align: center;
margin: 15px auto 0;
}
.banjava p span {
width: 90%;
height: auto;
font-size: 15px;
text-align: center;
line-height: 22px;
border-radius: 50px;
background: -moz-linear-gradient(to bottom#0cc7a5#08ad8f);
background: linear-gradient(to bottom#0cc7a5#08ad8f);
padding: 7px 0;
margin: 0;
}
.banjava p span em {
display: block;
opacity: 0;
height: 0;
}
/* .box ul li .boxlidiv{padding-bottom: 0;} */
/* .box ul li{background: #f5f9ff;} */
.box ul li h3 span {
display: inline !important;
}
.box ul li h3 span.no2 {
font-size: 14px;
}
.box ul li.boxli5 h3 {
line-height: 60px;
}
.box ul li .boxa a i {
display: inline;
}
.box ul li .boxa {
padding: 20px 4% 15px;
}
.box ul li .boxa span {
font-size: 17px;
color: #000;
font-weight: bold;
background: none;
padding: 0;
}
.box ul li .boxa a {
width: 100%;
font-size: 14px;
color: #fff;
font-weight: bold;
line-height: 1.4rem;
border-bottom: none;
box-sizing: border-box;
border-radius: 10px;
background: #fca356 url("/subject/javamap/images/yddbg1.jpg") no-repeat
right bottom;
background-size: 60%;
overflow: hidden;
margin: 0.8rem 0 0 0;
padding: 17px 4% 17px 22%;
}
.box ul li .boxa a:hover {
color: #fff;
}
.box ul li .boxa a:before {
left: 4.5%;
top: 50%;
width: 45px;
height: 45px;
background: url("/subject/javamap/images/yddvid1.jpg") no-repeat;
background-size: 100%;
margin-top: -22.5px;
}
.box ul li .boxa a:nth-child(odd) {
background: #89bf6b url("/subject/javamap/images/yddbg2.jpg") no-repeat
right bottom;
background-size: 62%;
}
.box ul li .boxa a:nth-child(odd):before {
background-image: url("/subject/javamap/images/yddvid2.jpg");
}
.box ul li img.pc {
display: none;
}
.box ul li img.yd {
display: block;
padding-top: 30px;
background: #fff;
}
.returnmap {
position: fixed;
left: 0;
top: 70%;
font-size: 13px;
color: #fff;
height: 25px;
line-height: 25px;
border-radius: 0 12px 12px 0;
background: rgba(631662550.8);
padding: 0 16px 0 20px;
z-index: 10;
}
.returnmap:before {
position: absolute;
left: 3px;
top: 6px;
width: 13px;
height: 13px;
background: url("/Wap/images/leftjt.png") no-repeat;
background-size: 100%;
content: "";
}
}
学习路线图说明
阶段一基础入门：入门前端工程师的必备技能，能够完成PC端和移动端的静态页面，具备1:1还原设计图的能力。
阶段二技术进阶：进阶成为合格的初级前端工程师，能够实现页面的交互效果，实现与后端的数据联通。
阶段三Vue开发：成为中高级前端工程师的核心能力，能够实现企业级项目的功能需求，并具备开发内容管理系统、企业后台等项目的经验。
阶段四小程序&多端开发：成为中高级前端工程师的必备能力，能够满足市面上90%+公司的招聘需求，并具备移动端项目研发经验。
阶段五鸿蒙应用开发：开拓前端工程师职业新边界，具备从0-1开发鸿蒙4.0项目研发经验。
阶段六React&面试与就业：成为高薪中高级前端工程师的进阶技能，同时能够完善简历，轻松应对企业面试场景与面试题目。
