#画像合成操作:
<div> <h3 id="qita">其他人物简介</h3> 山治,日本漫画《航海王》及衍生作品中的角色。草帽一伙厨师,金发,有着卷曲眉毛,永远遮住半边脸的家伙,香烟不离口,最爱女人,很花心但很有风度,海贼中的绅士。小时候在红脚哲普那儿学习厨艺。踢技以快准狠被海军称之为“黑足”,但从不愿意伤害任何的女性,哪怕是敌人。在经过司法岛一战后也成了悬赏对象,首次悬赏就有7700万贝里(但通缉令是画上去的)。梦想是找到传说之海All Blue而跟随路飞一同进入了伟大航路。是文斯莫克家族的第三子。 乌索普小时候是出名的吹牛大王,和村里的几个孩子组成“乌索普海贼团”,自称乌索普船长。发现克洛船长的阴谋后,立志要保护村里的人,和蒙奇·D·路飞并肩作战。梦想是要成为勇敢的海上战士。 乔巴是草帽海贼团的第五位伙伴,职位是船医。原为磁鼓岛库蕾哈医生最宠爱的驯鹿兼医疗助手[1] 。乔巴的恩人是“庸医”希鲁鲁克,他身为野生驯鹿时本来没有名字,“乔巴”也是由希鲁鲁克给他命名的,意思是他有一对连树木都可以轻松砍倒的角。 <p class="text5"></p> <div id="background"> <img id="classmate1" src="14.jpg"> <img id="classmate2" src="9.jpg"> <img id="classmate3" src="10.jpg"> </div> </div>
#css スタイル:#<style>
body{
margin: 0;
margin-bottom: 80px;
background-color:lightblue;
}
#banner{
height: 700px;
background-image: url(2.jpg);
font-size: 50px;
line-height: 700px;
text-align: center;
margin-top: 80px;
}
#container{
width: 1000px;
margin: 0 auto;
}
.text1{
text-indent: 2em;
color:gray;
}
.text2{
text-indent: 2em;
color: red;
}
.text3{
text-indent: 2em;
color: green;
}
.text4{
text-indent: 2em;
color: violet;
}
.text5{
text-indent: 2em;
color: white;
}
.pic{
width: 100%;
}
#background{
height: 600px;
background-image: url(13.jpg);
background-size: 100% 100%;
position: relative;
z-index: -1;
}
#classmate1{
width: 200px;
height: 250px;
left: 240px;
top: 150px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
#classmate2{
width: 150px;
/*height: 200px;*/
right: 150px;
top: 100px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
#classmate3{
width: 200px;
height: 200px;
left: 490px;
bottom: 50px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
.text1:first-letter{
font-size: 40px;
}
.text2:first-letter{
font-size: 40px;
}
.text3:first-letter{
font-size: 40px;
}
.text4:first-letter{
font-size: 40px;
}
.text5:first-letter{
font-size: 40px;
}
#nav{
width: 100%;
background-color: skyblue;
height: 80px;
left: 0;
top: 0;
position: fixed;
z-index: 2;
/*text-align: center;*/
}
#inner-nav{
width: 1000px;
margin: 0 auto;
text-decoration: none;
text-align: right;
height: 80px;
line-height: 80px;
}
#inner-nav a{
margin: 0 20px;
text-decoration: none;
color: blue;
font-size: 24px;
display: inline-block;
height: 80px;
}
#inner-nav a:hover{
background-color: white;
}
h3{
font-family: 微软雅黑;
color: blue;
}
</style>
実行結果表示: