0 0 3 9 - Hero Unit 图文混排【粗糙版】,Web密训营,Web开发,鱼C论坛

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

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

本帖最后由不二如是于 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。

效果图：

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

官方 Web 课程：

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

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

开始：

然后：

最后：

复习一下ps技能{:10_330:}

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

恩，只要功夫深，铁杵也能撸成针{:5_105:}

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

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

好一个只要功夫深{:10_275:}

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

{:10_287:}

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

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

{:5_92:}

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

交作业{:10_264:}

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中直接变成白色的了{:10_247:}<!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>

页: [1] 2

鱼C论坛's Archiver

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

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