编写静态新闻列表 css

前端小白脸

于 2023-02-09 16:36:59 发布

阅读量851

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_61028990/article/details/128940113

版权

该文详细介绍了如何使用HTML和CSS构建一个新闻热榜的页面布局。首先，通过盒模型设置div的宽度、高度、背景色及居中显示。接着，添加边框和内边距提升视觉效果。然后，插入h3标签制作新闻标题，再利用无序列表展示新闻条目，并对li元素进行样式调整。最后，通过不同的颜色和样式控制序号的显示，优化整体样式，如添加底部边框和标题的外边距。

摘要由CSDN通过智能技术生成

第一步：构建盒模型，设置水平居中

<body>
  <div class="news"></div>
</body>
<style>
  /* 清楚默认样式 */
  body{
    padding: 0;
    margin: 0;
  }
  /* 给盒子添加宽度，高度，背景色 */
  .news{
    width: 360px;
    height: 500px;
    /* 设置盒子水平居中 与浏览器顶部有50的外边距*/
    margin: 50px auto 0;
  }
</style>

第二步：给 div 添加边框线，同时设置内边距

<style>
  .news{
    width: 360px;
    height: 500px;
    margin: 50px auto 0;
    /* 给盒子添加边框线 */
    border: 1px solid #ddd;
    /* 给盒子添加内边距*/
    padding: 15px;
  }
</style>

第三步：添加 h3 标签，制作新闻标题

<body>
  <div class="news">
    <h3>百度新闻热榜</h3>
  </div>
</body>
<style>
  /* 清楚默认样式 */
  body,h3{
    padding: 0;
    margin: 0;
  }
  .news{
    width: 360px;
    height: 500px;
    margin: 50px auto 0;
    border: 1px solid #ddd;
    padding: 15px;
  }
  /* 修改文字大小 */
  .news h3{
    font-size: 20px;
  }
</style>

第四步：利用无序列表来制作新闻列表

<body>
  <div class="news">
    <h3>百度新闻热榜</h3>
    <ul>
      <li><a href="">1廣泛授權方式，攻擊。</a></li>
      <li><a href="">2廣泛授權方式，攻擊。</a></li>
      <li><a href="">3廣泛授權方式，攻擊。</a></li>
      <li><a href="">4廣泛授權方式，攻擊。</a></li>
      <li><a href="">5廣泛授權方式，攻擊。</a></li>
      <li><a href="">6廣泛授權方式，攻擊。</a></li>
      <li><a href="">7廣泛授權方式，攻擊。</a></li>
      <li><a href="">8廣泛授權方式，攻擊。</a></li>
      <li><a href="">9廣泛授權方式，攻擊。</a></li>
    </ul>
  </div>
</body>
<style>
...
   /* 给每个 li 添加如下样式 */
  .news ul li{
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    border: 1px solid red;
  }
  /* 去掉下划线 */
  .news ul li a{
    text-decoration: none;
    color: #333;
  }
  /* 添加鼠标放到a标签上的效果 */
  .news ul li a:hover{
    color: red;
  }
</style>

第五步：控制序号样式

<body>
  <div class="news">
    <h3>百度新闻热榜</h3>
    <ul>
      <li><a href=""><span class="col1">1</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span class="col2">2</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span class="col3">3</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>4</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>5</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>6</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>7</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>8</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>9</span>廣泛授權方式，攻擊。</a></li>
    </ul>
  </div>
</body>
<style>
...
  .news ul li span{
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .col1{
    color: red;
  }
  .col2{
    color: #ff5c55;
  }
  .col3{
    color: #ffa552;
  }
</style>

第六步：优化样式

.news ul li{
    /* 边框样式 */
    border-bottom: 1px dotted #ddd;
}
.news h3{
    /* 添加外边距 */
    margin-bottom: 20px;
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="news">
    <h3>百度新闻热榜</h3>
    <ul>
      <li><a href=""><span class="col1">1</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span class="col2">2</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span class="col3">3</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>4</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>5</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>6</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>7</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>8</span>廣泛授權方式，攻擊。</a></li>
      <li><a href=""><span>9</span>廣泛授權方式，攻擊。</a></li>
    </ul>
  </div>
</body>
</html>
<style>
  /* 清楚默认样式 */
  body,h3,ul{
    padding: 0;
    margin: 0;
    /* 清楚ul 自带样式 */
    list-style: none;
  }
  /* 给盒子添加宽度，高度，背景色 */
  .news{
    width: 360px;
    /* height: 500px; */
    /* 设置盒子水平居中 与浏览器顶部有50的外边距*/
    margin: 50px auto 0;
    /* 给盒子添加边框线 */
    border: 1px solid #ddd;
    /* 给盒子添加内边距*/
    padding: 15px;
  }
  /* 修改文字大小 */
  .news h3{
    font-size: 20px;
    /* 添加外边距 */
    margin-bottom: 20px;
  }
  /* 给每个 li 添加如下样式 */
  .news ul li{
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    /* border: 1px solid red; */
    border-bottom: 1px dotted #ddd;
  }
  /* 去掉下划线 */
  .news ul li a{
    text-decoration: none;
    color: #333;
  }
  /* 添加鼠标放到a标签上的效果 */
  .news ul li a:hover{
    color: red;
  }
  .news ul li span{
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .col1{
    color: red;
  }
  .col2{
    color: #ff5c55;
  }
  .col3{
    color: #ffa552;
  }
</style>