QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 928|回复: 14

[系列教程] 0 0 3 9 - Hero Unit 图文混排 【粗糙版】

[复制链接]
最佳答案
120 
累计签到:628 天
连续签到:156 天
不二如是 发表于 2017-2-2 12:47:12 92814 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-2-23 16:30 编辑

3837我们完成了简单的图文混排,还是不够砖业

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

这一区域,就被称为Hero Unit(主要单元)。

看一下,Apple的Hero Unit,B格更高:

1.gif


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

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

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

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

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

钢铁永远不会对你撒谎。

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

最老实的只有钢铁。

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

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

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

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


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

效果图:
Snip20170202_279.png


字体颜色,设置为白色。

设置HeroUnit区的宽、高、背景色
  1.         p{
  2.                 color: #FFF;
  3.         }
  4.         h1{
  5.                 color: #FFF;
  6.         }
  7.                 width: 900px;
  8.                 height: 400px;
  9.                 background-color: #000;
  10.         }
复制代码

效果图:
Snip20170202_280.png


还差点,把整个HU区移到中间:
  1. .HeroUnit{
  2. text-align: center;
  3.                 padding: 55px 66px;
  4. }
复制代码

效果图:
Snip20170202_282.png


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

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

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

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

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

不用!

使用box-sizing:border-box,自动帮你去除多余的padding
  1. .HeroUnit{
  2. box-sizing: border-box;
  3. }
复制代码

效果图:
Snip20170202_283.png


最后一步修改下,h1、p字体
  1. p{
  2.                 color: rgba(255,255,255,.7);
  3.         }
  4.         h1{
  5.                 color: #FFF;
  6.                 margin: 10px auto;
  7.                 font-size: 55px;
  8.         }
复制代码


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

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

效果图:
Snip20170202_284.png




这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
type_J + 5 + 5 + 3 good!

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
3 
累计签到:411 天
连续签到:1 天
joker11111 发表于 2017-4-4 19:51:18 | 显示全部楼层
开始:
333.png

然后:
222.png

最后:
111.png

复习一下ps技能

点评

我很赞同!: 5.0
我很赞同!: 5
我能说,比我这个还热血吗~  发表于 2017-4-4 20:07
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-28 09:13:04 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Hero Unit</title>
  6.         <style type="text/css">
  7.                 p{
  8.                         color: rgba(255,255,255,.7);
  9.                 }
  10.                 h1{
  11.                         color: #FFF;
  12.                         margin: 10px auto;
  13.                         font-size: 55px;
  14.                 }
  15.                 .HeroUnit{
  16.                         width: 900px;
  17.                         height: 400px;
  18.                         background-color: #000;
  19.                         text-align: center;
  20.                         padding: 55px 66px;
  21.                         box-sizing:border-box;
  22.                 }
  23.         </style>
  24. </head>
  25. <body>
  26. <div class="HeroUnit">
  27.         <img src="eg_cute.gif">
  28.         <h1>编程&撸铁</h1>
  29.         <p>想着要赢得比赛不会给你力量,在锻炼中挣扎力量才会增长,当你克服困难不想放弃时,这就是力量。

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

  31.                 钢铁永远不会对你撒谎。

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

  33.                 最老实的只有钢铁。

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

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

  36.                 永远不会对我撒气,永远不会离开我。

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

  39. </body>
  40. </html>
复制代码
0032Hero Unit.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-28 18:43
最佳答案
24 
累计签到:132 天
连续签到:3 天
像番茄加两个蛋 发表于 2018-4-15 14:02:41 | 显示全部楼层
20180415140212.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-4-15 15:36

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
39 
累计签到:549 天
连续签到:79 天
alltolove 发表于 2017-2-2 14:09:03 | 显示全部楼层
恩,只要功夫深,铁杵也能撸成针
最佳答案
120 
累计签到:628 天
连续签到:156 天
不二如是  楼主| 发表于 2017-2-2 19:19:27 | 显示全部楼层
alltolove 发表于 2017-2-2 14:09
恩,只要功夫深,铁杵也能撸成针

好一个只要功夫深
最佳答案
0 
累计签到:26 天
连续签到:1 天
type_J 发表于 2017-2-2 21:54:21 | 显示全部楼层
最佳答案
120 
累计签到:628 天
连续签到:156 天
不二如是  楼主| 发表于 2017-2-3 19:51:53 | 显示全部楼层
最佳答案
0 
累计签到:1 天
连续签到:1 天
a540656809 发表于 2017-3-6 14:58:58 From FishC Mobile | 显示全部楼层
撸铁是啥
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-19 05:57:11 | 显示全部楼层
交作业!
039.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-4-15 15:36

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:91 天
连续签到:1 天
likesunshine 发表于 2018-3-26 10:50:14 | 显示全部楼层
功夫深,铁杵针

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-4-24 05:16

快速回复 返回顶部 返回列表