发表于： 2019-06-13 22:21:28
1 908
任务三总结
html设计
- 1. 划分布局，分为
<header>、<main>、<footer> - 2. 将返回按钮放到
<header>内，将logo和简介放到<mian>内，将两个图标放到<footer>内 
css设计
- 1. html的字体大小设置为625%，此时1rem=100px
- 2. 对设计图取色获得RGB值为
#68CDD5，将其设置为<body>的背景色 - 3. 设置返回按钮的高度，图片会成比例缩放；设置属性
display: block,同时加上一定的边距 - 4. 对于logo图片的父元素设置居中
- 5. 设置属性
text-align: left;,此时段落向左对齐，同时对简介设置左右内边距padding,做出文字段落的居中效果。单位使用% - 6. 设置文字的字体大小颜色等，同时设置一定高度，以便维持整个
<main>高度不变 - 7. 对
<footer>设置text-align: left;,这样<footer>的所有子元素都会继承该属性，使页面下方两个图标及其文字实现居中 - 8. 分别对两个图标使用左（右）浮动，同时加上与简介文字内边距同样大小的外边距
margin，实现图标与简介文字对齐的效果 
困难
一开始没有对简介文字设置固定高度，导致在改变网页的宽度时，简介文字一发生行数变化下方的两个图标也就随之上下滑动。因为没有设置高度时<p>元素的高度取决于文字所占空间，一旦文字所占空间发生变化，整个<main>元素的高度都随之改变，从而导致下方<footer>元素发生位移。
返回列表
评论