完成后的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bing模块</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
body {
background-color: #e9e9e9;
}
a{
text-decoration: none;
}
.bing-wrapper {
background-color: whitesmoke;
margin: 10px auto;
width: 300px;
height: 340px;
overflow: hidden;
}
.title {
height: 20px;
margin-left: 15px;
margin-right: 18px;
padding-top: 10px;
padding-bottom: 2px;
border-bottom: solid #d0d5e4 1px;
}
.lined {
padding-bottom: 4px;
border-bottom: solid rgb(30, 33, 75) 1px;
}
.title a {
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: rgb(16, 67, 124);
}
.title a:hover {
color: rgb(57, 42, 194);
}
.bing-img{
padding-top: 15px;
padding-left: 15px;
width:265px;
height: 140px;
overflow: hidden;
}
.bing-img img{
height: 140px;
}
.bing-img .img-title{
color: white;
font-size: 18px;
font-weight: 600;
margin-top: -35px;
margin-left: 16px;
}
div .bing-list {
font-size: 11px;
padding-left: 15px;
padding-top: 15px;
}
.bing-list li{
margin-top: 8px;
}
.bing-list a{
color: rgb(36, 33, 43);
}
.bing-list li a::before{
content: '■ ';
color: #d8d8d8;
}
.bing-list a:hover{
color: cornflowerblue;
}
</style>
</head>
<body>
<div class="bing-wrapper">
<h2 class="title"><a href="http://www.bing.com/" target="framename"><span class="lined"> Microsoft Bing</span></a></h2>
<!-- 创建图片容器 -->
<div class="bing-img">
<a href="https://acmnp.com/wp-content/uploads/crater-lake-national-park-hero.jpg" target="framename">
<img src="./pic/OIP.jpg">
<h3 class="img-title">Crater Lake National Park</h3>
</a>
</div>
<ul class="bing-list">
<li><a href="#"> Can you swim in Crater Lake National Park</a></li><br>
<li><a href="#"> Is Crater Lake National Park closed</a></li><br>
<li><a href="#"> When should I visit Crater Lake</a></li><br>
<li><a href="#"> How far is Portland Oregon from Crater Lake</a></li>
</ul>
</div>
</body>
</html>