一、注意

新闻图片截取与网页请自行解决，注意图片的文件地址，以免报错
二、代码实例（因图片涉及政治违规，无法展示）

<!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>网易新闻列表</title>
    <style>
      /* 将全部外边距与内边距设置为0 */
      * {
        padding: 0px;
        margin: 0px;
      }
      /* 设置浏览器body背景颜色，方便观看 */
      body {
        background-color: #bfa;
      }
      /* 去掉超链接下划线 */
      a {
        text-decoration: none;
      }
      /* 将列表小圆点突出 */
      ul {
        margin-left: 16px;
      }
      /* 设置整个大盒子模型 */
      .all {
        /* 居中，方便观看 */
        margin: 100px auto;
        /* 加上背景原色，方便观看 */
        background-color: white;
        /* 设置高度与宽度 */
        height: 270px;
        width: 300px;
        /* 加上边界，美观 */
        border-top: 1px solid gray;
      }

      a.news-title {
        /* 将行内元素变为块元素，方便设置宽高 */
        display: block;
        /* 设置宽高，匹配字的大小 */
        width: 50px;
        height: 32px;
        /* 设置颜色 */
        color: gray;
        /* 将字的上边界变红，覆盖原上边界 */
        border-top: 1px solid red;
        /* 移动外边距，进行边界覆盖 */
        margin-top: -1px;
      }

      a.news-img {
        /* 将行内元素变为块元素，方便设置宽高 */
        display: block;
        /* 设置宽高 */
        height: 150px;
        width: 300px;
        /* 把下面的新闻导航挤一下，美观 */
        margin-bottom: 10px;
      }

      h3.img-title {
        /* 设置新闻标题字长度，匹配字 */
        width: 265px;
        /* 上移 */
        margin-top: -30px;
        /* 右移以居中，匹配all的width大小 */
        margin-left: 15px;
        color: white;
      }
      a.news {
        /* 将行内元素变为块元素，方便设置宽高 */
        display: block;
        /* 加上外边距，美观 */
        margin-bottom: 5px;
        /* 控制字体大小 */
        font-size: 10px;
        color: gray;
      }
      a:hover {
        /* 鼠标移动变色 */
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="all">
      <a href="https://war.163.com/" class="news-title">
        <h2 class="news-title-txt">军事</h2>
      </a>

      <a
        href="https://war.163.com/photoview/4T8E0001/2313840.html#p=HD453C8D4T8E0001NOS"
        class="news-img"
      >
        <img src="../src/rocket.webp" alt="火箭" />
        <h3 class="img-title">国产履带式自行火箭炮开火瞬间</h3>
      </a>

      <ul>
        <a
          href="https://war.163.com/photoview/4T8E0001/2313839.html#p=HD44DGMB4T8E0001NOS"
          class="news"
        >
          <li>美国B-2轰炸机双机编队！战斗机护航</li>
        </a>
        <a
          href="https://war.163.com/photoview/4T8E0001/2313837.html#p=HD427PIO4T8E0001NOS"
          class="news"
        >
          <li>以色列F-15I战斗机空中滚转高清图</li>
        </a>
        <a
          href="https://www.163.com/news/article/HD4573JI000189FH.html"
          class="news"
        >
          <li>独家视频丨神舟十四号航天员在太空等待问天</li>
        </a>
        <a
          href="https://www.163.com/dy/article/HD35EBAG0552G199.html"
          class="news"
        >
          <li>C919，全力向取证冲锋！外媒怎么说</li>
        </a>
      </ul>
    </div>
  </body>
</html>
前端练习--网易新闻

一、注意

二、代码实例（因图片涉及政治违规，无法展示）

猜你喜欢
