图文卡片布局

图文卡片布局

---

一、HTML结构

html

<div class="box1">                     <!-- 卡片容器 -->
  <div class="img1">                   <!-- 图片区 -->
    <img src="./img/icon3.jpg" alt="" />
  </div>
  <div class="txt">                    <!-- 文字区 -->
    <h2><a href="#">亿贝CALI</a></h2>  <!-- 标题 -->
    <div class="txt2">                <!-- 描述 -->
      了解有关选项卡和选项卡快捷方式...
    </div>
    <div class="at2">                 <!-- 底部操作区 -->
      <img src="./img/btn1.jpg" alt="" />
      <span><a href="#">&gt;&gt;了解详情</a></span>
    </div>
  </div>
</div>

---

二、层级关系

text

.box1
├── .img1 → img（图标）
└── .txt
    ├── h2 → a（标题链接）
    ├── .txt2（描述文字）
    └── .at2
        ├── img（装饰图）
        └── span → a（了解详情链接）

---

三、各部分功能

类名	作用
.box1	外层容器，控制整体样式
.img1	放置图标/缩略图
.txt	右侧文字区域
h2	标题，内部链接可跳转
.txt2	内容描述
.at2	底部操作栏（装饰图 + 详情链接）

---

四、常见布局方式

左图右文（浮动实现）

css

.img1 { float: left; width: 30%; }
.txt { float: left; width: 70%; }
.box1 { overflow: hidden; }  /* 清除浮动 */

上下居中（Flex实现）

css

.box1 { display: flex; align-items: center; }

---

五、关键CSS属性

属性	作用
float: left	图文并排
width	控制宽窄比例
overflow: hidden	清除浮动
text-decoration: none	去掉链接下划线
padding	内边距，不贴边
border	卡片边框
border-radius	圆角