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

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

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

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

x

本帖最后由不二如是于 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，刚好图片一半骑在线上。

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

）

官方 Web 课程：

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>,
snip--2017-7-8-38--图文.jpg

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

交作业，之前的作业都有完成不过没上传。现在看回复的人越来越少了，应该也有很多跟我一样是在默默地做着作业但是不好意思上传的。谢谢老师的教学。
[code]<!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是均匀分割图片,我测试了很多遍

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

[庖丁解牛] 0 0 3 8 - 图文混排&布局【精美版 - 下】

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

评分

本帖被以下淘专辑推荐:

点评

评分

点评

[庖丁解牛] 0 0 3 8 - 图文混排&布局 【精美版 - 下】

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

评分

本帖被以下淘专辑推荐:

点评

评分

点评

[庖丁解牛] 0 0 3 8 - 图文混排&布局【精美版 - 下】