发表于: 2021-11-26 20:53:18
1 1199
今天完成的事情:今天主要在做任务三,由于做了任务一对盒子有了概念,所以这次对于任务三的布局做的比较快,先是做好div架构,谁包裹谁,然后开始 写css代码设置盒子的宽度属性颜色背景,接着在写内部盒子的样式,对于返回标志,设置样式主要是设置盒子的外边距包括上边距和右边距使返回图标不会靠边。然后接着做包裹葡萄藤logo的div。将div居中并使用 display: block;margin: 0 auto;将logo居中设置div为透明。然后同样的方式把文字div设置好,写上居中代码,改变文字颜色,然后就是下面两个logo设之两个logo宽度为50%,上外边距相同浮动方式一个左边向左 右边向右,设置透明,然后把里面logo图标居中。大的点基本完成,小的点还要完善
明天计划的事情:明天做任务4,深入学习github,git,svn,svn服务器的使用。
遇到的问题:在做任务三的时候,测试阶段发下图标会随分辨率改变大小。改了很多次代码,最后在百度找到<meta name="viewport" content="width=device-width, initial-scale=1.0">这个声明可以禁止缩放图标。然后是中间文字,设置两端对齐就无法设置居中,在手机分辨率小的状态下还能居中(因为文字够长)在电脑浏览器上语句因为短,所以只能写左边一半空间,写不了右边。后面经过修改对div设置了max-width: 470px;最大宽度这个问题才解决。然后是下面两个logo在电脑浏览器宽度太大远远不在文字下面,所以又对页面设置了最大宽度max-width: 800px;。在F12下页面宽度缩小会导致排版变形,所以又设置了最小宽度min-width: 300px;。
收获:学会了使用最大和最小宽度帮助页面布局,知道了可以使图标不缩放的办法,对div布局更有想法了,也更熟练了一点。了解了很多css样式,对盒子模型边距有了更多的了解,学会了用法
评论