0 0 3 9 - Hero Unit 图文混排【粗糙版】

不二如是 · 发表于 2017-2-2 12:47:12

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

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

x

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

38、37我们完成了简单的图文混排，还是不够砖业！

在商业网站中都有一个焦点区域，专门用于宣传主要产品、公司文化、slogan等脸面工程。

这一区域，就被称为Hero Unit（主要单元）。

看一下，Apple的Hero Unit，B格更高：

有言在先，暂时还做不了这么好看的HU排版，先搞一个单张水货版。

因为本人除了编程爱好，就是极度痴迷撸铁

所以这次，介绍个健身届的名言

“想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。

强壮的人比弱小的人更难杀死，总体上也更有用。

钢铁永远不会对你撒谎。

如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。

最老实的只有钢铁。

钢铁是伟大的参照点，无所不知的它会告诉你所有信息。

就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。

永远不会对我撒气，永远不会离开我。

朋友们也许分分合合，但是200磅的钢铁永远是200磅。“

代码还是放在div中：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Hero Unit</title>
        <style type="text/css">
                
        </style>
</head>
<body>        
        <div class="HeroUnit">
        <img src="Muscle_logo.png">
        <h1>编程&撸铁</h1>
        <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
        </div>
</body>
</html>

效果图：

字体颜色，设置为白色。

设置HeroUnit区的宽、高、背景色

        p{
                color: #FFF;
        }
        h1{
                color: #FFF;
        }
                width: 900px;
                height: 400px;
                background-color: #000;
        }

效果图：

还差点，把整个HU区移到中间：

.HeroUnit{
text-align: center;
                padding: 55px 66px;
}

效果图：

text-align属性用来设置文本居中，“威力”巨大！

使得div中所有块状元素全部居中显示。

padding设置内外边距，上下55px、左右66px。

从图上我们看到，padding宽高有些多余的尺寸。

难道，我们要自己计算切除这些冗余的吗？

不用！

使用box-sizing：border-box，自动帮你去除多余的padding

.HeroUnit{
box-sizing: border-box;
}

效果图：

最后一步修改下，h1、p字体

p{
                color: rgba(255,255,255,.7);
        }
        h1{
                color: #FFF;
                margin: 10px auto;
                font-size: 55px;
        }

p中字体设置为白色，70%透明度。

标题设置为55px大小，上下块状元素之间距离10px。

效果图：

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

）

官方 Web 课程：

joker11111 · 发表于 2017-4-4 19:51:18

开始：

然后：

最后：

复习一下ps技能

shishunfu · 发表于 2017-4-28 09:13:04

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hero Unit</title>
        <style type="text/css">
                p{
                        color: rgba(255,255,255,.7);
                }
                h1{
                        color: #FFF;
                        margin: 10px auto;
                        font-size: 55px;
                }
                .HeroUnit{
                        width: 900px;
                        height: 400px;
                        background-color: #000;
                        text-align: center;
                        padding: 55px 66px;
                        box-sizing:border-box;
                }
        </style>
</head>
<body>
<div class="HeroUnit">
        <img src="eg_cute.gif">
        <h1>编程&撸铁</h1>
        <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。

                强壮的人比弱小的人更难杀死，总体上也更有用。

                钢铁永远不会对你撒谎。

                如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。

                最老实的只有钢铁。

                钢铁是伟大的参照点，无所不知的它会告诉你所有信息。

                就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。

                永远不会对我撒气，永远不会离开我。

                朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
</div>

</body>
</html>

像番茄加两个蛋 · 发表于 2018-4-15 14:02:41

alltolove · 发表于 2017-2-2 14:09:03

恩，只要功夫深，铁杵也能撸成针

不二如是 · 发表于 2017-2-2 19:19:27

alltolove 发表于 2017-2-2 14:09
恩，只要功夫深，铁杵也能撸成针

好一个只要功夫深

type_J · 发表于 2017-2-2 21:54:21

不二如是 · 发表于 2017-2-3 19:51:53

type_J 发表于 2017-2-2 21:54

a540656809 · 发表于 2017-3-6 14:58:58

撸铁是啥

aswyamato1989 · 发表于 2017-7-19 05:57:11

交作业！

likesunshine · 发表于 2018-3-26 10:50:14

功夫深，铁杵针

统冠陶瓷 · 发表于 2018-5-21 23:28:49

交作业

soulwyb · 发表于 2018-10-30 23:48:08

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>39</title>
    <style type="text/css">
        body {
            color: white;
        }
        
        .HeroUnit {
            width: 900px;
            height: 400px;
            background-color: #000;
            text-align: center;
            padding: 55px 66px;
            box-sizing: border-box;
        }
        
        img {
            width: 150px;
            height: 100px;
        }
        
        p {
            color: rgba(255, 255, 255, .7);
        }
        
        h1 {
            margin: 10px auto;
            font-size: 55px;
        }
    </style>
</head>

<body>
    <div class="HeroUnit">
        <img src="timg.jpg">
        <h1>
            编程&坦克
        </h1>
        <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔， 我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
    </div>
</body>

</html>

sjx532963148 · 发表于 2019-3-5 17:09:24

非常感谢！
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
               p{
                     color:rgba(255,255,255,.7);
               }
               h1{
                     color:#fff;
                     margin:10px auto;
                     font-size:5px;
               }
               .fishc{
                     width:900px;
                     height:400px;
                     background-color:#000;
                     text-align:center;
                     padding:55px 66px;
                     box-sizing:border-box;
               }
      </style>
</head>
<body>
      <div class="fishc">
      <img src="神兽.png" alt="神兽">
      <p>如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc<sup>2</sup>，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华</p>
      </div>
</body>
</html>

HTML开发 · 发表于 2019-5-13 13:35:48

开车都把刹车拆掉了吗？

fangfangfengfei · 发表于 2019-6-15 23:10:21

老铁最后几张效果图下面截短了些元素默认 width为内容区宽度不带padding宽度
设置box-sizing后盒子模型改变 width=原width+padding

克里斯保罗 · 发表于 2019-8-18 16:33:30

为啥我的CSS样式不能继承，sublime中直接变成白色的了

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                .HeroUnit{
                        text-align: center;
                        padding: 55px 66px;
                        width:999px;
                        height: 400px;
                        background-color:#000;
                        box-sizing: border-box;
                }
                p{
                                color:rgba(255,255,255,.7);
                        }
                        h1{
                                color:#FFF;
                                margin:10px auto;
                                font-size: 55px;
                        }
        </style>
</head>
<body>
        <div class="HeroUnit">
        <img src="../img/100" alt="cat">
        <h1>Cat</h1>
        <p>
真的猛士，敢于直面惨淡的人生，敢于正视淋漓的鲜血
悲剧将人生的有价值的东西毁灭给人看，喜剧将那无价值的撕破给人看
只看一个人的着作，结果是不大好的：你就得不到多方面的优点。必须如蜜蜂一样，采过许多花，这才能酿出蜜来。倘若叮在一处，所得就非常有限，枯燥了。</p>
        </div>
</body>
</html>

你在意在便在 · 发表于 2019-10-31 21:38:48

继续~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hero Unit</title>
<style type="text/css">
p,h1 {
        color:#546de5;
        text-align: center;
}
.HeroUnit {
        height: 400px;
        widows: 900px;
        background-color: #f8a5c2;
        text-align: center;
        box-sizing: border-box;
}
img {
        width: 200px;
        height: 200px;
}
p {
        color: rgb(41,128,185,.7);
}
h1 {
        color:#786fa6;
        margin: 10px auto;
        font-size: 55px;
}
</style>
</head>
<body>        
<div class="HeroUnit">
<img src="lt.jpg">
<h1>编程&撸铁</h1>
<p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
</div>
</body>
</html>

suweixuan1998 · 发表于 2020-1-4 15:58:46

坚持回复，谢谢老师。

<!doctype html>
<html>
                <head>
                                <meta charset="utf-8">
                                <title>图片排版</title>
                                <style type="text/css">
                                p{
                                        color: #FFF;
                                        font-size:23px;
                                        
                                }
                                h1{
                                                color: #FFF;
                                
                                }
                                .HeroUnit{
                                                width: 900px;
                                                height: 400px;
                                                background-color: #000;
                                                text-align: center;
                                                padding: 55px 66px;
                                                
                                }
                                img{
                                        width:66px;
                                }
                                </style>
                </head>
                <body>
                                <div class="HeroUnit">
                                                <img src="../1号/2.png">
                                                <h1>编程&撸铁</h1>
                                                <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。
                                                强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。
                                                钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。
                                                朋友们也许分分合合， 但是200磅的钢铁永远是200磅。
                                                </p>
                                
                                </div>
                        
                </body>
                
</html>

ricia · 发表于 2020-2-22 19:00:17

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Hero Unit</title>
        <style type="text/css">
            p{
                color: rgba(255, 255, 255, .7);
            }
            h1{
                color: #fff;
                margin: 10px auto;
                font-size: 55px;
            }
            .HeroUnit{
                width: 900px;
                height: 400px;
                background-color: #000;
                text-align: center;
                padding: 55px 66px;
                box-sizing: border-box;
                margin-left: 20%;
            }            
        </style>
</head>
<body>        
        <div class="HeroUnit">
            <img src="../img/神兽.png">
            <h1>编程&撸铁</h1>
            <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
        </div>
</body>
</html>

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

[庖丁解牛] 0 0 3 9 - Hero Unit 图文混排【粗糙版】

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

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分

[庖丁解牛] 0 0 3 9 - Hero Unit 图文混排 【粗糙版】

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

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分

[庖丁解牛] 0 0 3 9 - Hero Unit 图文混排【粗糙版】