0 0 4 1 - 双飞之图文混排,Web密训营,Web开发,鱼C论坛

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

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

本帖最后由不二如是于 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;
}

效果图：

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

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

每天来膜拜下大佬,多少吸点仙气{:10_249:}

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

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

不要叫大神，只是一个‘吹水发骚友’{:10_278:}

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

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

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

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

{:10_281:}以后可以强强联手，搞一个文章排版教程

迷途发表于 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

0-0

不二如是 发表于 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>

</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

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

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

想深入了解一下为什么这样能够清除浮动 {:10_243:}
<!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>

页: [1] 2

鱼C论坛's Archiver

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