发表于： 2019-05-13 22:21:14
1 937
今天完成了什么：
任务四总结，任务五部分头部
遇到的问题：
切好图后布局主页头部，发现如下显示效果，已经按比例设置了宽高和行高以及字体。但还是出现这种问题。排除问题后发现是class选择器写在了div里面不是img src里面。
之后发现主页字体被压缩了下去，发现是字体设置太大。
使用了display标签和align-items：center垂直方向上对齐和justify-content:spac-between;发现还是显示下图，搜了很多资料还是不解，问师兄得知要在头部标签个人主页下面在添加个同级div标签，使其三个平分width。才使得居中。
添加背景图片和头像后，使用了flot：left和margin-top bottom left发现不是在浮动在背景图片，于是改用定位的方法，给倆个图片的大盒子div添加class=“position”设置relative（相对定位）。然后把叠在上面的头像框作为第一个书写顺序添加div添加bsolute（绝对定位）。接着写img底层的背景图，这样就头像在背景上面。此时因为头部标签使用了flexd固定定位，下面的背景图片遮住了头部页面，所以需要在倆个图片的大盒子添加margin-top：4.4rem，使其往下才能正常显示。
姓名年龄那些需要用到定位的知识，这方面还不熟，明天接着了解定位属性。
明天计划完成什么：
了解定位属性，完成任务5 psd1。
收获了什么：
定位属性position可以理解为一个会浮动的盒子，添加了属性之后还需要配合trbl上下左右使用。
王熠华-web-task4-任务总结
任务名称：CSS任务4
成果链接：https://wangyhweb.github.io/Task/task4/task4.html
任务耗时：5天
个人脑图：
任务总结：
任务四学习使用了flex弹性盒子布局，相对于position定位更方便使用，但是也需要结合具体情况。
自适应兼容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
代码放置在.html文件中的<head>里面，使文件响应适配不同设备的分辨率更好的排版。同时在css样式用，应该设置.html{font-size：62.5%}转换适合显示的字体大小。
网页布局：
类选择器语义化：
在给予class类选择器设置样式的时候应该通俗语义化，例如需要设置宽，可以w100代表width：100%，
flex弹性盒子：
弹性盒子，顾名思义：它是具有弹性功能的，在Web网页中，你所看见的内容，不会随着网页宽度的变化而打乱了排版。
Flex box 中属性作用的对象:
input标签使用：
语法：
<input type="text" />
text（默认文本）
password：输入密码
placeholder：显示默认提示文字，并在用户输入的时候消失
minlength：最小输入多少个字符，阿拉伯数字
<input class="input2" type="password" minlength="8" placeholder="请输入密码" />
button样式：
button默认样式是有边框样式，所以需要在css中设置
border: 0;（去除边框）
outline: none;（轮廓消失）
返回列表
评论