发表于： 2020-03-23 20:16:26
1 1188
一，今天完成的任务
制作列表主体部分，布局列表的框架，
设置了屏幕过窄时，设置左边的文字被
截断出现”…”省略号，这里用到了媒体
查询响应式的知识，它需要设置的值是
最大宽度max-width
“max-width”是媒体特性中最常用的一
个特性，其意思是指媒体类型小于或等于指
定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}}上面表示的是：当屏幕小于或等于480px时,页
面中的广告区块（.ads）都将被隐藏。
最小宽度min-width
“min-width”与“max-width”相反，指的
是媒体类型大于或等于指定宽度时，样式生效。
上面表示的是：当屏幕大于或等于900px时，
容器“.wrapper”的宽度为980px。
再就是重点就是这段代码 text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
之后就通过ngnix检查和修改代码，并对难点
做了总结和复习，特别是flex弹性布局，还有
关于vertical-align与line-height用法，和居中
的一些方法。
二，明天计划接着学习Bootstrap布局和使用的相
关知识。
返回列表
评论