Day02-带序号新闻列表

新闻网站布局中列表是极其常见的，其中有无序列表和有序列表，但不管是无序还是有序都不会采用列表标签自带的序列样式，而是通过css实现，以今日头条网站为例：

其中无序列表的标点是通过iconfont实现，有序列表数字通过span标签加字体样式实现

先从新闻列表的结构出发，通常为一个div中包含标题和列表，再额外包含一些图标点缀，需要注意的是新闻列表通常都是可点击的，所以会在li中嵌入超链接

  <div class="news">
    <h3>新闻热榜</h3>
    <ul>
      <li><a href=""><span class="num-1">1</span>传承“上海精神” 为共建“上合家园”贡献青年力量</a></li>
      <li><a href=""><span class="num-2">2</span>中方发布“伏特台风”真相后，美涉事公司悄悄修改报告</a></li>
      <li><a href=""><span class="num-3">3</span>藏戏一声吼</a></li>
      <li><a href=""><span>4</span>今日辟谣 北京地区网站辟谣平台 互联网联合辟谣平台</a></li>
      <li><a href=""><span>5</span>百度2024年6月侵权举报受理公示 "互联护苗"专题</a></li>
      <li><a href=""><span>6</span>郑州提早迎战暴雨：居民隔着防洪围挡“看海”</a></li>
      <li><a href=""><span>7</span>韩正出席重要活动，特别重申这一点</a></li>
      <li><a href=""><span>8</span>山东临沂遭遇强降雨：路面积水及腰 已紧急避险转移1939人</a></li>
    </ul>
  </div>

这样一个列表结构就完成了，随后就是样式美化。一个项目中通常会有对标签默认样式进行去除，通常引入一个base.css文件（网上找也可）

body, h3, ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

随后开始根据UI图实现布局，通常就是设置margin/padding，文字样式，超链接样式以及hover样式等等

    /* 对整体div进行布局，添加内边距*/
    .news {
      width: 520px;
      margin: 50px auto;
      border: 1px solid #ddd;
      padding: 15px;
      box-sizing: border-box;
    }
    /* 设置标题和列表间距*/
    .news ul {
      margin-top: 20px;
    }
    .news ul li {
      height: 35px;
      line-height: 35px;
      font-size: 16px;
    }
    .news ul li a {
      color: #333;
      text-decoration: none;
    }
    .news ul li:hover a{
      color: red;
    }
    .news ul li a span {
      margin-right: 10px;
      font-weight: 700;
      color: #a1a3a6;
    }
    .news ul li .num-1 {
      color: #ff403a
    }
    .news ul li .num-2 {
      color: #ff9500
    }
    .news ul li .num-3 {
      color: #fc0
    }

当文字超出时，以省略号样式展示

    .news ul li {
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      overflow: hidden;  /* 隐藏溢出内容*/
      text-overflow: ellipsis; /* 使用省略号表示溢出*/
      white-space: nowrap; /* 禁止换行*/
    }