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 图文混排【粗糙版】