1.完成后的界面样式

2.?原界面样式（新闻界面素材来自于网易新闻）

3.详细代码?

<!DOCTYPE html>
<html lang="zh">
<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>
    <!-- 外部引入重置浏览器初始样式代码 -->
    <link rel="stylesheet" href="../重置样式表/reset.css">
    <style>
      /* 小标题顶部间距5px*/
      li{
          margin-top: 5px;
      }
        /* 鼠标停留在标题上的颜色为红色 */
        a:hover{
            color: red;
        }
        /* 设置超链接的属性 */
        a{
            width: 20px;
            line-height: 20px;
            text-decoration: none;
            color: gray;
        }
        /* 设置外层盒子的属性 */
        .box1{
            width: 250px;
            padding-left: 5px;
            background-color: bisque;
            
        }
        /* 标题属性 */
        h1,h2{
            font-size: 20px;
            font-weight: bold;
            color: black;
            line-height: 25px;

        }
        /* 主标题属性 */
       .news-title{ 
        height: 40px;
        line-height: 40px;
        font-size: 25px;
        font-weight: bold;
       }
       /* 鼠标悬停在标题上的颜色设置为红色 */
       h1:hover{
           color: red;
       }
       h2:hover{
           color: red;
       }
       .hot:hover{
           color: red;
       }
       h2{
           background-color: red;
           width: 180px;
       }
       .hot{
           background-color: bisque;
       }
      
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div class="box1">
        <!-- 主标题盒子 -->
        <div class="news-title">
            <a href="#">
                <h1>新闻专题</h1>
            </a>
        </div>
        <!-- 图片盒子 -->
        <div class="photo">
            <a href="https://news.163.com/special/2022hncjcy/">
                <img src="../practise_picture/new.png" alt="春运" width="200px">
                <h2>HOT
                    <span class="hot">2022春节春运</span>
                </h2>
               
            </a>
        </div>
        <!-- 小标题盒子 -->
        <ul class="list">
            <a href="#">
                <li>2022年北京冬奥会</li>
            </a>
            <a href="#">
                <li>新春走基层</li>
            </a>
            <a href="#">
                <li>神十三航天员太空过新年</li>
            </a>
            <a href="#">
                <li>奥密克戎已成全球流行株</li>
            </a>
            
            
        </ul>
    </div>
</body>
</html>

新闻图片和小标题可以根据自己需要更改，到时候自己重新修改图片的导入路径即可。