前端 day8

一、新闻列表的流程

     1.结构：

                        1.如果新闻后面有时间

                            <li>

                                  <a href=#”>新闻新闻新闻新闻新闻新闻新闻新闻新闻</a>

                                  <span>2020-03-25</span>

                             </li>

                        2.如果新闻后面有时间

                                   <li>

                                           <a href=”#”>新闻新闻新闻新闻新新闻新闻新闻新闻</a>

                                   </li>

     2.给li添加宽高，高度量取的时候，量行高就行

     3.给新闻内容  a 和  时间的span   添加浮动，一左一右

     4.设置文本样式

     5.用添加背景图的方式，给 li 添加列表浮动

     6.让背景图上下居中，文本上下居中

     7.给  li 添加  padding-left 把列表符号露出来  

二、文本溢出省略号显示

1. 空白空间的处理

        white-space:;       

        pre:;              保留空格

       pre-wrap:;          换行

        pre-line            默认状态

        inherit             继承父元素的值

       nowrap            不让文本换行

   2.溢出属性（控制内容溢出的时候的显示方式）

      属性:overflow  

        属性值：auto      当内容超出时有滚动条，没超出，没有滚动条

                scroll     完全添加滚动条（不管内容有没有超出）

                hidden    隐藏溢出的内容

                inherit     继承父元素的值

        *overflow-x:hidden;   x方向添加滚动条

          overflow-y:hidden;   y方向添加滚动条

3.控制单行文本溢出，省略号显示

   1.white-space:nowrap;       不换行

   2.overflow:hidden;           溢出的内容隐藏

   3.text-overflow:ellipsis;        溢出的内容省略号显示