发表于: 2019-01-05 21:24:19
1 726
今天完成的事情,任务8首页,内容部分做完,页脚只剩友情链接。
遇到问题,做如何“学习内容的时候”,碰到了内容在500px之后就会崩掉的情况。发现空盒子里面忘记加入属性了,导致没有高度宽度,就只剩一个标签。
遇到问题2,写人物展示的时候,设置左右间距的时候,会自动崩掉。问师兄,师兄让我使用卡片组件去写。
.card
卡片组件给我们提供了一个带有边框的文字,我们可以在里面放置文本,图片 标题等等东西。使用flex可以轻松使其对齐。
card是卡片组件的父级。
在body里面写入内容。
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
遇到问题3,
bootstrap卡片组件里面自带边框,导致设置边距特别困难
,最后解决方法,给他的子级设置边框,把父级边框取消掉,重新设置背景颜色。
遇到问题4,
战略合作内容里面的图片,图片无法居中,图片居中应该挺简单的,结果卡了很长时间,发现,用栅格布局行列布局之后,栅格系统会自动给图片一个大小
宽高,把他当做盒子,设置背景颜色,图片居中就行了。但是五张图片,栅格布局12行根本不够分,flex布局得话,要给盒子固定宽高。仔细看了一下关于栅格系统的知识,col分为12列,五个项目,12列不够分,但是栅格系统并不要求,12列全部被占用。
col-xl-2每列
今天收获,发现对栅格系统,bootstrap越来越熟悉了。今天学到了 卡片阵列以及,边框阴影。
如果,第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置。
明天计划准备小课堂,写完首页。
评论