0 0 3 8 - 图文混排&布局【精美版 - 下】,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-1-31 19:30:05

0 0 3 8 - 图文混排&布局【精美版 - 下】

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

在37，我们用<img>自带的属性完成了图文混排。

从更纯粹的开发角度讲，这还不够！

现在让你见识下div包裹的玩法

将<img><p>都包裹进div，代码：
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">

   </style>
</head>
<body>
<div class="fishc">
   <img src="神兽.png" alt="神兽">
   <p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
</div>
</body>
</html>
效果图：

为类“fishc”添加CSS样式（如果你忘了，选择器优先级，请点这里）：
.fishc{
         background: #eee;
         padding: 20px 50px 30px;
         margin-top: 150px;
         position: relative;
         border-top: 10px solid #399;
      }
效果图：

首先设置背景色为#eee灰色，这样可以区别文本块的边界。

内边距顶部为20px、左右各50px、底部30px；
（如果不记得padding的玩法，请点这里、框模型）

设置padding不仅可以使文本内容与边界保持距离。

还可以为悬浮图片预留上方空间。

设置相对位置，为下一步悬浮图片做准备。

最后设置顶部分割线，10px宽的绿色实线。

设置悬浮图片、放大字体、缩进文本：
p{
         font-size: 33px;
         text-indent: 2em;
      }
img{
         margin-top:-75px;
      }
效果图：

默认图像高度90px，内边距设置20px，顶边线10px

所以上移，75px，刚好图片一半骑在线上。

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

官方 Web 课程：

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

joker11111 发表于 2017-4-4 16:29:25

骑在线上的神兽真可爱，哈哈哈哈哈

shishunfu 发表于 2017-4-27 14:46:23

交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排&布局2</title>
<style>

body{
color: red;
}
.div{
background-color: #eee;
padding: 20px 50px 30px;
margin-top: 100px;
position: relative;
border-top: 10px solid #399;
}
p{
font-size: 33px;
text-indent: 2em;
}
img{
margin-top:-75px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://xxx.fishc.com/forum/201701/31/105604kd4mvt14fux1imt6.png" alt="神兽" >

<p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。
还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？
如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华！
</p>
</div>

</body>
</html>

晓月56 发表于 2017-7-9 00:02:05

倒车入库；
E=mc<sup>2</sup>,

aswyamato1989 发表于 2017-7-19 05:19:04

交作业！

likesunshine 发表于 2018-3-25 20:59:54

点赞，支持，顺便交作业
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>0038</title>
<style type='text/css'>
.fishc{
background: #eee;
padding: 20px 50px 30px;
margin-top: 150px;
position: relative;
border-top: 10px solid #399;
}
p{
font-size: 33px;
text-indent: 2em;
}
img{
margin-top: -75px;
}
</style>
</head>
<body>
<div class='fishc'>
<img src='神兽.png' alt='神兽'>
<p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
</div>
</body>
</html>

小苏鱿鱼2 发表于 2018-10-24 16:40:28

为什么 img 设置margin-top 负数没反应呢

小苏鱿鱼2 发表于 2018-10-24 17:03:41

img不是行内元素吗，为嘛上面那些同学都可以直接margin-top,还成功了，我写就出不了div盒子框，只能设置display：block 才可以

soulwyb 发表于 2018-10-26 00:08:05

<!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>
   .fishc {
         background: #eee;
         padding: 20px 50px 30px;
         margin-top: 150px;
         position: relative;
         border-top: 10px solid #399;
   }

   p {
         font-size: 33px;
         text-indent: 2em;
   }

   img {
         margin-top: -75px;
   }
</style>
</head>

<body>
<div class="fishc">
   <img src="神兽.jpg" alt="神兽">
   <p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华
   </p>
</div>
</body>

</html>

fangfangfengfei 发表于 2019-6-15 23:01:21

margin-top 等于负值上移这个挺有意思的

fangfangfengfei 发表于 2019-6-18 22:42:42

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
   *{
         margin: 0;
         padding: 0;
   }
   .fish{
         position: relative;
         margin-top:150px;
         border-top: 3px solid #399;
         padding: 20px 50px 30px;
         background: #eee;
         margin-left: 20px;
         margin-right: 20px;
   }
   img{float: left;
         margin-right: 5px;
         width: 55px;
         margin-top: -60px;

   }
   p{
         font-family: "STheiti";
         font-size: 33px;
   }
</style>
</head>
<body>
<div class="fish">
<hr/>
<img src="xuanwu.png" alt="乌龟">
<p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
   但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
   你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
</div>
<div class="cont">
   <h1>hello\n
   </h1>
</div>
</body>
</html>

小乌龟骑绿线

克里斯保罗 发表于 2019-8-18 16:18:58

交作业<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
.hello{
background:#eee;
padding: 20px 50px 30px;
margin-top:150px;
position: relative;
border-top: 10px solid #399;
}
p{
font-size: 33px;
text-indent: 2em;
}
img{
margin-top: -75px;
}
</style>
</head>
<body>
<div class="hello">
<img src="../img/100" alt="cat100">
<p>蹦出来的喵</p>
<p>
如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华
</p>

</div>

</body>
</html>

你在意在便在 发表于 2019-10-31 20:39:48

滴滴滴，作业~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style type="text/css">
.fishc {
   background: lightgreen;
   padding: 20px 50px 30px;
   margin-top: 150px;
   position:relative;
   border:10px solid #34495e;
}
p {
   font-size: 33px;
   text-indent: 2em;
}
img {
   margin-top:-75px;
   /*(图片尺寸(90px) + 上内边距(20px) + 线宽(10px))/2] = 75 居中位负值向上 */
}
</style>
</head>
<body>
<div class="fishc">
<img src="神兽.png" alt="小龟龟" />
<p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
</div>
</body>
</html>

suweixuan1998 发表于 2020-1-4 15:19:09

交作业，之前的作业都有完成不过没上传。现在看回复的人越来越少了，应该也有很多跟我一样是在默默地做着作业但是不好意思上传的。谢谢老师的教学。
<!doctype html>
<html>

suweixuan1998 发表于 2020-1-4 15:19:54

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片排版</title>
<style type="text/css">
img{
float:left;
margin-right:10px;
width: 55px;
margin-top:-70px;
}
p{
font-family: "STheiti";
font-size: 33px;
text-indent: 2em;
}
.fishc{

background: #eee;
padding: 20px 50px 30px;
margin-top: 150px;
position: relative;
border-top: 10px solid #399;

}
</style>
</head>

<body>
<div class="fishc">
<img src="../1号/2.png" alt="神兽">
<p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
</div>
</body>
</html>

红tea少年 发表于 2022-2-11 10:20:39

上移70px是均匀分割图片,我测试了很多遍{:10_257:}

页: [1]

鱼C论坛's Archiver

0 0 3 8 - 图文混排&布局 【精美版 - 下】

0 0 3 8 - 图文混排&布局【精美版 - 下】