发表于: 2017-03-06 22:47:58
3 721
今天完成的事情
1、开始了任务7,写了首页和投票页
投票页使用了bootstrap的栅格系统进行布局。
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
使用三个row,里面再嵌套三个col,完成了main部分的布局。
header部分和footer部分通过设置height然后position:fixed,完成了布局
首页没有使用bootstrap,首页因为页面较为简单,通过设置了多个div完成了布局,but,在ps量距离时,突然电脑蓝屏,首页代码全没了。
明天计划的事情
1、完成任务7的结果页,重新开始首页,完善投票页。
2、如完成任务7,则开始任务8
3、阅读代码规范
遇到的问题
今天占时没有遇到什么问题
收获
小课堂:inline、block、inline-block元素之间有什么区别
inline 内联元素又名行内元素,和其他元素都在一行上; 如:a,span,br,i
block 每个块级元素,都从新的一行开始,并且其后的元素也另起一行。如 :div、p、ul、table
inline-block 内联块状元素,就是同时具备内联元素、块状元素的特点,如:img,input
block元素的特点
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
inline元素特点:
1、和其他元素都在一行上;直到一行排不下,换下一行。
2、元素的高度、宽度及顶部和底部边距不可设置;但水平方向可以设置,如margin-left,margin-right,padding-left,padding-right
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
4、只能容纳文本或者其他内联元素
inline-block元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置
评论