摘要：任务六护工列表页完成的事情规划任务六完成基本界面编写计划的事情限制最小宽度使用雪碧图替换当前的多张图片引入完成模拟下拉框编写屏幕过窄时，列表项左边文字被截断出现省略号复习之前的代码规范，优化代码查看验收标准查看深度思考遇到的问题收获页面原生
任务六、 护工列表页 完成的事情
1.规划任务六
2.完成基本界面编写
[x] 限制最小宽度
[x] 使用雪碧图替换当前的多张图片引入
[x] 完成模拟下拉框编写
[x] 屏幕过窄时，列表项左边文字被截断出现省略号
[x] 复习之前的代码规范，优化代码
[x] 查看验收标准
[x] 查看深度思考
遇到的问题 收获 1.页面原生CSS分块
header
设计：
.topbar: fixed, 定高.可部分套用task3的topbar
tab*2(找雇主、找护工)位置center，location logo右绝对
.conditionbar: 暂定fixed, 定高
select*3故可定width百分比并使用flex， 小竖杠用border-left&first-child
下拉内容简单字符填写
实现：
.topic: topbar-switch需要将里面的a标签设置inline-block来撑高背景，并用active做激活样式.
main
设计：
section.service-list
div.service-item
p.item-label: img+span，无特效.
item-data：flex(justify-content: space-between), datedata & pricedata(red span+icon)
实现：
基本与设计相同
div.bottombar: fixed, 定高. 可部分套用task3的topbar
设计：
a*3,用flex主轴居中+交叉轴居中
中间div.bottombar-middlebtn用background画圆，div.bottombar-middlebtn里面用img填图片，使其垂直水平居中
实现：
中间的按钮图片：一开始设line-height&vertical-align：middle, 以为居中了但效果靠下, 想起张鑫旭大神的vertical-algn&line-height好基友, 把div.bottombar-middlebtn的font-size改为0, 将文本中线和绝对中线重合，完成垂直居中.
CSS实现下拉菜单：设置好item-title的line-height, 新建ul>li, 使其display:none & absolute, 当hover时display:block，搞定.
省略号：关于文字内容溢出用点点点(…)省略号表示
最简单：定width,设置white-space + text-overflow + overflow
2.深度思考
1).去除inline-block间距有哪几种方法？ 参考：去除inline-block元素间间距的N种方法
移除空格： 元素标签中间的空格去掉(缺点：html变丑)
使用margin负值：通过设置复制去间隙(缺点：手段hack & 环境不确定，故不通用)
让闭合标签吃胶囊：去掉前几个元素的结束标签，只留下最后一个结束标签(简单实用)
font-size:0: 已废弃，由于Chrome最小字体支持有限制。
letter-spacing: 缩小inline-block元素父级元素的字符间距
word-spacing: 缩小inline-block元素父级元素的单词间距
yui3:
.yui3-g { /* 设置父级元素的字符间距，保证浏览器兼容性 */
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* IE < 8 重置 */
word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
RayM提供的：
li {
display:inline-block;
background: orange;
padding:10px;
word-spacing:0;
}
ul { /* 设置父级元素的字符间距，保证浏览器兼容性 */
width:100%;
display:table; /* 调教webkit*/
word-spacing:-1em;
}
.nav li { *display:inline;}
2).css有哪些属性可以继承？ 参考：CSS中可继承的属性有哪些
Tip1：每个CSS属性定义的概述都有指明属性是默认继承的还是不继承的（"Inherited: Yes|no"）
Tip2: 可以继承的属性一般是颜色、文字、字体间距、行高、对齐方式 & 列表样式
所有元素可继承：visibility(隐藏父元素，其下所有隐藏) & cursor（button及其字体鼠标样式相同）
内联元素可继承：
颜色：color
文字：font、font-family、font-size、font-style、font-variant、font-weight
字体间距：letter-spacing、word-spacing、white-space
行高：line-height
样式：text-decoration、text-transform、direction
块状元素可继承：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-护工列表界面
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116726.html
摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺 任务五、 一个最常见的移动端页面 完成的事情 float学习 张鑫旭《CSS世界》相关章节 张鑫旭 float系列 了解CSS通配符 &...
摘要：任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇 任务三、 一个最简单的移动端页面 今天完成的事情 运用布局知识跟随设计图进行布局，完成简单Demo并继续学习优化. 让布局更好适应屏幕变化(使用...
摘要：任务二认识开发工具今天完成的事情编辑器对比版本管理工具学习基本操作代码托管平台对比服务器使用学习明天计划的事情分析任务三完成规划及部分开发遇到的问题暂无收获编辑器对比参考三者比较，各有哪些优势和弱势一款成熟的，对网站开发者友好，插件齐全功能 任务二. 认识开发工具 今天完成的事情 IDE & 编辑器对比 版本管理工具学习 Git基本操作 代码托管平台对比 服务器使用学习 明天计划的...
摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...
摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一 任务四、 一个最常见的移动端页面 完成的事情 完成简单布局，然后填充界面 与效果图对比优化 完成验收要求：header扩展性 & 顶栏固定 进行p...
阅读 3968·2023-04-26 01:48
阅读 3226·2021-10-13 09:40
阅读 1716·2021-09-26 09:55
阅读 3564·2021-08-12 13:23
阅读 1708·2021-07-25 21:37
阅读 3378·2019-08-30 15:53
阅读 1329·2019-08-29 14:16
阅读 1346·2019-08-29 12:59
