网页图片+文字并排显示效果
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">您的分享，還沒有任何用戶在設(shè)備上安裝。</span>
? ? ? ? ? ? </div>
? ? ? ? ? ? <span class="dashed">分享給建筑同行，更容易獲得安裝獎(jiǎng)勵(lì)！</span>
? ? ? ? ? ??
? ? ? ? </div>
? ? </div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的网页图片+文字并排显示效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自动创建文件夹 pictureBox 显
- 下一篇： 简单易用的中文PDF转码器