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 - 图文混排&布局【精美版 - 下】