发表于: 2019-08-03 01:55:56
1 887
今天完成的事
1.给优秀学员部分每个方块都添加在不同屏幕分辨率下不同的布局样式
<P class="col-lg-3 col-md-3 col-sm-6 col-xs-12 p2">
2.调整样式栅格系统默认样式
@media screen and (min-width: 992px) {
.div5 .col-lg-3.col-md-3 {
width: 20%;
margin: 2.5%;
}
}
@media screen and (min-width: 425px) {
.div5 .col-sm-6 {
width: 48%;
margin: 1%;
}
}
@media screen and (max-width: 425px)
{
.div5 .col-xs-12 {
width: 98%;
margin: 1%;
}
}
3.修改页脚部分文字加购物
<footer class="footer">
<div class="container">
<div class="row">
<div class="div8 col-lg-4">
<p>技能树-改变你我</p>
<p>关于我们 | 联系我们 | 合作企业</p>
</div>
<div class="div8 col-lg-6">
<p>旗下网站</p>
<p>草船云孵化器      最强IT训练营</p>
<p>葡萄藤轻游戏      桌游精灵</p>
</div>
<div class="div10 col-lg-2">
<p>微信公众平台</p>
<img src="1280.png">
</div>
</div>
</div>
</footer>
3.调整文字布局与样式
.div8 {
display: flex;
height: 100px;
flex-direction: column;
justify-content: space-between;
margin: 20px 0px;
color: white;
}
4.完善响应式布局
<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>
<p>关于我们 | 联系我们 | 合作企业</p>
</div>
<div class="div8 col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>旗下网站</p>
<p>草船云孵化器      最强IT训练营</p>
<p>葡萄藤轻游戏      桌游精灵</p>
</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>
5.完成备案号部分并调整样式
<div class="footer1">
Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号
</div>
.footer1 {
background-color: rgb(27,163,110);
border: 2px solid rgb(38,193,132);
text-align: center;
color: white;
}
完成页面绝大部分
明天计划的事
1.完善页面一不足的部分
2.开始页面二
3.学习侧边导航栏的知识
遇到的问题
1.不知道真实项目里一个页面的CSS代码有多少行
我现在都是几百行了
收获
1.对如何修改bootstrap栅格系统的默认样式更加熟练
评论