任务6.护士列表页面完成的事情1.规划任务62.完成基础界面写计划[x]限制最小宽度[x]使用Sprite替换当前多张图片并引入[x]完成模拟掉落-downboxwriting[x]当屏幕太窄时，listitem左边的文字被截断，出现省略号[x]查看之前的代码规范，优化代码[x]查看验收标准[x]查看深度思考遇到的问题收获1.页面原生CSS评分Blockheaderdesign:.topbar:fixed，固定高度。可以部分套用task3的topbartab*2（找雇主，找护士）positioncenter,locationlogorightabsolute.conditionbar:暂定，固定高度select*3所以可以设置widthPercentage和使用flex，小竖条使用border-left&first-child下拉内容填写简单字符：.topic:topbar-switch需要将里面的a标签设置为inline-block来支持后台，并使用active作为激活样式。主要设计：section.service-listdiv.service-itemp.item-label：img+span，无特效。item-data:flex(justify-content:space-between),datedata&pricedata(redspan+icon)implementation:basic和div.bottombar的设计是一样的：fixed，固定高度。可以部分套用task3:a*3的topbar设计，使用flex主轴居中+横轴居中div.bottombar-middlebtn使用background画圆，div.bottombar-middlebtn内部使用img填充图片使其垂直水平居中实现：中间按钮图片：setline-height&vertical-align:middle一开始以为是居中但是效果比较低，想起vertical的好朋友张新旭-algn&line-height，放置div。bottombar-middlebtn的font-size改为0，文字中线与绝对中线重合，完成垂直居中。CSS实现下拉菜单：设置item-title的line-height，新建ul>li，并使其显示：none&abso琵琶，显示：悬停时阻塞，搞定。Ellipses:textcontentoverflow，用点（…）省略号表示最简单：设置width，设置white-space+text-overflow+overflow2。深度思考1).Removeinline-块间距有哪些方法？参考：Nwaystoremovespacingbetweeninline-blockelementsRemovespaces：去掉元素标签之间的空格（缺点：html变丑）使用负边距值：通过设置copy去除间隙（缺点：意味着hack&环境不确定，So不通用）让结束标签吃掉胶囊：去掉前几个元素的结束标签，只留下最后一个结束标签（简单实用）font-size:0:废弃，由于Chrome对最小字体支持的限制.letter-spacing：减小inline-block元素父元素的字符间距word-spacing：减小inline-block元素父元素的字间距yui3:.yui3-g{/*设置字符间距父元素保证浏览器兼容性*/letter-spacing:-0.31em;/*webkit*/*字母间距：正常；/*IE<8重置*/word-spacing:-0.43em;/*IE<8&&gecko*/}.yui3-u{display:inline-block;缩放：1；*显示：内联；/*IE<8:fakeinline-block*/letter-spacing:normal;字间距：正常；vertical-align:top;}由RayM提供：li{display:inline-block;背景：橙色；填充：10px；字间距：0；}ul{/*设置父元素的字符间距以确保浏览器兼容性*/width:100%;显示：表格；/*调整webkit*/word-spacing:-1em;}.navli{*display:inline;}2)..css的哪些属性可以被继承？参考：CSS中有哪些可继承的属性Tip1：每个CSS属性定义的概述，说明该属性是否默认被继承（“Inherited:Yes|no”）Tip2：可继承的属性一般有color,Text,fontspacing,lineheight,alignment&liststyle所有元素可以继承：visibility（隐藏的父元素，都隐藏在它下面）&cursor（button和它的字体和鼠标样式相同）inline元素可以继承：color：colortext：font，font-family,font-size,font-style,font-variant,font-weight字体间距：letter-spacing,word-spacing,white-space行高：line-height样式：text-decoration,text-transform,directionBlock元素可继承：text-indent&text-align列表元素可继承：list-style,list-style-type,list-style-position,list-style-image效果Github在线展示系列文章【CSS练习】IT修真--练习1-九宫【CSS练习】IT修真--练习2-开发工具【CSS练习】】IT修真--练习3-简单界面【CSS练习】IT修真--练习4-移动端界面【CSS练习】IT修政-练习5-护工个人界面【CSS练习】IT修政-练习6-护工列表界面
