0 0 4 0 - Hero Unit 图文混排【精细版】

不二如是 · 发表于 2017-2-3 11:25:35

购买主题 已有 17 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-4-28 10:39:42

本帖最后由 shishunfu 于 2017-4-28 10:42 编辑

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hero Unit2</title>
        <style type="text/css">
                p {
                        color: rgba(255, 255, 255, .7);
                }

                h1 {
                        color: #FFF;
                        margin: 10px auto;
                        font-size: 55px;
                }

                .HeroUnit {
                        width: 900px;
                        height: 400px;
                        background-color: #000;
                        text-align: center;
                        padding: 55px 66px;
                        box-sizing: border-box;
                        position: relative;
                }
                /*img,.content{
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                }
                img{
                        left: 10%;
                }
                .content{
                        left: 20%;
                        width: 70%;
                }*/
                img,.content,.content h1{
                        position: absolute;
                        /*top: 50%;
                        transform: translateY(-50%);*/

                }
                .content{
                        left: 5%;
                        width: 80%;
                        top: 100px;
                }
                .content h1{
                        left: 105%;
                        top: -100px;
                }
                img{
                        left: 5%;
                }
        </style>
</head>
<body>
<div class="HeroUnit">
        <img src="eg_cute.gif">
        <div class="content">
                <h1>编程&撸铁</h1>
                <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。

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

                        钢铁永远不会对你撒谎。

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

                        最老实的只有钢铁。

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

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

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

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

</body>
</html>

aswyamato1989 · 发表于 2017-7-19 08:22:26

这一期，有点晕，交作业！

rollerpig · 发表于 2017-11-11 08:06:58

设置图片距左侧为总宽度10%，文本距左侧总宽度为33%。

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

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

庚午 · 发表于 2018-1-13 23:11:35

<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8'>
        <head>
                <title>hero_unit</title>
                <style type='text/css'>
                        .hero_unit{background:#000;width:1300px;height:900px;
                                                position:relative;}
                        img{width:320px; height:300px;
                                float:center;
                                margin-right:8px;}
                        h1{color:#FFF;text-align:center;font-size:33px;}
                        p{color:#FFF;text-indent:2em;font-size:22px;}
                </style>
        </head>
        
        <body>
                <div class='hero_unit'>
                        <img src='Penguins.jpg' alt='企鹅'>
                        
                <div class='cente'>
                        <h1>精细嘉庚</h1>
                        <p>博学之，审问之，慎思之，明辨之，笃行之。
                        有弗学，学之弗能，弗措也。有弗问，问之弗知，弗措也。有弗思，思之弗得，弗措也。
                        有弗辨，辨之弗明，弗措也。有弗行，行之弗笃，弗措也。人一能之，己百之；人十能之，己千之。
                        果能此道矣，虽愚必明，虽柔必强。</p>
                </div>
                </div>
        </body>
</html>

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

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

隨鈊乄鎍慾 · 发表于 2018-6-15 22:31:46

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Hero Unit</title>
        <style type="text/css">
                        .HeroUnit{
                                position:relative;
                                background-color:#000;
                                width:900px;
                                height:400px;
                                text-align: center;
                                padding: 55px 66px;
                box-sizing: border-box;
                        }
                        img,.content,.content h1{
                                position:absolute;
                        }
                        h1{
                                font-size:55px;
                                color:#fff;
                        }
                        
                        p{
                                color:rgba(255,255,255,0.5);
                        }
                        img{
                                left:5%;
                                top:170px;
                                width:100px;
                        }
                        .content{
                                top:150px;
                                left:20%;
                                width:66%;
                        }
                        .content h1{
                                top:-130px;
                                left:-100px;
                        }

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

撸铁

soulwyb · 发表于 2018-11-7 23:55:30

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            color: rgba(255, 255, 255, .7);
        }
        
        h1 {
            color: #fff;
            margin: 10px auto;
            font-size: 55px;
        }
        
        .HeroUnit {
            width: 900px;
            height: 400px;
            background-color: #000;
            text-align: center;
            padding: 55px 66px;
            box-sizing: border-box;
            position: relative;
        }
        
        img,
        .content,
        .content h1 {
            position: absolute;
            top: 50%;
            /* transform: translateY(-50%); */
        }
        
        .content h1 {
            left: -70px;
            top: -100px;
        }
        
        img {
            left: 5%;
            top: 120px;
        }
        
        .content {
            width: 70%;
            left: 25%;
            top: 100px;
        }
    </style>
</head>

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

</html>

fangfangfengfei · 发表于 2019-6-15 23:15:11

使用relative来封装absolute定位是常用手段

fangfangfengfei · 发表于 2019-6-18 23:20:25

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } 
        .fish{
            position: relative;
            height: 600px;
            /* width: auto; */
            text-align: center;
            margin:10px 50px;
            padding: 20px 50px;
            
           
            background: #000;
           
        }
        img{
            position: absolute  ;
            left: 30%
            
        }
        p{
            color: rgba(255,255,255,.7);
            text-indent: 2em;
            text-align: left;
            position: absolute;
            top: 150px;
            width: 60%;
            left: 20%;
        }
        h1{
            color: #FFF;
            margin: 10px auto;
            font-size: 55px;
        
            position: absolute;
            right:25%
        }
    </style>
</head>
<body>
    <div class="fish">
    
    <img src="lutie.png" alt="撸铁">
    <h1>编程&&撸铁||lol</h1>
    <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，
        这就是力量。强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎
        。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。
        最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。
        就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，
        永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
    </div>
    </body>
</html>

克里斯保罗 · 发表于 2019-8-19 21:13:51

交作业！

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                .HeroUnit{
                        position: relative;
                        text-align: center;
                        padding: 55px 66px;
                        width:999px;
                        height: 400px;
                        background-color:#000;
                        box-sizing: border-box;
                }
                img,.content{
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                }
                h1,p{
                        color: #FFF;
                }
                img{
                        right: 10%;
                }
                .content{
                        left: 33%;
                        width:66%;
                        left: 10%
                }
                .content h1{
                        position: absolute;
                        left: 105%;
                        top: 110px;
                }
        </style>
</head>
<body>
        <div class="HeroUnit">
                <img src="../img/100">
                <div class="content">
                        <h1>Three Body</h1>
                        <p>再想下去，一个推论令她不寒而栗，陷于恐惧的深渊：也许，人类和邪恶的关系，就是大洋与漂浮其上的冰山的关系，它们其实是同一种物质组成的巨大水体，冰山之所以被醒目的认出来，只是由于其形态不同而已，而它实质上只不过是这整个巨大水体中极小的一部分......人类真正的道德自觉是不可能的，就像他们不可能拔着自己的头发离开大地</p>
                </div>
        </div>
</body>
</html>

你在意在便在 · 发表于 2019-11-1 09:30:26

冲~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hero Unit</title>
<style type="text/css">
p,h1 {
        color:#546de5;
        text-align: center;
}
.HeroUnit {
        height: 400px;
        widows: 900px;
        background-color: #f8a5c2;
        text-align: center;
        box-sizing: border-box;
        position: relative;
}
img {
        width: 200px;
        height: 200px;
        position:relative;
        /* left:10%; */
        /* left:70%; */
        left:5%;
        top: 110px;
}
p {
        color: rgb(41,128,185,.7);
}
h1 {
        color:#786fa6;
        margin: 10px auto;
        font-size: 55px;
}
img,.content,.content h1 {
        position:absolute;
        /* top:50%; */
        /* transform:translateY(-50%); */
        /* transfrom:translateY 使模型向上移动 （-50%）向上移动自身的50% */
}
.content {
        /* left:33%;
        width: 66%; */
        /* left: 10%;
        width: 60%; */
        left:20%;
        width: 80%;
        top: 100px;
}
.content h1 {
        left: -150px;
        top: -100px;
        
}
</style>
</head>
<body>        
<div class="HeroUnit">
<img src="lt.jpg">
        <div class="content">
        <h1>编程&撸铁</h1>
        <p>想着要赢得比赛不会给你力量，在锻炼中挣扎力量才会增长，当你克服困难不想放弃时，这就是力量。
        强壮的人比弱小的人更难杀死，总体上也更有用。钢铁永远不会对你撒谎。如果你出去走一圈，听其他人的谈话，你会听到人们口中的你有如天神，或者是个混球。最老实的只有钢铁。钢铁是伟大的参照点，无所不知的它会告诉你所有信息。就像漆黑一片的大海中永远矗立在那里的灯塔，我发现钢铁是我最好的朋友。永远不会对我撒气，永远不会离开我。朋友们也许分分合合， 但是200磅的钢铁永远是200磅。</p>
        </div>
</div>
</body>
</html>

小脑斧 · 发表于 2020-3-14 16:42:47

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>

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%;
}

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 60033 狗仔卡	发表于 2017-2-3 11:25:35 \| 显示全部楼层 \|阅读模式购买主题已有 17 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

评分

浏览过的版块

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

本帖被以下淘专辑推荐:

点评

点评

评分

浏览过的版块

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