QQ登录

只需一步,快速开始

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

主题

帖子

荣誉

管理团队

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

技术值
查看: 786|回复: 6

[系列教程] 0 0 4 0 -Hero Unit 图文混排 【精细版】

[复制链接]
最佳答案
140 
累计签到:663 天
连续签到:191 天
不二如是 发表于 2017-2-3 11:25:35 7866 | 显示全部楼层 |阅读模式
购买主题 已有 12 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-28 10:39:42 | 显示全部楼层
本帖最后由 shishunfu 于 2017-4-28 10:42 编辑

交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Hero Unit2</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.                         position: relative;
  23.                 }
  24.                 /*img,.content{
  25.                         position: absolute;
  26.                         top: 50%;
  27.                         transform: translateY(-50%);
  28.                 }
  29.                 img{
  30.                         left: 10%;
  31.                 }
  32.                 .content{
  33.                         left: 20%;
  34.                         width: 70%;
  35.                 }*/
  36.                 img,.content,.content h1{
  37.                         position: absolute;
  38.                         /*top: 50%;
  39.                         transform: translateY(-50%);*/

  40.                 }
  41.                 .content{
  42.                         left: 5%;
  43.                         width: 80%;
  44.                         top: 100px;
  45.                 }
  46.                 .content h1{
  47.                         left: 105%;
  48.                         top: -100px;
  49.                 }
  50.                 img{
  51.                         left: 5%;
  52.                 }
  53.         </style>
  54. </head>
  55. <body>
  56. <div class="HeroUnit">
  57.         <img src="eg_cute.gif">
  58.         <div class="content">
  59.                 <h1>编程&撸铁</h1>
  60.                 <p>想着要赢得比赛不会给你力量,在锻炼中挣扎力量才会增长,当你克服困难不想放弃时,这就是力量。

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

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

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

  64.                         最老实的只有钢铁。

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

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

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

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

  72. </body>
  73. </html>
复制代码
0033Hero Unit2.png

点评

我很赞同!: 5.0
我很赞同!: 5
稍微有些歪。。。  发表于 2017-4-28 18:42
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-19 08:22:26 | 显示全部楼层
这一期,有点晕,交作业!
040.jpg
最佳答案
0 
累计签到:102 天
连续签到:1 天
rollerpig 发表于 2017-11-11 08:06:58 | 显示全部楼层
设置图片距左侧为总宽度10%,文本距左侧总宽度为33%。

这样content距离右侧就有100  - 30 - 66 = 4%。

这里不是100 - 33 - 66 = 1%吗?@不二如是

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-11-11 08:34

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 已修复,thx~

查看全部评分

最佳答案
0 
累计签到:620 天
连续签到:4 天
庚午 发表于 2018-1-13 23:11:35 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <meta charset='utf-8'>
  4.         <head>
  5.                 <title>hero_unit</title>
  6.                 <style type='text/css'>
  7.                         .hero_unit{background:#000;width:1300px;height:900px;
  8.                                                 position:relative;}
  9.                         img{width:320px; height:300px;
  10.                                 float:center;
  11.                                 margin-right:8px;}
  12.                         h1{color:#FFF;text-align:center;font-size:33px;}
  13.                         p{color:#FFF;text-indent:2em;font-size:22px;}
  14.                 </style>
  15.         </head>
  16.        
  17.         <body>
  18.                 <div class='hero_unit'>
  19.                         <img src='Penguins.jpg' alt='企鹅'>
  20.                        
  21.                 <div class='cente'>
  22.                         <h1>精细嘉庚</h1>
  23.                         <p>博学之,审问之,慎思之,明辨之,笃行之。
  24.                         有弗学,学之弗能,弗措也。有弗问,问之弗知,弗措也。有弗思,思之弗得,弗措也。
  25.                         有弗辨,辨之弗明,弗措也。有弗行,行之弗笃,弗措也。人一能之,己百之;人十能之,己千之。
  26.                         果能此道矣,虽愚必明,虽柔必强。</p>
  27.                 </div>
  28.                 </div>
  29.         </body>
  30. </html>
复制代码

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

我试过把<p>做成浮雕效果,太晃眼了,被我取消了。
问题1)我在类选择器设置了背景颜色的 【高和宽】 设置100%可是没有全部覆盖。
问题2)我没有使用定位,是我哪里没做好吗?【求指正】
无标题.png

发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /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-5-28 16:08

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