鱼C论坛

 找回密码
 立即注册
查看: 3986|回复: 20

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

[复制链接]
发表于 2017-2-4 10:19:28 | 显示全部楼层 |阅读模式

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

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

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

3738我们制作了一个单个图文的混排。

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

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

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

是一种很常见布局方式。

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

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

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

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

代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css"></style>
  7. </head>
  8. <body>
  9.         <section>
  10.                 <article>
  11.                         <img src="1.png" alt="drumsticl_1">
  12.                         <h1>蓝鸡腿</h1>
  13.                         <p>穷爸爸:“你要好好学习,以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  14.                 </article>
  15.                 <article>
  16.                         <img src="2.png" alt="drumsticl_2">
  17.                         <h1>红鸡腿</h1>
  18.                         <p>富爸爸:“你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
  19.                 </article>
  20.         </section>
  21. </body>
  22. </html>
复制代码

效果图:
Snip20170204_74.png

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

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

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

便于后续增加自定义的设置。
  1. <style type="text/css">
  2.                 *{
  3.                         margin: 0;
  4.                         padding: 0;
  5.                 }
  6.         </style>
复制代码

效果图:
Snip20170204_75.png


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

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

为其设置背景色和边框:
  1. section{
  2.                         width: 980px;
  3.                         background:#f5f5f5;
  4.                         box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
  5.                 }
复制代码

效果图:
Snip20170204_76.png


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

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

就下来,将两个article元素两列排放,设置宽度、浮动即可:
  1. article{
  2.                         width: 50%;
  3.                         float: left;
  4.                 }
复制代码

效果图:
Snip20170204_78.png


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

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

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

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

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

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

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

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

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

怎么解决呢?

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

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

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

代码如下:
  1.         section::after{
  2.                         content: "";
  3.                         display: table;
  4.                         clear: both;
  5.                 }
复制代码


效果图:
Snip20170204_79.png


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

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


官方 Web 课程:

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
alltolove + 5 + 5 热爱鱼C^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-2-4 11:02:29 | 显示全部楼层
每天来膜拜下大佬,多少吸点仙气
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-4 11:48:51 | 显示全部楼层
n9vakin 发表于 2017-2-4 11:02
每天来膜拜下大佬,多少吸点仙气


不要叫大神,只是一个‘吹水发骚友’
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-4 11:51:05 | 显示全部楼层
被标题吸引过来了,还以为是文章排版的教程。
过来支持一下。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-4 11:52:29 | 显示全部楼层
迷途 发表于 2017-2-4 11:51
被标题吸引过来了,还以为是文章排版的教程。
过来支持一下。

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

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-4 20:37:11 From FishC Mobile | 显示全部楼层
不二如是 发表于 2017-2-4 11:52
以后可以强强联手,搞一个文章排版教程

很期待。有了排版知识,发出来的帖子,写出来的文章也会优美些。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-12 20:11:53 | 显示全部楼层
为什么我这个 没有。。。背景颜色和边框。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-12 20:18:30 | 显示全部楼层
向一朵朵鲜花 发表于 2017-3-12 20:11
为什么我这个 没有。。。背景颜色和边框。。

建议发一个,求助帖

将代码,效果贴出来

明天开电脑帮你处理
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-12 20:21:29 From FishC Mobile | 显示全部楼层
嗯,明天发~休息了~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-13 14:17:13 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="gb2312">
  5.         <title></title>
  6.         <style type="text/css">
  7.                                         *{
  8.                                                 margin: 0;
  9.                                                 padding: 0;
  10.                                                
  11.                                                 }
  12.                                 sertion{
  13.                                                 width: 980px;
  14.                                                 background: #f5f5f5;
  15.                                                 box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
  16.                                                 }
  17.                                         article{
  18.                                                         width: 50%;
  19.                                                         float: left;
  20.                                                         }
  21.                 section::after{
  22.                                
  23.                                                 content: "";
  24.                                                 display: table;
  25.                                                 clear: both;
  26.                                                 }

  27.                
  28.                
  29.                 </style>
  30. </head>
  31. <body>
  32.         <section>
  33.                 <article>
  34.                         <img src="1.png" alt="drumsticl_1">
  35.                         <h1>蓝鸡腿</h1>
  36.                         <p>穷爸爸:“你要好好学习,以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  37.                 </article>
  38.                 <article>
  39.                         <img src="2.png" alt="drumsticl_2">
  40.                         <h1>红鸡腿</h1>
  41.                         <p>富爸爸:“你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
  42.                 </article>
  43.         </section>
  44. </body>
  45. </html>
复制代码
1.png
2.png
TY$2B}4LHBGK057[}G)G`L9.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-13 14:17:44 | 显示全部楼层
没鸡腿图0-0  直接截图了0-0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-13 14:53:58 | 显示全部楼层
向一朵朵鲜花 发表于 2017-3-13 14:17
没鸡腿图0-0  直接截图了0-0

111.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-13 14:56:44 | 显示全部楼层
0-0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-3-13 14:58:21 | 显示全部楼层

帮后来的鱼油学习,省的一个问题来回解释~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-13 15:02:27 | 显示全部楼层
不二如是 发表于 2017-3-13 14:58
帮后来的鱼油学习,省的一个问题来回解释~

评分

参与人数 1荣誉 +6 鱼币 +6 收起 理由
不二如是 + 6 + 6 谢谢~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-28 16:47:29 | 显示全部楼层
交作业 伪元素  *:before , *:after

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>section</title>
  6.         <style type="text/css">
  7.                 *{
  8.                         margin: 0;
  9.                         padding: 0;
  10.                 }
  11.                 #article1{
  12.                         width: 50%;
  13.                         float: left;
  14.                 }
  15.                 #article2{
  16.                         width: 50%;
  17.                         float: right;
  18.                 }
  19.                 section{
  20.                         width: 100%;
  21.                         height: 100px;
  22.                         background:#f5f5f5;
  23.                         box-shadow: 0 0 1px rgba(0,0,0,.4) inset;        /*box-shadow 属性向框添加一个或多个阴影。*/
  24.                 }
  25.                 section:before{        /*CSS2 - :before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。*/
  26.                         content: "";
  27.                         display: table;
  28.                         clear: both;
  29.                 }
  30.                 /*section:after{        !*CSS2 - :after 伪元素":after" 伪元素可以在元素的内容之后插入新内容。*!
  31.                         content: "";
  32.                         display: table;
  33.                         clear: both;
  34.                 }*/
  35.         </style>
  36. </head>
  37. <body>
  38. <section>
  39.         <article id="article1">
  40.                 <img src="http://xxx.fishc.com/forum/201703/13/141706pevgs8gk88l0jkks.png" alt="drumsticl_1">
  41.                 <h1>蓝鸡腿</h1>
  42.                 <p>穷爸爸:“你要好好学习,以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  43.         </article>
  44.         <article id="article2">
  45.                 <img src="http://xxx.fishc.com/forum/201703/13/141707x807n8a8am79nm81.png" alt="drumsticl_2">
  46.                 <h1>红鸡腿</h1>
  47.                 <p>富爸爸:“你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
  48.         </article>
  49. </section>
  50. <!--<section id="section">
  51. </section>-->
  52. </body>
  53. </html>
复制代码
0034section.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-21 08:43:58 | 显示全部楼层
交作业!
041.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-13 23:52:23 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         
  14.         img {
  15.             width: 50px;
  16.             height: 50px;
  17.         }
  18.         
  19.         section {
  20.             width: 980px;
  21.             background: #f5f5f5;
  22.             box-shadow: 0 0 1px rgba(0, 0, 0, .4) inset;
  23.         }
  24.         
  25.         article {
  26.             width: 50%;
  27.             float: left;
  28.         }
  29.         
  30.         section::after {
  31.             content: '';
  32.             display: table;
  33.             clear: both;
  34.         }
  35.     </style>
  36. </head>

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

  51. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-19 21:38:28 | 显示全部楼层
交作业![code]<!DOCTYPE html>
<html lang="en">
<head>
捕获.PNG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-1 10:21:26 | 显示全部楼层
想深入了解一下为什么这样能够清除浮动
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style type="text/css">
  7. * {
  8.         margin: 0;
  9.         padding: 0;
  10. }
  11. section {
  12.         width: 980px;
  13.         background: #95a5a6;
  14.         text-shadow: 0,0,1px,rgb(0, 0, 0,.4) inset;
  15. }
  16. article {
  17.         width: 50%;
  18.         float:left;
  19. }
  20.         /* 清除浮动 */
  21. section::after{
  22.                         content: "";
  23.                         display: table;
  24.                         clear: both;
  25.                 }
  26.       
  27. </style>
  28. </head>
  29. <body>
  30. <section>
  31.         <article>
  32.                 <img src="1.jpg" alt="drumsticl_1">
  33.                 <h1>蓝鸡腿</h1>
  34.                 <p>穷爸爸:“你要好好学习,以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  35.         </article>
  36.         <article>
  37.                 <img src="2.jpg" alt="drumsticl_2">
  38.                 <h1>红鸡腿</h1>
  39.                 <p>富爸爸:“你要好好学习,以后就能开自己的公司,创造很多就业机会给别人。驱动力量是爱,好好学就会帮到更多的人。</p>
  40.         </article>
  41. </section>
  42. </body>
  43. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 16:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表