DAY 3 图文组合

已于 2022-04-22 17:43:15 修改
阅读量68 收藏
点赞数
文章标签： html5 前端
于 2022-04-15 22:12:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/igotosleep/article/details/124204701
版权
这篇博客分享了HTML5中的图文组合学习心得，包括如何实现文本和图片的居中布局。通过line-height、text-align和margin: 0 auto等属性进行垂直和水平居中。还提及span标签的应用以及在编写代码时为盒子设置背景色以辅助理解。文章包含具体的案例和细节讲解。
摘要由CSDN通过智能技术生成

图文组合

前言

今天学习了图文组合系列内容，有一些零零散散的知识点如下：
有关“居中”问题：
①line-height ＝height 此时文本垂直居中。
②text-align: center 写在父级，子级中的行元素、行块元素、文本内容等水平居中。
③margin: 0 auto 写在块元素，相对于父级元素水平居中。

span标签可以写在一些标签内部，实现同行显示
在这里插入图片描述
在这里插入图片描述

`

一、上案例

<!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>Demo1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        span {
            font-size: 14px;
            color: #5a8bb4;
        }
        
        h3 {
            color: #006600;
        }
        
        .da {
            width: 900px;
            height: 300px;
            /* background-color: purple; */
            margin-bottom: 10px;
        }
        
        .da1 {
            width: 900px;
            height: 140px;
            /* background-color: #006600; */
        }
        
        img {
            width: 100px;
        }
        
        .nth {
            width: 100px;
            height: 250px;
            /* background-color: pink; */
            float: left;
            margin-right: 64px;
        }
        
        .b1 {
            font-size: 16px;
            /* background-color: red; */
            text-align: center;
            margin: 6px;
        }
        
        .b2 {
            font-size: 14px;
            /* background-color: royalblue; */
            text-align: center;
            color: #dbdbdb;
            margin: 8px;
        }
    </style>

</head>

<body>
    <div>
        <h3>热门专栏·····<span>(更多）</span></h3>
    </div>

    <div class="da">
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/1.jpg" alt="">
            <p class="b1">爆诞：世界科幻200年</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/2.jpg" alt="">
            <p class="b1">工作之苦--解决2020年代的工作新问题</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/3.jpg" alt="">
            <p class="b1">和思想家一起漫步--20世纪留给我们的10种远见</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/4.jpg" alt="">
            <p class="b1">用性别之尺丈量世界--18堂思想课解读女性问题</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/5.jpg" alt="">
            <p class="b1">穿越文学经典--复旦梁永安的爱情课</p>
            <p class="b2">音频专栏</p>
        </div>

    </div>


    <div class="da1">
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/6.png" alt="">
            <p class="b1">拍张好照片--跟七七学生活摄影</p>
            <p class="b2">图文专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/7.png" alt="">
            <p class="b1">一切美好的事物都与你有关</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/8.png" alt="">
            <p class="b1">哲学闪耀时--不一样的西方哲学史</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/9.jpg" alt="">
            <p class="b1">作家的诞生--12位殿堂级作家的写作课</p>
            <p class="b2">音频专栏</p>
        </div>
        <div class="nth">
            <img src="/04DAY 图文组合/img-demo1/10.jpg" alt="">
            <p class="b1">52倍人生--戴锦华大师电影课</p>
            <p class="b2">音频专栏</p>
        </div>

    </div>




</body>

</html>

在这里插入图片描述

二、案例2

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>demo2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1200px;
            height: 660px;
            /* background-color: royalblue; */
            margin-left: 20px;
        }
        
        img {
            width: 320px;
            height: 440px;
            /* background-color: seagreen; */
        }
        
        .nth {
            width: 320px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            color: #ffb52a;
            font-size: 30px;
            /* background-color: violet; */
        }
        
        .q1 {
            width: 160px;
            height: 78px;
            line-height: 78px;
            color: #999;
            font-size: 30px;
            border-right: #999;
            border-style: solid;
            border-right-style: dashed;
            /* background-color: brown; */
            text-align: center;
        }
        
        .q2 {
            width: 160px;
            height: 78px;
            line-height: 78px;
            float: left;
            font-size: 30px;
            /* background-color: cornsilk; */
            margin-left: 160px;
            margin-top: -82px;
            text-align: center;
            border: #999;
            border-style: solid;
            border-left-style: none;
        }
        
        .q3 {
            width: 320px;
            height: 34px;
            margin-top: 22px;
            /* background-color: yellow; */
            text-align: center;
            font-size: 32px;
            color: #999;
        }
        
        .da {
            width: 340px;
            height: 640px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="da">
        <img src="/04DAY 图文组合/img-demo2/1.jpg" alt="">
        <p class="nth">875人想看</p>
        <p class="q1">预告片</p>
        <p class="q2">预售</p>
        <p class="q3">1月20日上映</p>

    </div>
    <div class="da">
        <img src="/04DAY 图文组合/img-demo2/2.jpg" alt="">
        <p class="nth">1107人想看</p>
        <p class="q1">预告片</p>
        <p class="q2">预售</p>
        <p class="q3">1月21日上映</p>
    </div>
    <div class="da">
        <img src="/04DAY 图文组合/img-demo2/3.png" alt="">
        <p class="nth">605人想看</p>
        <p class="q1">预告片</p>
        <p class="q2">预售</p>
        <p class="q3">1月21日上映</p>
    </div>
    <div class="da"><img src="/04DAY 图文组合/img-demo2/4.jpg" alt="">
        <p class="nth">6860人想看</p>
        <p class="q1">预告片</p>
        <p class="q2">预售</p>
        <p class="q3">2月1日上映</p>
    </div>
</body>

</html>

在这里插入图片描述

一些小细节

图文组合，可以理解为多个盒子嵌套组成，写代码的时候，可以先给盒子搭配上背景颜色，这样更加直观容易理解。
注意可以定义img的宽和高，图片也会等比例变化。

可达可达可达鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web一阶段 day09
gaoyuan0277的博客
07-21 53
css精灵英文叫法csssprites，通常被解释为“CSS图像拼合”或“CSS贴图定位”；其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
常见图文组合以及溢出隐藏
WYF857446152的博客
04-15 620
先给大家介绍几种常见的居中方式：文本垂直居中使用line-height=heght；可以实现。 写在父级，子击中行元素，行块元素文本水平居中text-align：center； 块元素相对于在父级水平居中：margin：0 auto； 还有设置文本介绍时，文字内容会超出盒子宽度，这时可以设置文本多余部分隐藏，多余的部分设置为省略号。 单行省略号：overflow：hidden；（溢出隐藏）text-overflow：ellipsis；（超出部分用省略号显示）whit-space：nowrap（不换行
Day4_0415 图文组合
weixin_52335062的博客
04-15 57
1、常见的图文组合： ●单图单文： （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-
day16 HTML5结构性标签 css3
cpshow300的博客
08-22 173
HTML5结构性标签 <header></header>页眉，也可以用于板块头部 <nar></nar>导航（链接的一个列表） <nar> <a href="#">链接</a><a href="#">链接</a> </nar> <section></section>页面上的板块 <article></article&g...
day03
m0_54022091的博客
09-20 115
今日知识点： 1、css基础选择器优先级 2、css文本相关属性 3、css选择器进阶（6个） 4、盒模型 5、语义化的作用‘ HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述） div,span ul,ol,h1,em,strong,ins ,del 什么是语义化： 在合适的位置用合适的标签体验文档的结构（白话） 语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等） 语义化的好处（为什么
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
m0_47268176的博客
11-30 1万+
day06 布局核心： 盒模型（间距） 浮动 （并排） 定位 （覆盖+ 特殊位置） 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用：解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes ​ 2. 参考对象：自身初始位置 ​ 3. 脱离不脱离标准流 不脱离标准（保留原来位置 ） ​ 4. 是否适合布局：不适合
day08笔记
m0_60147773的博客
08-16 62
day08笔记 一、markdown文档 1、官方的解释 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RX3Dt4eR-1629084144291)(C:\Users\Mac\Desktop\H5-2109\day08\笔记\images\1.png)] 2、自己的解释 markdown格式也是一种文档或者叫做文件，和word、ppt、txt文档都是一样的，作用都是让咱们便于去整理或者去写一些图文相关的知识 markdown文件格式支持html标记 可以任意转成其他你想要
web笔记day07
Serendipity_yuha的博客
09-27 77
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门。
前端笔记day09
weixin_69506130的博客
08-01 56
111
【推荐架构day5】今日头条算法的基本原理
热门推荐
作一个独立连续的思考者
02-22 6万+
本文来自今日头条曹欢欢博士的分享。今天，算法分发已经是信息平台、搜索引擎、浏览器、社交软件等几乎所有软件的标配，但同时，算法也开始面临质疑、挑战和误解。今日头条的推荐算法，从2012年9月第一版开发运行至今，已经经过四次大的调整和修改。 今日头条委托资深算法架构师曹欢欢博士，公开今日头条的算法原理，以期推动整个行业问诊算法、建言算法；通过让算法透明，来消除各界对算法的误解，并逐步推动整个行业让算...
BlueCMS-0day代码审计
孤桜懶契
04-17 698
代码审计的思路 代码审计核心在于通过源代码，知道代码如何执行，然后根据代码执行中可能产生的问题来寻找漏洞。 代码审计一般泛指白盒审计，但是要记住，通用性漏洞，例如CMS通杀漏洞，其实并不是仅仅只有代码审计能好到，本地搭建然后纯黑盒测试也可以的。只不过代码审计更为全面的容易找到漏洞 代码审计其实思路很简单，一共两条路线，全文通读和敏感函数定位。 全文通读：我看了每一行代码不是还不够清楚吗？ 敏感函数定位：掌握住可以存在危险函数的地方 反推 渗透测试人员 -> 渗透测试 -> 找漏洞 -&
【供应链架构day7】美团供应链的架构之道：O2O关键战场在供给端
作一个独立连续的思考者
02-21 6万+
英国知名供应链专家Martin Christopher曾经说过一句非常深刻的话：“21世纪的竞争不是企业和企业之间的竞争，而是供应链和供应链之间的竞争。” 什么是供应链 在风云变幻、寡头纷争的O2O战场，美团屡出重拳并步步为营，战绩不俗。这一切离不开背后的神秘技术团队——供应链。 供应链，简称 SCP（Supply Chain Process）。美团借助平台的优势与商家展开合作，将...
超详细excle入门教程！万字长文，图文详解！
Viper的程序员修炼手册
10-11 4757
Excle入门教程 最近在使用Excle的时候，发现有很多操作不太会。在csdn查阅的时候，发现既然都没有好的excle入门教程，于是写一篇文章，希望能够帮助到大家！**文章内容较多，可以在右侧目录直接找自己需要的部分查看。**文章会持续更新，欢迎大家点赞，收藏！ EXCEL 实用技巧系列 **一。将单元格复制成图片： **1 选择区域 2 按住SHIFT不放，点击编辑/复制图片 3 按自己的要求在弹出的对话框里选择 4 确定 **二。如何使用照相机 **你可以在菜单栏上单击右键，选择自定义，然后在命令－工
HTML5有格调的个人介绍网站源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-26 1744
HTML5有格调的个人介绍网站源码，个人网站下载，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。页面分为个人信息，项目统计，我的相册，朋友评价，保持联系等模块，根据自己需求可以扩展自己需要的功能。注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5 数据 URL(data URL)是什么?
呼叫6945的博客
08-27 575
数据 URL（）是一种特殊的 URL 方案，它允许在网页或应用中嵌入数据，而不是通过外部资源进行引用。数据 URL 的格式使得你可以将数据直接嵌入 HTML、CSS 或 JavaScript 中，从而避免了需要通过额外的 HTTP 请求加载外部资源。
HTML5手机端通用网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-26 1462
HTML5手机端通用网站模板，手机端网站通用模板，模板源码，有列表，表单，表格，文章，列表，TAB，导航菜单等通用功能，便于扩展使用，内置十几个页面范例，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
Window Performance API
Bruce__taotao的博客
08-28 1700
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
最新发布
liux6687的博客
08-29 1615
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
HTML5与CSS3引用参考指南：理解cite元素
在提供的代码片段中，可以看到`<cite>`元素被用来表示音乐专辑“Abbey Road”、电影“A Hard Day's Night”、书籍“The Beatles Anthology”以及艺术作品“Mona Lisa”的名称。值得注意的是，当引用内容的语言不是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值