设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 4 0 - Hero Unit 图文混排 【精细版】
返回列表 发新帖
查看: 4338|回复: 15

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

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

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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.                 }

  11.                 h1 {
  12.                         color: #FFF;
  13.                         margin: 10px auto;
  14.                         font-size: 55px;
  15.                 }

  17.                 .HeroUnit {
  18.                         width: 900px;
  19.                         height: 400px;
  20.                         background-color: #000;
  21.                         text-align: center;
  22.                         padding: 55px 66px;
  23.                         box-sizing: border-box;
  24.                         position: relative;
  25.                 }
  26.                 /*img,.content{
  27.                         position: absolute;
  28.                         top: 50%;
  29.                         transform: translateY(-50%);
  30.                 }
  31.                 img{
  32.                         left: 10%;
  33.                 }
  34.                 .content{
  35.                         left: 20%;
  36.                         width: 70%;
  37.                 }*/
  38.                 img,.content,.content h1{
  39.                         position: absolute;
  40.                         /*top: 50%;
  41.                         transform: translateY(-50%);*/

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

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

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

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

  71.                         最老实的只有钢铁。

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

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

  77.                         永远不会对我撒气，永远不会离开我。

  79.                         朋友们也许分分合合， 但是200磅的钢铁永远是200磅。
  80.                 </p>
  81.         </div>
  82. </div>

  84. </body>
  85. </html>
复制代码
0033Hero Unit2.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
稍微有些歪。。。  发表于 2017-4-28 18:42
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-19 08:22:26 | 显示全部楼层
这一期，有点晕，交作业！
040.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

rollerpig
发表于 2017-11-11 08:06:58 | 显示全部楼层
设置图片距左侧为总宽度10%，文本距左侧总宽度为33%。

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

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

评分

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

查看全部评分

小甲鱼最新课程 -> https://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
小甲鱼最新课程 -> https://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.                         }

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

撸铁

撸铁
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

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

  68. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-15 23:15:11 From FishC Mobile | 显示全部楼层
使用relative来封装absolute定位是常用手段
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 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
小甲鱼最新课程 -> https://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
小甲鱼最新课程 -> https://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>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-14 16:42:47 | 显示全部楼层
撸鉄.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

woaixuexi100
发表于 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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

woaixuexi100
发表于 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%;
}
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-6-8 07:55

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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