86 lines
2.1 KiB
HTML
86 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>仿百度图片详情</title>
|
||
<style>
|
||
body, ul,li,p {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.main {
|
||
position: relative;
|
||
width: 458px;
|
||
height: 272px;
|
||
background: url("https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0");
|
||
background-size: cover;
|
||
}
|
||
.main p {
|
||
position: absolute;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
bottom: 15px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
|
||
.box {
|
||
position: relative;
|
||
width: 458px;
|
||
height: 272px;
|
||
}
|
||
.box img {
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 100%;
|
||
}
|
||
.box p {
|
||
position: absolute;
|
||
z-index: 2;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
bottom: 30px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.news_list li{
|
||
width: 270px;
|
||
height: 100px;
|
||
}
|
||
.news_list img {
|
||
width: 120px;
|
||
height: 80px;
|
||
float: left;
|
||
}
|
||
.news_list span {
|
||
float: left;
|
||
width: 144px;
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 背景图 -->
|
||
<div class="main">
|
||
<p>vivo清仓5G手机，跑分50万＋大电池＋44W快充，跌至2898</p>
|
||
</div>
|
||
|
||
|
||
<!-- img实现 -->
|
||
<div class="box">
|
||
<img src="https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0" alt="">
|
||
<p>vivo清仓5G手机，跑分50万＋大电池＋44W快充，跌至2898</p>
|
||
</div>
|
||
|
||
<ul class="news_list">
|
||
<li>
|
||
<img src="https://inews.gtimg.com/newsapp_ls/0/11458983176_294195/0" alt="">
|
||
<span>服退烧药，带全家从美国来京的确诊女子已被立案</span>
|
||
</li>
|
||
</ul>
|
||
|
||
</body>
|
||
</html> |