<!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>
