鱼C论坛

 找回密码
 立即注册
查看: 1023|回复: 7

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

[复制链接]
最佳答案
213 
发表于 2017-2-3 11:25:35 | 显示全部楼层 |阅读模式
购买主题 本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-19 08:22:26 | 显示全部楼层
这一期,有点晕,交作业!
040.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
3 
发表于 2018-6-15 22:31:46 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>Hero Unit</title>
  6.         <style type="text/css">
  7.                         .HeroUnit{
  8.                                 position:relative;
  9.                                 background-color:#000;
  10.                                 width:900px;
  11.                                 height:400px;
  12.                                 text-align: center;
  13.                                 padding: 55px 66px;
  14.                 box-sizing: border-box;
  15.                         }
  16.                         img,.content,.content h1{
  17.                                 position:absolute;
  18.                         }
  19.                         h1{
  20.                                 font-size:55px;
  21.                                 color:#fff;
  22.                         }
  23.                        
  24.                         p{
  25.                                 color:rgba(255,255,255,0.5);
  26.                         }
  27.                         img{
  28.                                 left:5%;
  29.                                 top:170px;
  30.                                 width:100px;
  31.                         }
  32.                         .content{
  33.                                 top:150px;
  34.                                 left:20%;
  35.                                 width:66%;
  36.                         }
  37.                         .content h1{
  38.                                 top:-130px;
  39.                                 left:-100px;
  40.                         }

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

撸铁

撸铁
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

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

GMT+8, 2018-9-22 00:45

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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