发表于： 2020-06-27 21:48:38
1 1053
今天完成的事情：
今天依然在页面1，
遇到的问题：
1.关于css响应式布局，不使用栅格系统无法达到任务8，9那样的缩小页面使得元素有序的改变位置，缩小页面只会使元素挤压变形，不适应于小屏幕
重写代码：
<div class="css-sprites">
<div class="part1">
<div class="photo1"></div>
<h3>高效</h3>
<div class="word">将五到七年成长时间，缩短到一年到三年</div>
</div>
<div class="part1">
<div class="photo2"></div>
<h3>规范</h3>
<div class="word">标准的实战教程，不会走弯路</div>
</div>
<div class="part1">
<div class="photo3"></div>
<h3>人脉</h3>
<div class="word">同班好友，同院学长，技术大师，入学就入职脉圈，为以后铺平道路</div>
</div>
<div class="part2">
<div></div>
<div class="word-two1">
<img src="./images/src/技能树首页_06.jpg"></a>
<span>12400</span>
<p class="">累计学习人数</p>
</div>
<div class="word-two2">
<img src="./images/src/技能树首页_06.jpg">
<span>12400</span>
<p class="">累计学习人数</p>
</div>
</div>
</div>
css:
.css-sprites{width:80%;height:250px;margin:0 auto;padding-top:100px;display:flex;justify-content:space-between}.part1{width:100%;height:70%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin:0 5%}.part2{width:100%;height:70%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.photo1{background:url("./images/src/技能树首页雪碧_02.jpg") no-repeat -1%;width:60px;height:70px}.photo2{background:url("./images/src/技能树首页雪碧_02.jpg") no-repeat 50%;width:60px;height:70px}.photo3{background:url("./images/src/技能树首页雪碧_02.jpg") no-repeat 100%;width:60px;height:70px}.part2{border-left:2px dashed #dedede}.word-two1 img{height:20px;width:20px}.word{height:30%}.word-two2{margin-top:30px}@media (max-width: 790px){.css-sprites{width:50%}}
关于css如何实现响应式，和css与bootstrap框架有何区别与优缺点？
2.不懂如何提取组件库
明天的计划：
解决当前问题
返回列表
评论