发表于: 2018-08-26 23:57:56
1 727
今天完成的事情:
重新使用盒子模型做好了任务3的布局,单位从PX更换为了rem玩成了自适应,使用css外联的方式重新写了任务3的代码。
建立一个后缀为.css的文件,把style的代码写在里面,在HTML的head标签里面写下:
<limk renl="stylesheet" href="..在此处链接节进css文件">
使用盒子模型的margin-left和margin-bottom两个属性布局了任务3页面左上角的箭头,并把PX单位换算成了rem单位,使图片可以自适应移动端的界面。
给葡萄藤LOG的父元素设置了text-align:center属性,使葡萄藤LOG达成了位置的居中。
text-align: center;
利用给父元素设置文本居中,子元素继承父元素居中属性的情况下,给子元素设置了text-align:left 文本排序:左, 完成了任务3页面的中间在文字在多行时,保持最后一行文字靠左排列,整体居中的效果。
页面下方的两个图标使用浮动,float:left float right 使两个图标的父元素框分别布局在左右两侧, 最后盒子模型里margin的top right align 三个属性完成了布局,这里同样用到了text-align 来完成图片和文本的居中.
明天计划的事情:
学习如何改变表单元素样式,重新温习定位属性的相对、绝对、浮动三个属性。查看学习任务4所需要的相关资料。
遇到的困难:
今天在做任务3页面中间文字的布局时,第一次做出的效果可以达到居中,但是在分辨率缩小,文字多行的情况下,段落最后的文字也是居中的,无法达到像是示例图那样,末端文字靠左排列。尝试了给父元素设置文本居中的情况下,再次设置了文本靠左,结果两个属性只能实现一个文本居中,文本靠左的属性无效。
随后尝试了绝对定位,使文字在多行显示的情况下完成了末端靠左侧排列并整体居中,但是当页面放大时,文字变为单行排列时又无法居中了。后面查到了text-align:left text-align;center 两个属性同事使用的方法,因为text-align;center属性可以继承的关系,在子元素继承了文本居中属性的前提下,自身可以设置文本居左的属性,产生在文字多行的情况下靠左,单行的情况下居中。然后给元素设置一个和合适的宽度来完成多行下的居中效果。
收获:
通过今天完成的任务3再次加深了对盒子模型的理解,对rem单位的原理理解的更加清晰,学会了文本居中的情况下同时靠左排列。
评论