发表于: 2019-08-25 01:48:31
1 914
今天完成的事
按照师兄的提示进行修改
1.因为任务三的一些图标使用了雪碧图 然后使用时会带有白色背景
现在使用画图填充背景图颜色 将雪碧图背景颜色修改为与网页同背景色的RGB(250,250,250)
2.修改QQ图标与电话号码在移动端屏幕条件下的显示
col-xs-6
@media screen and (max-width:375px) {
.div1 {
width: 100% !important;
padding: 0 !important;
}
.number {
width: 100% !important;
}
}
3.消除虚线在移动端的显示
@media screen and (max-width: 768px) {
.four0 {
border: 0px
}
}
4.调整学习人数部分的居中位置
.div4 {
width: 200px;
margin: 40px auto 60px auto;
padding-bottom: 50px;
}
5.给友情链接添加hover样式下划线
.footer0-p:hover{
color: #1b6d85;
text-decoration: underline;
}
6.调整旗下网站部分的架构及样式 将一些p标签更改为a标签
<footer class="footer">
<div class="container">
<div class="row">
<div class="div8 col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>技能树-改变你我</p>
<div>
<a class="footer-p">关于我们</a> |
<a class="footer-p">联系我们</a> |
<a class="footer-p">合作企业</a>
</div>
</div>
<div class="div8 col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>旗下网站</p>
<div>
<a class="footer-p">草船云孵化器</a>
  
<a class="footer-p">最强IT训练营</a>
</div>
<div>
<a class="footer-p">葡萄藤轻游戏</a>
  
<a class="footer-p">桌游精灵</a>
</div>
</div>
<div class="div8 div9 col-lg-2 col-md-2 col-sm-2 col-xs-12">
<p>微信公众平台</p>
<img src="1280.png">
</div>
</div>
</div>
</footer>
7.调整微信公众号的部分
由栅格系统的2份调整为三份
<div class="div8 div9 col-lg-3 col-md-3 col-sm-3 col-xs-12">
<p>微信公众平台</p>
<img src="1280.png">
</div>
8.给职业页面的方向部分添加herf跳转
并且给每个部分设置ID
<div class="container">
<div class="row">
<ul class="breadcrumb div2-2 div3-1">
<li><p>方向 :</p></li>
<li><a href="#" class="ul2-a ul3-a" >全部</a></li>
<li><a href="#1" class="ul2-a ul3-a" >前端开发</a></li>
<li><a href="#2" class="ul2-a ul3-a" >后端开发</a></li>
<li><a href="#3" class="ul2-a ul3-a" >移动开发</a></li>
<li><a href="#4" class="ul2-a ul3-a" >整站开发</a></li>
<li><a href="#5" class="ul2-a ul3-a" >运营维护</a></li>
</ul>
</div>
</div>
9.给职业页面的表格hover样式添加过度效果
.take8-3-div21:hover {
transform: rotate(360deg);
}
.take8-3-div22:hover {
transform: rotate(-360deg);
}
.take8-3-div23:hover {
transform: rotateY(360deg);
}
.take8-3-div24:hover {
transform: rotateX(360deg);
}
.take8-3-div25:hover {
transform: rotate3d(360,360,360,360deg);
}
transition: 1.5s;
10.完善其他一些细节
11.开始任务10
下载任务素材
明天的计划
1.开始任务9
2.依据任务9的要求调整一些内容
3.开始任务10
遇到的问题
今天的收获
1.学会了如何给元素添加不同旋转动画效果
评论