<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*去除默认样式*/ * { padding: 0; margin: 0; } a{ text-decoration: none; color:black; } /*设置整个新闻框的宽和高*/ .news-wapper { width: 300px; height: 375px; /*设置上边框*/ border-top: 1px #ddd solid; margin: 0 auto; margin-top: 3px; } .news-title { height: 40px; /*设置上面的红色部分*/ /*如果直接给news-title设置红色边框，没有字的部分上面也有红色边框，将设置为inline-block*/ display: inline-block; /*设置红色的边框*/ border-top: red 1px solid; /*这个红色的边框应该和灰色的边框是同一条线，不应该是灰色边框下有红色边框*/ margin-top: -1px; /*有一个小疑问，为什么红色边框上移没有把灰色边框推高1px*/ } .news-title a { font-weight: bold; } .news-img{ height:150px; } /*设置图片的文字效果*/ .img-title { text-decoration: none; /*把文字上移，移动到图片内部*/ margin-top: -40px; font-weight: bold; font-size:20px; } .img-title a{ color:white; } .news-list{ margin-top:20px; padding-left:16px; } .news-list li{ margin-bottom:15px; } .news-list li a{ font-size:14px; } .news-list li a:hover{ color:red; } </style> </head> <body> <!--设置外层的容器--> <div class="news-wapper"> <!--创建标题--> <h2 class="news-title"> <a href=""> 军事 </a> <span>·</span> <a href=""> 航空 </a> </h2> <div class="news-img"> <a href=""> <img src="../表2/img/3002d4d7j00q97wut003gc000s600e3c.webp" alt=""> </a> <!--创建图片的标题--> <h2 class="img-title"> <a href="">朝鲜特种部队演练突袭韩国总统府</a> </h2> </div> <!--新闻列表--> <ul class="news-list"> <li> <a href="">不容易!伊朗成功发射首颗军事卫星</a> </li> <li> <a href="">多角度拍摄主战坦克开火：最后一张太惊人了</a> </li> <li> <a href="">世界地球日：卫星“图说”青海高原地理</a> </li> <li> <a href="">厦航开通多条“客改货”包机助力全球抗疫</a> </li> </ul> </div> </body> </html>
