前端入门——基于html和css常见图文组合实现

已于 2022-05-22 19:34:47 修改
阅读量338 收藏 6
点赞数 1
分类专栏： 前端学习笔记 文章标签： css 前端 html 学习
于 2022-05-22 19:31:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45727209/article/details/124914829
版权
这篇博客详细介绍了如何使用HTML和CSS来创建常见的图文组合，包括书籍专栏、院线电影展示、学习资源专栏和小说作者推荐。通过这些实例，读者可以学习到如何在前端开发中有效地陈列信息。
摘要由CSDN通过智能技术生成

（针对html和css的常见图文组合实现）

图文组合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>demo1</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        .all {
     
            width: 820px;
            height: 620px;
            background-color: #f7f7f7;
            border: 20px solid black;
        }
        
        .title {
     
            margin: 20px 0 12px 20px;
            height: 20px;
        }
        
        .title p {
     
            line-height: 20px;
            font-size: 18px;
            color: #006600;
        }
        
        .show {
     
            height: 560px;
        }
        
        .show>div {
     
            height: 280px;
        }
        
        .single {
     
            width: 100px;
            height: 140px;
            margin-left: 32px;
            margin-right: 32px;
            float: left;
        }
        
        .single div,
        .single p {
     
            margin-bottom: 10px;
        }
        
        .img {
     
            width: 100px;
            height: 140px;
            text-align: center;
        }
        
        .single p {
     
            font-size: 16px;
            text-align: center;
            line-height: 20px;
            color: #101010;
        }
        
        .subject {
     
            text-align: center;
            font-size: 14px;
            line-height: 20px;
            color: #dbdbdb;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="title">
            <p>热门专栏······<a href="" style="text-decoration: none;color: #5a8bb4;">（更多）</a></p>
        </div>
        <div class="show">
            <div>
                <!-- 基础单元 -->
                <div class="single">
                    <div><img class="img" src="../demo01/img/1.jpg" alt=""></div>
                    <div>
                        <p>爆诞：世界科幻200年</p>
                        <div class="subject">音频专栏</div>
                    </div>
                </div>
                <!-- 基础单元 -->

                <div class="single">
                    <div><img class="img" src="../demo01/img/2.jpg" alt=""></div>
                    <div>
                        <p>工作之苦——解决2020年代的工作新问题</p>
                        <div class="subject">音频专栏</div>
                    </div>
                </div>
                <div class="single">
                    <div><img class="img" src="../demo01/img/3.jpg" alt=""></div>
                    <div>
                        <p>和思想家一起漫步——20世纪留给我们的10种远见</p>
                        <div class="subject">音频专栏</div>
                    </div>
                </div>
                <div class="single">
                    <div><img class="img" src="../demo01/img/4.jpg" alt=""></div>
                    <div>
                        <p>用性别之尺丈量世界——18堂思想课解读女性问题</p>
                        <div class="subject">音频专栏</div>
                    </div>
                </div>
                <div class="single">
                    <div><img class="img" src="../demo01/img/5.jpg" alt=""></div>
                    <div>
                        <p>爆诞：世界科幻200年</p>
                        <div class="subject">音频专栏</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="single">
                    <div><img class="img" src="../demo01/img/6.png" alt=""></div>
                    <div>
                        <p>爆诞：世界科幻200年
最低0.47元/天 解锁文章
tyra_y
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html5/CSS/盒子模型/＜div＞/实现一个图文混排的网页效果/动手实践
No1banana的博客
01-25 6980
一、效果分析 根据图片分析得出该页面的组成部分，由标题、副标题、图片、正文、下划线、以及链接组成 二、开始实现 首先下载好图文素材，并将其保存在和准备建立html的文件同一文件夹 打开Dreamweaver2021，新建立一个html5格式的文档 建立好文档之后我们根据组成部分利用html将网页结构建立起来，正文我们使用<div>盒子模型,并着手将文字填入到对应的区域 接下来我们使用<style>标签直接用嵌入式的方式引入CSS用以实现效果 <s
前端HTML+CSS
m0_60323584的博客
04-28 286
一.概述： 1.HTML是超文本标记语言. 常见标签： 1,输入框: 单选多选 2,图片 3,按钮 4,视频 5,超链接 2.CSS是层叠样式表,主要用来修饰HTML网页的 html文件引入.css文件 <link rel="stylesheet" href="2.css"/> 1.CSS代码可以出现的位置: 1,行内CSS 2,内部CSS 3,外部CSS 语法: 选择器 { 属性名:属性值; } 2.选择器!!! 分类： 1.标签名选择器 div{} 2.class选择
Html+css之图文组合
weixin_64804275的博客
04-15 1961
图文组合一、引言二、案例1.上下布局——单图单文2.左右布局——单图单文3.左右布局——单图多文4.上下布局——单图多文 一、引言 图文组合是页面中常见的布局，大致可以分为三类：上下排列，左右排列，以及图文混排。下面结合几个案例，进行解释。 二、案例 1.上下布局——单图单文 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
【小程序开发之文章详情页面的设计】文章详情页面如何布局
m0_61088839的博客
05-31 2957
本篇博客是小程序开发系列的第四篇，在上一篇博客中介绍的是首页的制作，除了展示轮播图图片，食谱的封面、名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面。 除了在首页的js里面编写跳转函数之外（函数用来获取轮播图/食谱/文章的id，并携带id进行页面跳转）我们还需要创建page，制作详情页面。 页面效果 在我的小程序中，文章详情页顶部的图片是一张固定的图片（也就是每篇文章的详情页顶部都使用同一张图片作为装饰）大家可以根据需要自行修改图片。 然后顶部图片下面展示的是文
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
weixin_32440005的博客
06-02 1537
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。列表的效果如图所示：　　最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 C...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
总的来说，这份【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是一份全面且实用的学习资料，它涵盖了前端开发的三大核心技术，并结合了个人实践和理解，对于希望入门前端开发的学习者来说是一...
web前端期末大作业——基于HTML+CSS+JavaScript实现中国茶文化(30页)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
前端体验设计——HTML5CSS3终极修炼
07-22
资源名称：前端体验设计——HTML5 CSS3终极修炼内容简介：本书是Web设计畅销书《超越CSS》作者力作，结合当前移动互联网下的硬件变化情 况，以一个Web设计发者的视角，将老的工作方法与新技术相结合，通过丰富的案例...
web前端期末大作业——基于HTML+CSS制作河南旅游网页设计
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
基于html和css的小米商城前端页面仿写源码.zip
08-26
基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端...
从零开始学习html（三） 认识标签(第二部分)
setsunadoudou的博客
09-10 165
一、使用ul，添加新闻信息列表 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="te...
在html中图文结合的怎么写,html实现文字绕排示例(html图文混排)
weixin_29870701的博客
05-31 1096
1.文字绕图如果我们使用正常的，例如：复制代码代码如下:这里是普通的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。这样的语句中图片比文字高度要高，则文字上部会有空白出现。页面的效果非常不好。如何解决呢？请看这个代码：复制代码代码如下:这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。在img这个元素中加入这个属性就可以解决：a...
前端学习——css图像拼合技术（精灵图）
sw520lkm的博客
05-31 1116
Author：Vivi Time：2021-5-31 20：52 图像拼接就是将很多很多的小图标放在一张图片上,称之为雪碧图或精灵图（CSS Sprites）。 一、使用雪碧图的优点如下： 1、将多张图片合并到一张图片中，可以减小图片的总大小。 2、将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。 sprites图其实就是将一大块图用来做背景图，与普通背景图不同的是：sprites图只在某固定位置显示某部分图。 案例一：图像拼合 - 创建一个导航列表 使用拼.
HTML 图文组合
Cc200171的博客
04-15 487
居中 1. line-height = height 文本垂直居中 2. text-align: center; 写在父级，子级中的行标签，行块标签，文本内容水平居中 3. margin: 0 auto; 写在块元素，相对于父级水平居中 注：img 行块元素默认下边会产生一个间隙，解决方案转化为块元素 test01 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 94
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 235
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 111
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1229
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML5移动电商系统前端设计与实现——基于React和Node.js
"这篇文档是关于基于HTML5的移动电商系统前端设计与实现的详细论述，探讨了HTML5在移动互联网时代的应用，特别是在移动电商领域的重要性。文档提及上海某公司利用微信、QQ等社交平台开展商品团购服务，通过HTML5技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tyra_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值