鱼C论坛

 找回密码
 立即注册
查看: 3277|回复: 15

[庖丁解牛] 0 0 4 0 - Hero Unit 图文混排 【精细版】

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

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

发表于 2017-7-19 08:22:26 | 显示全部楼层
这一期,有点晕,交作业!
040.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

发表于 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
回复 支持 反对

使用道具 举报

发表于 2018-11-7 23:55:30 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.         p {
  10.             color: rgba(255, 255, 255, .7);
  11.         }
  12.         
  13.         h1 {
  14.             color: #fff;
  15.             margin: 10px auto;
  16.             font-size: 55px;
  17.         }
  18.         
  19.         .HeroUnit {
  20.             width: 900px;
  21.             height: 400px;
  22.             background-color: #000;
  23.             text-align: center;
  24.             padding: 55px 66px;
  25.             box-sizing: border-box;
  26.             position: relative;
  27.         }
  28.         
  29.         img,
  30.         .content,
  31.         .content h1 {
  32.             position: absolute;
  33.             top: 50%;
  34.             /* transform: translateY(-50%); */
  35.         }
  36.         
  37.         .content h1 {
  38.             left: -70px;
  39.             top: -100px;
  40.         }
  41.         
  42.         img {
  43.             left: 5%;
  44.             top: 120px;
  45.         }
  46.         
  47.         .content {
  48.             width: 70%;
  49.             left: 25%;
  50.             top: 100px;
  51.         }
  52.     </style>
  53. </head>

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

  65. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-6-15 23:15:11 From FishC Mobile | 显示全部楼层
使用relative来封装absolute定位是常用手段
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-6-18 23:20:25 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .fish{
  14.             position: relative;
  15.             height: 600px;
  16.             /* width: auto; */
  17.             text-align: center;
  18.             margin:10px 50px;
  19.             padding: 20px 50px;
  20.             
  21.            
  22.             background: #000;
  23.            
  24.         }
  25.         img{
  26.             position: absolute  ;
  27.             left: 30%
  28.             
  29.         }
  30.         p{
  31.             color: rgba(255,255,255,.7);
  32.             text-indent: 2em;
  33.             text-align: left;
  34.             position: absolute;
  35.             top: 150px;
  36.             width: 60%;
  37.             left: 20%;
  38.         }
  39.         h1{
  40.             color: #FFF;
  41.             margin: 10px auto;
  42.             font-size: 55px;
  43.         
  44.             position: absolute;
  45.             right:25%
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="fish">
  51.    
  52.     <img src="lutie.png" alt="撸铁">
  53.     <h1>编程&&撸铁||lol</h1>
  54.     <p>想着要赢得比赛不会给你力量,在锻炼中挣扎力量才会增长,当你克服困难不想放弃时,
  55.         这就是力量。强壮的人比弱小的人更难杀死,总体上也更有用。钢铁永远不会对你撒谎
  56.         。如果你出去走一圈,听其他人的谈话,你会听到人们口中的你有如天神,或者是个混球。
  57.         最老实的只有钢铁。钢铁是伟大的参照点,无所不知的它会告诉你所有信息。
  58.         就像漆黑一片的大海中永远矗立在那里的灯塔,我发现钢铁是我最好的朋友。永远不会对我撒气,
  59.         永远不会离开我。朋友们也许分分合合, 但是200磅的钢铁永远是200磅。</p>
  60.     </div>
  61.     </body>
  62. </html>
复制代码
lutie.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-19 21:13:51 | 显示全部楼层
交作业!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <style type="text/css">
  7.                 .HeroUnit{
  8.                         position: relative;
  9.                         text-align: center;
  10.                         padding: 55px 66px;
  11.                         width:999px;
  12.                         height: 400px;
  13.                         background-color:#000;
  14.                         box-sizing: border-box;
  15.                 }
  16.                 img,.content{
  17.                         position: absolute;
  18.                         top: 50%;
  19.                         transform: translateY(-50%);
  20.                 }
  21.                 h1,p{
  22.                         color: #FFF;
  23.                 }
  24.                 img{
  25.                         right: 10%;
  26.                 }
  27.                 .content{
  28.                         left: 33%;
  29.                         width:66%;
  30.                         left: 10%
  31.                 }
  32.                 .content h1{
  33.                         position: absolute;
  34.                         left: 105%;
  35.                         top: 110px;
  36.                 }
  37.         </style>
  38. </head>
  39. <body>
  40.         <div class="HeroUnit">
  41.                 <img src="../img/100">
  42.                 <div class="content">
  43.                         <h1>Three Body</h1>
  44.                         <p>再想下去,一个推论令她不寒而栗,陷于恐惧的深渊:也许,人类和邪恶的关系,就是大洋与漂浮其上的冰山的关系,它们其实是同一种物质组成的巨大水体,冰山之所以被醒目的认出来,只是由于其形态不同而已,而它实质上只不过是这整个巨大水体中极小的一部分......人类真正的道德自觉是不可能的,就像他们不可能拔着自己的头发离开大地</p>
  45.                 </div>
  46.         </div>
  47. </body>
  48. </html>
复制代码
捕获.PNG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-1 09:30:26 | 显示全部楼层
冲~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hero Unit</title>
  6. <style type="text/css">
  7. p,h1 {
  8.         color:#546de5;
  9.         text-align: center;
  10. }
  11. .HeroUnit {
  12.         height: 400px;
  13.         widows: 900px;
  14.         background-color: #f8a5c2;
  15.         text-align: center;
  16.         box-sizing: border-box;
  17.         position: relative;
  18. }
  19. img {
  20.         width: 200px;
  21.         height: 200px;
  22.         position:relative;
  23.         /* left:10%; */
  24.         /* left:70%; */
  25.         left:5%;
  26.         top: 110px;
  27. }
  28. p {
  29.         color: rgb(41,128,185,.7);
  30. }
  31. h1 {
  32.         color:#786fa6;
  33.         margin: 10px auto;
  34.         font-size: 55px;
  35. }
  36. img,.content,.content h1 {
  37.         position:absolute;
  38.         /* top:50%; */
  39.         /* transform:translateY(-50%); */
  40.         /* transfrom:translateY 使模型向上移动 (-50%)向上移动自身的50% */
  41. }
  42. .content {
  43.         /* left:33%;
  44.         width: 66%; */
  45.         /* left: 10%;
  46.         width: 60%; */
  47.         left:20%;
  48.         width: 80%;
  49.         top: 100px;
  50. }
  51. .content h1 {
  52.         left: -150px;
  53.         top: -100px;
  54.         
  55. }
  56. </style>
  57. </head>
  58. <body>        
  59. <div class="HeroUnit">
  60. <img src="lt.jpg">
  61.         <div class="content">
  62.         <h1>编程&撸铁</h1>
  63.         <p>想着要赢得比赛不会给你力量,在锻炼中挣扎力量才会增长,当你克服困难不想放弃时,这就是力量。
  64.         强壮的人比弱小的人更难杀死,总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈,听其他人的谈话,你会听到人们口中的你有如天神,或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点,无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔,我发现钢铁是我最好的朋友。永远不会对我撒气,永远不会离开我。朋友们也许分分合合, 但是200磅的钢铁永远是200磅。</p>
  65.         </div>
  66. </div>
  67. </body>
  68. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-14 16:42:47 | 显示全部楼层
撸鉄.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-30 20:23:59 | 显示全部楼层
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
    <div class="HeroUnit">
        <img src="logo.png">
            <div class="content">
            <h1>编程&撸铁</h1>
            <p>想着要赢得比赛不会给你力量,在锻炼中挣扎力量才会增长,当你克服困难不想放弃时,这就是力量。强壮的人比弱小的人更难杀死,总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈,听其他人的谈话,你会听到人们口中的你有如天神,或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点,无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔,我发现钢铁是我最好的朋友。永远不会对我撒气,永远不会离开我。朋友们也许分分合合, 但是200磅的钢铁永远是200磅。</p>
            </div>
     </div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-30 20:24:54 | 显示全部楼层
.HeroUnit{
    background-color: black;
    color: white;
    width: 900px;
    height: 400px;
    text-align: center;
    padding: 55px 66px;
    box-sizing: border-box;
    position: relative;
}
h1{
    color: white;
    font-size: 30px;
    margin: 10px auto;
}
p{
    color: rgba(255, 255, 255, .7);
}
img,.content{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
img{
    left: 70%;
}
.content{
    left: 10%;
    width: 60%;
}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 13:42

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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