发表于: 2018-08-26 23:57:56

1 725


今天完成的事情:

  重新使用盒子模型做好了任务3的布局,单位从PX更换为了rem玩成了自适应,使用css外联的方式重新写了任务3的代码。

<link rel="stylesheet" href="../css3/task3.css">

  建立一个后缀为.css的文件,把style的代码写在里面,在HTML的head标签里面写下:

<limk renl="stylesheet" href="..在此处链接节进css文件">

.secede {
width: 1.428rem;
height: 1.428rem;
margin-top: 0.476rem;
margin-left: 0.476rem;
margin-bottom: 1.11rem;

  使用盒子模型的margin-left和margin-bottom两个属性布局了任务3页面左上角的箭头,并把PX单位换算成了rem单位,使图片可以自适应移动端的界面。

.center {
text-align: center;
}
.caption {

width: 4.786rem;
height: 1.851rem;
margin-bottom: 2.95rem;

  给葡萄藤LOG的父元素设置了text-align:center属性,使葡萄藤LOG达成了位置的居中。

.center {

text-align: center;


.text {
display: inline-block;
text-align: left;
height: 5.051rem;
font-size: 0.65rem;
margin: 0 18.75%;
line-height: 1.1rem;
}

  利用给父元素设置文本居中,子元素继承父元素居中属性的情况下,给子元素设置了text-align:left 文本排序:左, 完成了任务3页面的中间在文字在多行时,保持最后一行文字靠左排列,整体居中的效果。


.ico{ float: left;
margin-top: 18.5%;
margin-left: 2.4rem;
text-align: center;
}

.ico1 {
width: 2.221rem;
height: 2.221rem;}

.ico2 {float: right;
margin-top: 18.5%;
margin-right:2.4rem;
text-align: center;
}

.ico3 {
width: 2.221rem;
height: 2.221rem;

}
p{font-size: 0.65rem;}

  页面下方的两个图标使用浮动,float:left float right 使两个图标的父元素框分别布局在左右两侧, 最后盒子模型里margin的top right align 三个属性完成了布局,这里同样用到了text-align 来完成图片和文本的居中.

明天计划的事情:

 学习如何改变表单元素样式,重新温习定位属性的相对、绝对、浮动三个属性。查看学习任务4所需要的相关资料。

遇到的困难:

  今天在做任务3页面中间文字的布局时,第一次做出的效果可以达到居中,但是在分辨率缩小,文字多行的情况下,段落最后的文字也是居中的,无法达到像是示例图那样,末端文字靠左排列。尝试了给父元素设置文本居中的情况下,再次设置了文本靠左,结果两个属性只能实现一个文本居中,文本靠左的属性无效。

 随后尝试了绝对定位,使文字在多行显示的情况下完成了末端靠左侧排列并整体居中,但是当页面放大时,文字变为单行排列时又无法居中了。后面查到了text-align:left  text-align;center 两个属性同事使用的方法,因为text-align;center属性可以继承的关系,在子元素继承了文本居中属性的前提下,自身可以设置文本居左的属性,产生在文字多行的情况下靠左,单行的情况下居中。然后给元素设置一个和合适的宽度来完成多行下的居中效果。

收获:

  通过今天完成的任务3再次加深了对盒子模型的理解,对rem单位的原理理解的更加清晰,学会了文本居中的情况下同时靠左排列。


返回列表 返回列表
评论

    分享到