QQ登录

只需一步,快速开始

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

主题

帖子

荣誉

管理团队

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

技术值
查看: 441|回复: 5

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

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

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:107 天
连续签到: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 
累计签到:592 天
连续签到:17 天
aswyamato1989 发表于 2017-7-19 08:22:26 | 显示全部楼层
这一期,有点晕,交作业!
040.jpg
最佳答案
0 
累计签到:97 天
连续签到: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~

查看全部评分

发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /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, 2017-11-25 05:57

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