html+css关于位置布局

最新推荐文章于 2024-09-26 23:58:47 发布

qq416761940

最新推荐文章于 2024-09-26 23:58:47 发布

阅读量376

点赞数

本文链接：https://blog.csdn.net/qq416761940/article/details/40024097

版权

<!DOCTYPE html>
<html>
<head>
<title>homework2</title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 599px;
height: 342px;
background-color: white;
margin: auto;
border: solid 1px black;
}
.div1{
width: 599px;
height: 4px;
background-color: #D66B59;
}
.div2{
width: 599px;
height: 27px;
}
.div2-1{
width: 101px;
height: 26px;
}
.div2-2{
width: 198px;
height: 26px;
margin-left: 234px;
margin-top: -26px;
line-height: 26px;
color: #4E4E4E;
font-family: calibri;
font-size: 1px;
word-spacing: 19px;
font-weight: bold;

}
.div3{
width: 599px;
height: 222px;
background-image: url(3.jpg);

}
.div3-1{
color: #47494B;
font-family: calibri;
font-size: 23px;
margin-left: 70px;
line-height: 40px;
}
.div3-2{
margin-top: -10px;
margin-left: 53px;
}
.div3-3{
width: 78px;
height: 17px;
background: #DD6857;
margin-left: 114px;
margin-top: 1px;
border-radius: 9px;
color: #FFD5C8;
font-size: 12px;
font-family: calibri;
line-height: 17px;
}
.div3-4{
color: #222423;
font-size: 22px;
font-weight: bolder;
margin-top: 13px;
margin-left: 10px;
}
.div3-5{
width: 8px;
height: 8px;
border-radius: 4px;
background: #027F81;
margin-top: 104px;
margin-left: 277px;
}
.div3-6{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -8px;
margin-left: 289px;
}
.div3-7{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -9px;
margin-left: 301px;
}
.div4{
width: 599px;
height: 89px;
background-color: #46C6E3;
}
.div4-1{
color: #E1FFFF;
font-size: 16px;
font-family: calibri;
font-weight: bold;
margin-left: 425px;
margin-top: -5px;
}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<div style="width:38px;height:4px;background:#D66B59;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:38px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:76px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:114px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:152px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:190px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:228px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:266px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:304px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:342px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:380px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:418px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:456px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:494px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:532px;margin-top:-4px;"></div>
</div>

<div class="div2">
<div class="div2-1">
<img src="2.jpg">
</div>
<div class="div2-2">
CREATE ABOUT GALLERY
</div>
</div>
<div class="div3">
<div class="div3-1">
Let's Get Started
</div>
<div class="div3-2">
<img src="4.jpg">
</div>
<div class="div3-3">
LEARN MORE >
</div>
<div class="div3-4">
<
</div>
<div class="div3-5">

</div>
<div class="div3-6">

</div>
<div class="div3-7">

</div>
</div>
<div class="div4">
<div style="padding-top:30px;padding-left:99px;"><img src="5.jpg"></div>
<div style="margin-left:270px;margin-top:-60px;;"><img src="6.jpg"></div>
<div style="margin-left:430px;margin-top:-59px;"><img src="7.jpg"></div>
<div class="div4-1">3.Enjoy</div>
</div>

</div>
</body>
</html>