Task4.移动端页面最常做的事情之一完成简单布局，然后填充界面，对比优化效果图完成验收要求：headerscalability&topbarfixedplaceholderstylecompatibilityresearch完成task4-deepthinkingtask4遵循Indepththinking&师兄建议修改输入栏左侧，换成标签输入，限制电话号码为11位，密码为16位。根据HTML结构的语义修改index.html，尝试在main下添加一个div.content来包裹滚动计划的内容。Things[]任务五计划完成一部分[]理解CSS通配符&选择器性能优化/浏览器渲染原理[]float学习（周六学习）[]张新旭《CSS世界》相关章节[]张新旭float系列[]深度思考:手机分辨率和网页px的区别（TODO：周末补习）link1link2link3FireFox60下遇到的问题。显示（失败）收获1.布局&优化最终效果：自适应宽屏的登录界面步骤：1）。对目标效果GIF进行截图，获取全屏效果图、425px效果图、320px效果图2)。从PSD文件中导出需要的图片（phone&lock），使用吸管工具获取界面背景色#eff0f4、登录按钮背景色#5fc0cd、中间小条的颜色输入#eaedee3)。开始简单的界面写法先用topbar，关闭登录注册，分成三部分Columns，关闭left,center,register,right布局：可以用float来解决left和right的问题，剩下的一个是文档流居中，但是按照惯例需要走一条新路，所以这里选择使用flex布局，topbar类设置为justify-conent:space-around，即两端对齐，主轴对齐方式，项与项之间等间距。然后设置align-items:center使三个项目垂直居中。调整：topbar中的文字之间有距离，这里要用padding做padding来撑起外框。我还没有测量它。可以先用html的font-size，然后用rempadding填充。关闭登录并注册。一开始我用了三个标签，做了底线处理。但是中间发现登录是一个title而不是链接，所以筛选大小后暂时选择。然后是container-form的两个input各占一行：Layout:既然是左icon和右input的布局，就用flex，而这个是左边的主轴，input设置flex:1，并完成总体布局。左侧图标：图标为图片，右侧为输入框。由于图标是图片，有一个等高的小条，所以设计了图片的左右padding+右边的border，看原型我发现右边的小条好像稍微高一点，所以我也在图片的顶部和底部设置了一点padding来撑起右侧的小条，然后用div包起来设置margin和lineheight居中，完成左侧；右侧输入：只需设置Padding并删除border&outline就足够了。顺便研究一下占位符的样式（请参阅下面的摘要），然后是容器表单的按钮。由于按钮的显示是inline-block，所以你可以控制宽度。将其设置为100%，然后将其设置为Up和downpadding。然后“login”之间有个空格所以加最后忘了pw，里面有文字往右移，继续用flex，主轴flex-end，横轴center。设置标签的颜色样式对比优化topbar高度不够，左右padding略宽，登录字体不一样。左侧图标的水平填充增加了一点，行高增加了一点。登录高度不够。效果图“登录”要用字母间距分隔，导致没有居中（这个没改哈哈）忘记密码字体太大了。GIF效果图没有做。点击输入显示“circle+x”。解决方法：这个把PSD图片裁剪出来然后简单设置为简单添加输入线即可。弹性方法很好！完成后效果如下：学习更多CSS知识后修改CSS，尽量复用yang'shi:header使用方案一共有三种：flex、float+absolute、absolute，通过修改header可以套用不同的效果tags.form-rowCompleteone-linestyle2.验收标准扩展性要求：去掉header中三块文字中的任意一两块，剩下的一两块原地不动，不受影响。一开始使用的是flex三栏布局。一个label根据flex的justify-content:space-between分为左、中、右；等距，垂直根据对齐项目：中心;垂直居中，但如果删除标签，此样式的布局将发生变化。如果去掉标签，需要用等长顶起来，保持标签的位置不变。为了满足扩展性需求，将header改为左右浮动中间的正常居中样式，但实际测试发现浮动a标签会占用空间导致中间标签不居中（spaninlinesurroundsfloat)，所以暂时放弃这个方案，打算找时间学习一下float，看看有没有解决方案。按照上面的修改方法，左右使用absolute，保持中间不变，轻松搞定...移动端：header一直固定在最上面解决方法：在header中加上fixed，给宽度和置顶，完成。效果：3.深思职位定位怎么样？各有什么特点参考：CSSRelative|Absolute（相对/绝对）定位系列static：默认定位不能堆叠，不脱离文档流，right，top，bottom位移：让元素从原来的宽度变为自适应内部元素的宽度Destructive：脱离文档流，导致原本占用的空间崩溃（布局破坏）Positioning：相对于最近的非Static父级定位，如果不是，继续往上查找，直到body，通过left,right,top,bottom位移，可以通过z-index分层分级，会生成一个block-levelboxfixed:固定定位wrapping:让元素从原来的改变width对自适应内部元素的宽度变得破坏性：脱离文档流，导致原来占用的空间坍塌（布局破坏）rela给浏览器视口定位，通过left,right,top,bottom位移，通过z-index分层分类会生成块级框：从父类继承position属性的值，css属性可以设置百分比，计算原理是什么？参考：MDN计算原则：百分比*参考值提示：百分比值是一个相对值。要想随时分析它的作用，就需要正确地找到它的参考价值。可以设置属性框模型系列：content:width（指包含块宽度），height（指包含块高度）padding（指包含块宽度）borderborder-radius（指包自身宽度&height)border-imageborder-image-slice(参考图片大小)border-image-width(参考自身宽高)margin(参考包含块宽度)定位系列:left,right(参考包含块宽度)top,bottom(参考包含块高度)textseries:text-indent(参考包含块)width)word-spacing（指受影响字体的宽度）text-size-adjust（指对应文字的字号）font-size（指父元素的字号）flex系列：flex-basis（指的是flex容器的大小）background系列：background-position（指的是背景定位Areasize-背景图片的大小，这里的size指的是水平偏移的宽度和垂直偏移的高度offset)legendbackground-size(相对于定位区域)常见的表单元素有哪些？各有什么特点？form表单属性action：提交表单时执行的动作，这里可以指定一个服务器表单处理脚本（如果省略action，动作设置为当前页面）method：HTTP方法（GET|POST）accept-charset：使用的字符集autocomplete：自动完成表单（默认开启）enctype：提交数据的编码novalidate：指定表单不验证target：指定action属性中地址的目标（默认_self，即指向当前）input输入，可以通过改变type属性来改变表单其他属性参考HTML表单类型的input元素的30个元素属性：text（文本）|密码（密码，变量点）|复选框（复选框）|date&datetime&datetime-local&email&month&number&range&search&tel&time&url&weekdatalist(html5)的预定义选项列表，input的list属性是指datalist的idassociatechildelementsoptiontobeselectedlabel标签，可以通过for属性select下拉列表子元素option绑定到对应input的idtextarea多行文本在这个框中，使用rows&cols来控制button按钮的大小，可以通过改变type属性type:button(按钮)|sumbit（提交）|reset（重置）fieldsetformframe子元素legendformframename如何理解HTML结构的语义变化？参考：理解HTML语义的含义：标签有特定的含义，即内容的结构（语义内容），选择合适的标签（语义代码）。比如header是指页面的顶部栏，nav是指导航栏。含义：代码结构优雅，易读易懂文档排版，便于开发合作维护爬虫解析方便用户体验&特殊设备解析（title，alt信息注解）最佳实践：少用无意义的div&span，尽量使用p没有具体含义时代替div对于纯样式标签，用css将表格标题替换为caption，头部替换为thead&th，身体替换为tbody&td，尾部替换为tfoot。每个input标签对应的描述文字必须使用label标签，通过设置label的for=(input'sid)可以在手机端使用fixed查看是否有问题，如何解决？这部分个人经验不足，于是在网上找了一些案例和解决方法1）web移动端固定布局的解决方法问题图片：问题描述：设置上下固定，普通marginin中间与上下分开。下拉列表超过一页，点击输入框，激活软键盘后页面底部的固定元素将失效。问题原因：激活软键盘后，页面的固定元素会失效。当页面超过一屏滚动时，无效的固定元素也会滚动。问题解决思路：如果当前层级页面不滚动，那么即使固定元素失效，也不能随页面滚动。修改：中间使用absolute从上到下分隔，y轴设置可以滚动（如果滚动卡住，可以添加-webkit-overflow-scrolling:touch[非标准，用于SafariMobile]）2)其他一些问题。输入框获得焦点后，被软键盘挡住。你可以试试input的scrollIntoView。iOS可能有一个坑：软键盘挡住输入框然后输入一段文字重写显示输入框后，最好禁用页眉和页脚的touchmove事件，防止浏览器切换到全屏模式导致工具栏要覆盖的页眉和页脚。当滚动到页面的顶部和底部边缘时，继续拖动会将视图拖走这导致页面“触底”。可以做一些判断来确认边缘，防止touchmove事件发生。手机登录页眉的常见实现方式有哪些？我没有找到任何类似的文字。让我总结一下我使用的简单通用的flex。水平三点垂直居中。特点：简单易用，适合布局，但删除元素会导致布局被破坏。左右浮动自动居中特点：好用，但我个人不太喜欢这种布局我很喜欢用左右浮动绝对居中自动特点：暴力，稳定四，探索占位符样式input标签的结果如下/*Webkitbrowsersupport(non-standard)https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-input-placeholder*/。form-rawinput::-webkit-input-placeholder{color:#aaa;}/*Chrome:57+已经支持前缀https://www.chromestatus.com/feature/6715780926275584*/.form-rawinput::placeholder{color:#aaa;}/*IE10+支持https://developer.mozilla.org/zh-CN/docs/Web/CSS/:-ms-input-placeholder*/.form-rawinput:-ms-input-placeholder{color:#aaa;}/*Firefox4-18*/.form-rawinput:-moz-placeholder{color:#aaa;}/*奇怪，FireFox60不支持*//*Firefox19+（非标准）https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-moz-placeholder*/.form-rawinput::-moz-placeholder{color:#aaa;}/*实验性功能https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown*/.form-rawinput:placeholder-shown{颜色：#aaa;/*边框：2px纯红色；*//*borderisvalidandonlyvalidinFirefox*/}EffectGithub在线展示系列文章【CSS实战】IT修真学院--习题1-九宫格【CSS实战】IT修真-实战2-开发工具【CSS实战】】IT实战-练习3-简单界面【CSS练习】IT实战-练习4-手机界面【CSS练习】IT领悟学院--练习5-护士人机界面【CSS练习】IT修真学院--练习6-护士工人列表界面
