0 0 4 1 - 双飞之图文混排

不二如是 · 发表于 2017-2-4 10:19:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:27 编辑

37、38我们制作了一个单个图文的混排。

39、40我们搞定图、标题、文本的三P混排。

这次搞一个双列均匀分布布局。

将两个图、标题、文本混排布局模拟成列表形式，在很多网页中都能见到。

是一种很常见布局方式。

<section> 标签是 HTML 5 中的新标签。

定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

其实就是一个节点，该节点下的在添加两个article节点

article又包含h1、p、img三个元素。

代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"></style>
</head>
<body>
        <section>
                <article>
                        <img src="1.png" alt="drumsticl_1">
                        <h1>蓝鸡腿</h1>
                        <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
                </article>
                <article>
                        <img src="2.png" alt="drumsticl_2">
                        <h1>红鸡腿</h1>
                        <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
                </article>
        </section>
</body>
</html>

效果图：

默认效果不是一般的’丑‘。

接下来，就是见证奇迹的时刻了。

现将页面的所有margin和padding清零。

便于后续增加自定义的设置。

<style type="text/css">
                *{
                        margin: 0;
                        padding: 0;
                }
        </style>

效果图：

为了能够更佳清晰地呈现布局范围，我们给section元素设置一个固定的宽度。

顺便加一个在33讲过的box-shadow属性

为其设置背景色和边框：

section{
                        width: 980px;
                        background:#f5f5f5;
                        box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
                }

效果图：

可以用box-shadow代替border，这也是制作边框的另一种途径。

大小1px、x&y方向上没有位移，40%透明度的淡色阴影。

就下来，将两个article元素两列排放，设置宽度、浮动即可：

article{
                        width: 50%;
                        float: left;
                }

效果图：

我擦，排列成功了，但是设置的边框和背景色居然不见了！

难道是优先级？合并？还是弱肉强食？

正好借此机会，来介绍下文档流的原理。

在section中原本有两个article元素，这就形成了section内部的文档流。

而section的高度正是由article元素高度得来。

当我们将article加以浮动时，按之前咱们建立起来的认知系统。

他们就从文档流中抽取出来了，不受section设置影响。

当section中两个articl都设置为float，其内部文档都被抽空。

这样就失去了自身的高度，类似‘崩塌’了。

怎么解决呢？

只要在父元素中添加一个不浮动的子元素来稳定section内部结构，就可以了。

而为了DOM（Document Object Model(文档对象模型））结构的简单，常使用：：after伪元素完成。

如果你忘了选择器优先级，请点这里：0 0 3 4 - CSS优先级 | 全网最粗暴有效

代码如下：

        section::after{
                        content: "";
                        display: table;
                        clear: both;
                }

效果图：

这三行代码，是我们目前最常用的清除浮动的方法。

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

n9vakin · 发表于 2017-2-4 11:02:29

每天来膜拜下大佬,多少吸点仙气

不二如是 · 发表于 2017-2-4 11:48:51

n9vakin 发表于 2017-2-4 11:02
每天来膜拜下大佬,多少吸点仙气

不要叫大神，只是一个‘吹水发骚友’

迷途 · 发表于 2017-2-4 11:51:05

被标题吸引过来了，还以为是文章排版的教程。
过来支持一下。

不二如是 · 发表于 2017-2-4 11:52:29

迷途发表于 2017-2-4 11:51
被标题吸引过来了，还以为是文章排版的教程。
过来支持一下。

以后可以强强联手，搞一个文章排版教程

迷途 · 发表于 2017-2-4 20:37:11

不二如是发表于 2017-2-4 11:52
以后可以强强联手，搞一个文章排版教程

很期待。有了排版知识，发出来的帖子，写出来的文章也会优美些。

向一朵朵鲜花 · 发表于 2017-3-12 20:11:53

为什么我这个没有。。。背景颜色和边框。。

不二如是 · 发表于 2017-3-12 20:18:30

向一朵朵鲜花发表于 2017-3-12 20:11
为什么我这个没有。。。背景颜色和边框。。

建议发一个，求助帖

将代码，效果贴出来

明天开电脑帮你处理

向一朵朵鲜花 · 发表于 2017-3-12 20:21:29

嗯，明天发～休息了～

向一朵朵鲜花 · 发表于 2017-3-13 14:17:13

<!DOCTYPE html>
<html>
<head>
        <meta charset="gb2312">
        <title></title>
        <style type="text/css">
                                        *{
                                                margin: 0;
                                                padding: 0;
                                                
                                                }
                                sertion{
                                                width: 980px;
                                                background: #f5f5f5;
                                                box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
                                                }
                                        article{
                                                        width: 50%;
                                                        float: left;
                                                        }
                section::after{
                                
                                                content: "";
                                                display: table;
                                                clear: both;
                                                }

                
                
                </style>
</head>
<body>
        <section>
                <article>
                        <img src="1.png" alt="drumsticl_1">
                        <h1>蓝鸡腿</h1>
                        <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
                </article>
                <article>
                        <img src="2.png" alt="drumsticl_2">
                        <h1>红鸡腿</h1>
                        <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
                </article>
        </section>
</body>
</html>

向一朵朵鲜花 · 发表于 2017-3-13 14:17:44

没鸡腿图0-0 直接截图了0-0

不二如是 · 发表于 2017-3-13 14:53:58

向一朵朵鲜花发表于 2017-3-13 14:17
没鸡腿图0-0 直接截图了0-0

向一朵朵鲜花 · 发表于 2017-3-13 14:56:44

不二如是 · 发表于 2017-3-13 14:58:21

向一朵朵鲜花发表于 2017-3-13 14:56
0-0

帮后来的鱼油学习，省的一个问题来回解释～

向一朵朵鲜花 · 发表于 2017-3-13 15:02:27

不二如是发表于 2017-3-13 14:58
帮后来的鱼油学习，省的一个问题来回解释～

嗯

shishunfu · 发表于 2017-4-28 16:47:29

交作业伪元素 *:before , *:after

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>section</title>
        <style type="text/css">
                *{
                        margin: 0;
                        padding: 0;
                }
                #article1{
                        width: 50%;
                        float: left;
                }
                #article2{
                        width: 50%;
                        float: right;
                }
                section{
                        width: 100%;
                        height: 100px;
                        background:#f5f5f5;
                        box-shadow: 0 0 1px rgba(0,0,0,.4) inset;        /*box-shadow 属性向框添加一个或多个阴影。*/
                }
                section:before{        /*CSS2 - :before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。*/
                        content: "";
                        display: table;
                        clear: both;
                }
                /*section:after{        !*CSS2 - :after 伪元素":after" 伪元素可以在元素的内容之后插入新内容。*!
                        content: "";
                        display: table;
                        clear: both;
                }*/
        </style>
</head>
<body>
<section>
        <article id="article1">
                <img src="http://xxx.fishc.com/forum/201703/13/141706pevgs8gk88l0jkks.png" alt="drumsticl_1">
                <h1>蓝鸡腿</h1>
                <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
        </article>
        <article id="article2">
                <img src="http://xxx.fishc.com/forum/201703/13/141707x807n8a8am79nm81.png" alt="drumsticl_2">
                <h1>红鸡腿</h1>
                <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
        </article>
</section>
<!--<section id="section">
</section>-->
</body>
</html>

aswyamato1989 · 发表于 2017-7-21 08:43:58

交作业！

soulwyb · 发表于 2018-11-13 23:52:23

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            width: 50px;
            height: 50px;
        }
        
        section {
            width: 980px;
            background: #f5f5f5;
            box-shadow: 0 0 1px rgba(0, 0, 0, .4) inset;
        }
        
        article {
            width: 50%;
            float: left;
        }
        
        section::after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <section>
        <article>
            <img src="41-1.jpg" alt="drumstic_1">
            <h1>穷爸爸</h1>
            <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
        </article>
        <article>
            <img src="42-2.jpg" alt="drumstic_2">
            <h1>富爸爸</h1>
            <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
        </article>
    </section>
</body>

</html>

克里斯保罗 · 发表于 2019-8-19 21:38:28

交作业！[code]<!DOCTYPE html>
<html lang="en">
<head>

你在意在便在 · 发表于 2019-11-1 10:21:26

想深入了解一下为什么这样能够清除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
}
section {
        width: 980px;
        background: #95a5a6;
        text-shadow: 0,0,1px,rgb(0, 0, 0,.4) inset;
}
article {
        width: 50%;
        float:left;
}
        /* 清除浮动 */
section::after{
                        content: "";
                        display: table;
                        clear: both;
                }
       
</style>
</head>
<body>
<section>
        <article>
                <img src="1.jpg" alt="drumsticl_1">
                <h1>蓝鸡腿</h1>
                <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
        </article>
        <article>
                <img src="2.jpg" alt="drumsticl_2">
                <h1>红鸡腿</h1>
                <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
        </article>
</section>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 4 1 - 双飞之图文混排

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

评分