页面内容样式设计——图文混排

最新推荐文章于 2024-07-24 16:53:23 发布

Ronny-7

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量4.6k

点赞数 3

分类专栏： Web前端文章标签： html css

本文链接：https://blog.csdn.net/Cristiano272/article/details/106211936

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图文混排

图文混排是制作精美页面必须使用的技术，通过将适当的图像与文字有效地排列在一起，可以大大丰富版面内容。图文混排的结构没有统一标准，一般做法是把图像和文本信息同时封装在一个包含元素内，再嵌入其他布局元素或修饰元素。

实现一个图文混合单元模块

1. HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>图文混排挡</title>
    <style>
        .article{
            border: 1px solid hsl(0,80%,90%);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            position: relative;
            background-color: black;
            width:210px;
            height:230px;
        }
        h2{
            font-size: 14px;
            color: #FFFFFF;
            background-color: red;
            position: absolute;
            top: 18px;
            right: 0;
            text-align: center;
            width: 60px;
            height: 18px;
        }
        h3{
            font-size: 85%;
            color: #FFFFFF;
            text-align: center;
        }
        p{
            font-size: 10px;
            text-indent: 25px;
            margin-top: 0;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<article id="content">
    <div class="article">
        <h2>7月</h2>
        <div id="photo"><a href="#"><img src="images/sara.jpg" alt=""></a></div>
        <h3>萨拉一一年度最热的女人</h3>
        <p>萨拉一一年度最热的女人，没有你不能做到的。</p>
    </div>
</article>
</body>
</html>

2. 浏览器显示效果

效果图

Ronny-7

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
页面内容样式设计——图文混排

目录图文混排实现一个图文混合单元模块1. HTML代码2. 浏览器显示效果图文混排图文混排是制作精美页面必须使用的技术，通过将适当的图像与文字有效地排列在一起，可以大大丰富版面内容。图文混排的结构没有统一标准，一般做法是把图像和文本信息同时封装在一个包含元素内，再嵌入其他布局元素或修饰元素。实现一个图文混合单元模块1. HTML代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="
复制链接

扫一扫

专栏目录