Html+css之图文组合

最新推荐文章于 2023-12-15 20:57:39 发布

童童童ing

最新推荐文章于 2023-12-15 20:57:39 发布

阅读量1.8k

点赞数 1

文章标签： html css html5 前端 css3

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124190435

版权

图文组合

一、引言
二、案例

一、引言

图文组合是页面中常见的布局，大致可以分为三类：上下排列，左右排列，以及图文混排。下面结合几个案例，进行解释。

二、案例

1.上下布局——单图单文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 50px;
            height: 60px;
            /* background-color: pink; */
            text-align: center;
            overflow: hidden;
            float: left;
        }
        .item img {
            width: 28px;
            height: 28px;
            /* img默认下方有个隔离边，修改成block会去掉 */
            display: block;
            margin: 5px auto;
        }
        .item p {
            font-size: 12px;
            font-weight: 200;
            /* background-color: gold; */
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test01/1.png" alt="">
        <p>话费</p>
    </div>
    <div class="item">
        <img src="img/test01/2.png" alt="">
        <p>机票</p>
    </div>
    <div class="item">
        <img src="img/test01/3.png" alt="">
        <p>酒店</p>
    </div>
</body>
</html>

在这里插入图片描述

2.左右布局——单图单文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test02</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 140px;
            height: 63px;
            /* background-color: pink; */
            border-bottom: 1px solid gray;
        }
        .item img {
            width: 36px;
            height: 36px;
            float: left;
            margin: 13px 2px;
        }
        .item p {
            width: 100px;
            height: 63px;
            line-height: 63px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test02/1.jpg" alt="">
        <p>手机</p>
    </div>
    <div class="item">
        <img src="img/test02/2.jpg" alt="">
        <p>电视</p>
    </div>
    <div class="item">
        <img src="img/test02/3.jpg" alt="">
        <p>平板</p>
    </div>

</body>
</html>

在这里插入图片描述

3.左右布局——单图多文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 238px;
            height: 70px;
            /* background-color: pink; */
        }
        .item img {
            width: 60px;
            height: 60px;
            float: left;
            margin: 5px;
        }
        .item div {
            width: 168px;
            height: 70px;
            /* background-color: gold; */
            float: left;
        }
        .item div .title {
            height: 32px;
            line-height: 16px;
            font-size: 14px;
            overflow: hidden;
            margin-top: 6px;
        }
        .item div .price {
            color: red;
            margin-top: 4px;
            font-size: 18px;
        }
        .item div .price span {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test03/1.webp" alt="">
        <div>
            <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
            <p class="price"><span>￥</span>5888</p>
        </div>
    </div>
    <div class="item">
        <img src="img/test03/2.webp" alt="">
        <div>
            <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
            <p class="price"><span>￥</span>5888</p>
        </div>
    </div>
    <div class="item">
        <img src="img/test03/3.webp" alt="">
        <div>
            <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
            <p class="price"><span>￥</span>5888</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

4.上下布局——单图多文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test04</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 190px;
            height: 266px;
            /* background-color: pink; */
            overflow: hidden;
            float: left;
        }
        .item .tu {
            width: 120px;
            height: 120px;
            /* background-color: gold; */
            margin: 0 auto;
            margin-top: 30px;
            background-size: 100% 100%;
        }
        .item .title {
            width: 170px;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            font-size: 14px;
            margin: 32px 10px 14px;
        }
        .item .price {
            width: 170px;
            margin: 0 10px;
            color: red;
            font-size: 18px;
        }
        .item .price span {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="tu" style="background-image: url(img/test04/1.webp)"></div>
        <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
        <p class="price"><span>￥</span>5888</p>
    </div>
    <div class="item">
        <div class="tu" style="background-image: url(img/test04/2.webp)"></div>
        <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
        <p class="price"><span>￥</span>5888</p>
    </div>
    <div class="item">
        <div class="tu"  style="background-image: url(img/test04/3.webp)"></div>
        <p class="title">Apple苹果iPhone13Apple苹果iPhone13</p>
        <p class="price"><span>￥</span>5888</p>
    </div>
</body>
</html>

在这里插入图片描述
注意：
图片img标签会被当做文字处理，默认基线对齐，会出现下方间隙，解决方案：把img的display属性改为block，然后对其进行外边距设置（图片可从网上自行下载）
左右布局会使用浮动，上下布局有时候可以不用浮动。

童童童ing

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
3
评论
Html+css之图文组合

图文组合一、引言二、案例1.上下布局——单图单文2.左右布局——单图单文3.左右布局——单图多文4.上下布局——单图多文一、引言图文组合是页面中常见的布局，大致可以分为三类：上下排列，左右排列，以及图文混排。下面结合几个案例，进行解释。二、案例1.上下布局——单图单文<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X
复制链接

扫一扫