发表于： 2019-12-28 00:13:58
4 1195
今天完成的事
1.给nav部分添加一些col类 完善样式排布
<div class="col-md-8 navbar-div" id="navbar-collapse">
<ul class="navbar-nav navbar-nav-ul">
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/hall/recommend">职业殿堂</a>
</li>
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/occupation/1/preface">线上学习</a>
</li>
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/offline">线下学习</a>
</li>
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/login/0/">我的学院</a>
</li>
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/material/document////////">学习资料</a>
</li>
<li class="col-md-2 nav-ul-li ">
<a href="http://www.jnshu.com/community?mark=1">合作院校</a>
</li>
</ul>
</div>
.navbar-div {
float: right !important;
.navbar-nav-ul {
float: right !important;
.nav-ul-li {
height: 97px ;
line-height: 97px;
a {
display: block;
height: 97px;
text-decoration: none;
height: 97px;
font-size: 16px;
line-height: 54px;
text-align: center;
cursor: pointer;
}
a:hover, .navbar-default .navbar-nav > li.active > a {
border-bottom: 4px solid white;
color: #fff;
background: #29b078;
}
}
}
}
2.架构报名快速入口组件 并添加样式同时调整
<div class="siderbar">
<img class="side-bar-new-year" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/side-bar-new-year.png">
<div class="quick-entry">
<ul>
<li >
<i class="fa fa-gift" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">免费试学</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">北京报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">上海报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">广州报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">深圳报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">武汉报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">成都报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">郑州报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">西安报名</a>
</li>
<li >
<i class="fa fa-university" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">萌新报名</a>
</li>
<li >
<i class="fa fa-bullhorn" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">外门弟子</a>
</li>
<li >
<i class="fa fa-diamond" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">活动集锦</a>
</li>
<li >
<i class="fa fa-windows" ng-class="li.author"></i>
<a href="http://www.jnshu.com/daily/17743?uid=3576" class="ng-binding">电脑租赁</a>
</li>
</ul>
</div>
<div class="left-bar-btn" ng-click="vm.quickSidebar()">
<img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/right-bar_07.png">
<span>技能树</span>
<img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/right-bar_15.png">
</div>
</div>
<!--报名快速入口组件-->
@import "class.css" ;
.siderbar {
z-index: 99999;
position: fixed;
top: 40%;
left: 15px;
.side-bar-new-year {
position: absolute;
left: -54px;
top: -161px;
z-index: -1;
width: 240px;
height: 520px;
max-width: none;
}
.quick-entry {
width: 117px;
padding: 5px 18px;
border-radius: 4px;
font-size: 12px;
line-height: 21px;
color: #fff;
ul {
padding-left: 13px;
}
.quick-entry ul li i {
width: 16px;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-gift::before {
content: "\f06b";
}
.fa-institution::before, .fa-bank::before, .fa-university::before {
content: "\f19c";
}
.fa-bullhorn::before {
content: "\f0a1";
}
.fa-diamond::before {
content: "\f219";
}
.fa-windows::before {
content: "\f17a";
}
.ng-binding {
display: inline-block;
color: #fff;
}
}
}
@media only screen and (max-width: 767px) {
/*.quick-siderbar {*/
/*display: none;*/
/*}*/
.siderbar {
left: -140px;
}
.left-bar-btn {
display: block;
position: absolute;
right: -50px;
top: 131px;
width: 27px;
height: 100px;
padding: 7px;
font-size: 12px;
color: #fff;
background: linear-gradient(#78cca9, #59c196);
border: 1px solid #24a06c;
border-left: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.siderbar:hover {
left: 0;
}
.left-bar-btn img:nth-of-type(2) {
margin-right: 2px;
transform: rotate(0deg);
}
.siderbar:hover .left-bar-btn img:nth-of-type(2) {
transform: rotate(180deg);
}
}
明天的计划
1.完善快速报名组件的移动端自适应样式
2.架构轮播图
3.完成其他主页内容
遇到的问题
1.没学到js AngularJS中的小图标部分没有素材去实现
看来得加快进度
今天的收获
1.理解了维护代码怎一个乱子了得
返回列表
评论