完成图片文字的排版，用到文本格式化和段落标签等

最新推荐文章于 2022-12-14 12:32:19 发布

bai_Web

最新推荐文章于 2022-12-14 12:32:19 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/bai_Web/article/details/119191890

版权

本文档详细介绍了如何使用HTML和CSS创建一个居中显示的产品展示页面，包括页面布局、图片设置和内容排版。首先通过设置大盒子的样式实现内容水平居中，然后将图片宽度设置为与父盒子相同，最后添加产品评价和详细信息。通过这个案例，读者可以学习到HTML和CSS的基础应用。

摘要由CSDN通过智能技术生成

任务

用html,css来完成下图页面在这里插入图片描述

一、案例分析

经过分析，该页面可分为两步，先创一个大盒子将里面的内容包起来，使用margin:auto来让内容水平居中；之后分别按顺序完成图片和三行文字写入。

二、代码步骤

1.初始化

使用通配符去掉标签的内外边距；给body设置背景颜色；去掉a标签默认的下划线并将字体颜色修改

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }
 </style>

2.设置大盒子css样式

代码如下（示例）：
设置大盒子的宽高，背景颜色和水平对齐

 <style>
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }
 </style>
 <body>
    <div class="box">

    </div>
 </body>

3.给box中放入图片

让图片的宽度和父盒子的宽度一样

 <style>
       .box img {
           /* 图片的宽度和父亲一样宽 */
            width: 100%;
        }
 </style>

 <body>
    <div class="box">
        <img src="images/img.jpg" alt="">
    </div>
 </body>

4.完成图片下方内容

 <style>
        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
            padding: 0 28px;
            margin-top: 30px;
        }
       .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
 </style>

 <body>
    <div class="box">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span> 99.9元</span>
        </div>
    </div>
 </body>

总结

这个案例用到了div、span、p、标题等标签，注意span标签里不能包含块级标签，img图片标签不能直接设置宽度，但是可以给包住他的大盒子设置，让图片的宽度和父盒子一样宽。块级标签一行只能有一个，为了一行有多个可以给盒子添加`display:inline-block` 属性既可以设置宽高也可以一行有多个。

bai_Web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完成图片文字的排版，用到文本格式化和段落标签等

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录任务一、案例分析二、代码步骤1.初始化2.设置大盒子css样式3.给box中放入图片4.完成图片下方内容总结任务用html,css来完成下图页面一、案例分析经过分析，该页面可分为两步，先创一个大盒子将里面的内容包起来，使用margin:auto来让内容水平居中；之后分别按顺序完成图片和三行文字写入。二、代码步骤1.初始化使用通配符去掉标签的内外边距；给body设置背景颜色；去掉a标签默认的下划线并将字体颜色修
复制链接

扫一扫