发表于： 2019-12-29 23:52:27
1 1086
今天完成的事情
1.拆解出联系方式组件
<div class="contact">
<div class="qq-left ng-scope" ng-if=" $state.current.name !='skill.preview' && $state.current.name !='skill.school.skill' && $state.current.name != 'skill.school.archive' && $state.current.name !='skill.webResource'">
<!-- ngRepeat: li in vm.contentQQ --><div class="right-bar right-bar-qq ng-scope" ng-repeat="li in vm.contentQQ">
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=88fa3addbb6b39f88da5f1de7ce80afae01e533fe7b45db2e177535f8d65eda9">
<img src="http://pub.idqqimg.com/wpa/images/group.png">
</a>
<p class="ng-binding">QQ 18群</p>
</div><!-- end ngRepeat: li in vm.contentQQ -->
<div class="right-bar right-bar-phone">
<a>
<p><img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/right-bar_11.png"></p>
<p>010-59478634</p>
</a>
</div>
<div class="right-bar-btn">
<img class="img-1" 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 class="right-bar right-bar-adviser">
<p><img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/girl.png"></p>
<p>修真院形象大使</p>
<img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/adviser.png" class="adviser-icon">
</div>
</div>
</div>>
2.拆解出样式并且根据情况作出调整
@import "class.css" ;
.contact {
.qq-left {
position: fixed;
top: 50%;
margin-top: -80px;
right: -137px;
z-index: 9999;
width: 137px;
background: #59c196;
text-align: center;
border-radius: 5px;
.right-bar:nth-of-type(1) {
border-bottom: 2px solid #59c196;
}
.right-bar:nth-of-type(2) {
border-top: 2px solid #59c196;
}
.right-bar-qq {
padding-top: 20px;
}
.right-bar {
padding: 10px 0 20px;
background: #fff;
border: 4px solid #59c196;
border-radius: 8px;
a {
text-decoration: none;
img {
margin-right: 7px;
}
img {
max-width: 100%;
}
}
p {
font-size: 14px;
color: #59c196;
margin: 10px 0 0;
}
}
.right-bar-phone {
background: #fff;
border: 4px solid #59c196;
border-radius: 8px;
}
.right-bar-btn {
display: block;
position: absolute;
left: -27px;
top: 40px;
width: 27px;
height: 116px;
padding: 7px;
font-size: 12px;
color: #fff;
background: linear-gradient(#78cca9, #59c196);
border: 1px solid #24a06c;
border-right: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
.img-1 {
height: 10px;
}
.right-bar-btn img:nth-of-type(1) {
margin-top: -2px;
margin-left: -2px;
margin-bottom: 4px;
}
.right-bar-btn img:nth-of-type(2) {
margin-left: 2px;
transform: rotate(180deg);
}
}
.right-bar-adviser {
cursor: pointer;
p {
font-size: 14px;
color: #59c196;
margin: 10px 0 0;
img {
cursor: default;
}
}
.adviser-icon {
position: absolute;
left: 1485px;
top: -200px;
height: 564px;
max-width: none;
}
}
.right-bar-adviser:hover {
.adviser-icon {
position: absolute;
left: -484px;
top: -200px;
height: 564px;
max-width: none;
}
}
}
.qq-left:hover {
right: 0;
}
}
@media only screen and (max-width: 767px) {
.contact {
display: none;
}
}
3.调整导航栏里的分布样式
舍弃掉使用栅格系统排列
给ul标签加上flex属性 并且两端对齐均匀排列
.navbar-nav-ul {
float: right !important;
width: 100%;
display: flex;
justify-content: space-between;
4.拆解出轮播图部分
明天计划的事
1.完成轮播图部分
2.完成其他主体内容
遇到的问题
1.联系方式组件的图片总是不显示
当时地址是 src="//pub.idqqimg.com/wpa/images/group.png"
根据官网文件里复制出来的
后面在前面添加了http只有才正常显示
http://pub.idqqimg.com/wpa/images/group.png
以后无论什么url地址一定要将http协议加上
今天的收获
1.在使用栅格系统的过程中感受到了一些他的局限性
有时候不能很好的匹配要求 使用栅格系统反而是个累赘
返回列表
评论