网页图片+文字并排显示效果

最新推荐文章于 2025-02-21 14:39:32 发布

碎火流荧

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量8.6k

点赞数 4

分类专栏： web开发

本文链接：https://blog.csdn.net/qq_21071977/article/details/83748474

版权

web开发专栏收录该内容

12 篇文章

订阅专栏

1、效果图：

2、源码：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.sharearea{
width:320px;
height: 380px;
position: relative;
border: 1px solid #e9e9e9;
color:#333;
font-size: 10px;
}
.tt{
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
}
.bold{
font-weight: bold;
}
.center{
position: absolute;
text-align: center;
top: 35%;
width: 100%;
}
.ico{
border-radius:42px;
border: 1px solid #e9e9e9;
transform: scale(0.8);
vertical-align: middle;
display: inline-block;
}
.dashed{
color: #999999;
font-size: 14px;
display: inline-block;
margin-top: 15px;
}
.mid{
width: 130px;
text-align: left;
display: inline-block;
vertical-align: middle;
}
</style>
<body>
<div class="sharearea">
<div class="tt bold">分享安装记录</div>
<div class="center">
<div>
<img class="ico" src="图片路径">
<span class="mid">您的分享，还没有任何用户在设备上安装。</span>
</div>
<span class="dashed">分享给建筑同行，更容易获得安装奖励！</span>

</div>
</div>
</body>
</html>