0 0 4 0 - Hero Unit 图文混排【精细版】,Web密训营,Web开发,鱼C论坛

不二如是 发表于 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%;
}

页: [1]

鱼C论坛's Archiver