CSS布局与定位练习

来源：互联网发布：淘宝女装6皇冠编辑：程序博客网时间：2024/05/18 22:55

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework1</title>
<style type="text/css">
*
{
font-family: calibri;
}
.div1
{
background: #4FC0E8;
width: 350px;
height: 105px;
border-bottom: 4px solid #3AADDC;
margin: auto;
border-radius: 5px;
}
.div1_1
{
width: 130px;
height: 140px;
border-bottom: 4px solid #3AADDC;
border-radius: 60px;
margin: auto;
background: #4FC0E8;
text-align: center;
}
.div2
{
width: 350px;
height: 240px;
margin: auto;
text-align: center;
}
.div2_1
{
width: 350px;
height: 25px;
color: #3AADDC;
font-size: 24px;
margin-top: 60px;
}
.div2_2
{
width: 350px;
height: 120px;
color: #B3B4B8;
font-size: 16px;
margin-top: 20px;
margin-left: 20px;
text-align: left;
}
.div3
{
width: 350px;
height: 80px;
background: #4FC0E8;
margin: auto;
border-bottom: 4px solid #3AADDC;
margin-top:-65px;
text-align: center;
border-radius: 5px;
}
.div3_1
{
color:white;
font-size: 24px;
padding-top: 25px;
}

</style>
</head>
<body>

<div class="div1">
<div class="div1_1">
<img src="sound.png" style="margin-top:25px">
</div>
</div>
<div class="div2">
<div class="div2_1">
LOREM IPSUM DOLOR
</div>
<div class="div2_2">
Quisque posuere risus erat at scelerisque felis<br/>
pulvinar quis.Maecenas arcu lorem,laoreet at<br/>
dui in,hendrerit mattis mi.Sed eu vehicula lectus<br/>
felis pulvinar quis.Maecenas arcu lorem,laoreet<br/>
at posuere risus erat.
</div>
</div>
<div class="div3">
<div class="div3_1">
LOAD MORE
</div>
</div>
</body>
</html>

---------------------------------------------------------曲脖向天割-------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework1</title>
<style type="text/css">
*
{
font-family: calibri;
}
.div1
{
width: 1200px;
height: 60px;
background: #FFFFFF;
border-top:5px solid #444446;
margin:auto;
}
.title
{
text-decoration: none;
color:black;
}
.div1_1
{
width: 200px;
height: 60px;
border-top:5px solid #D66B57;
text-align: center;
font-size:28px;
margin-top: -5px;
}
.div1_1:hover
{
background: #D66B57;
color:white;
font-weight: bold;
}
.div1_2
{
width: 150px;
height: 45px;
border-top:5px solid #F4DF4E;
text-align: center;
font-size:20px;
font-weight: bold;
margin-top: -65px;
margin-left: 350px;
padding-top: 15px;
}
.div1_2:hover
{
background: #F4DF4E;
color:white;
font-weight: bold;
}

.div1_3
{
width: 150px;
height: 45px;
border-top:5px solid #229A77;
text-align: center;
font-size:20px;
font-weight: bold;
margin-top: -65px;
margin-left: 500px;
padding-top: 15px;
}
.div1_3:hover
{
background: #229A77;
color:white;
font-weight: bold;
}
.div1_4
{
width: 150px;
height: 45px;
border-top:5px solid #4CC2DC;
text-align: center;
font-size:20px;
font-weight: bold;
margin-top: -65px;
margin-left: 650px;
padding-top: 15px;
}
.div1_4:hover
{
background: #4CC2DC;
color:white;
font-weight: bold;
}
.div2
{
background-image: url(div2bg.png);
width: 1200px;
height:450px;
margin: auto;
}
.a1
{
width: 20px;
height: 35px;
margin-top: 171px;
margin-left: 23px;
}
.a1:hover
{
width: 22px;
height: 37px;
margin-top:169px;
}
.a2
{
color:white;
font-size: 16px;
margin-left: 230px;
font-weight: bold;
width: 158px;
height: 37px;
background: #DE6957;
border-radius:20px;
border: none;
text-align: center;
}
.a2:hover
{
color:black;
}
.div2_1
{
width: 70px;
height: 20px;
margin-left: 561px;
margin-top: 285px;
}
.a3
{
width: 18px;
height: 18px;
border-radius: 50px;
border:1px solid black;
background: white;
}
.a3:hover
{
background: #037F7F;
}
.div3
{
width: 1200px;
height: 185px;
background: #46C6E3;
margin: auto;
}
.div3_1
{
width:140px;
height: 40px;
color:white;
font-size:28px;
font-weight: bold;
text-align: center;
position: absolute;
left:480px;
top:660px;
}
.div3_1:hover
{
color:gray;
}
.upload
{
position: absolute;
left:515px;
top:600px;
}
.div3_2
{
width:140px;
height: 40px;
color:white;
font-size:28px;
font-weight: bold;
text-align: center;
position: absolute;
left:780px;
top:660px;
}
.div3_2:hover
{
color:gray;
}
.edit
{
position: absolute;
left:815px;
top:600px;
}
.div3_3
{
width:140px;
height: 40px;
color:white;
font-size:28px;
font-weight: bold;
text-align: center;
position: absolute;
left:1080px;
top:660px;
}
.div3_3:hover
{
color:gray;
}
.enjoy
{
position: absolute;
left:1115px;
top:600px;
}

</style>
</head>
<body>

<div class="div1">
<a href="#" class="title">
<div class="div1_1">
Portraits.
<div style="font-size:16px;float:bottom;">
each other defence
</div>
</div>
</a>
<a href="#" class="title">
<div class="div1_2">
CREATE
</div>
</a>
<a href="#" class="title">
<div class="div1_3">
ABOUT
</div>
</a>
<a href="#" class="title">
<div class="div1_4">
GALLERY
</div>
</a>
</div>
<div class="div2">
<div>
<a href="#"><img class="a1" src="leftarrow.png"></a>
</div>
<div style="margin-top:-110px">
<input type="button" class="a2" value="LEARN MORE >">
</div>
<div class="div2_1">
<input type="button" class="a3">
<input type="button" class="a3">
<input type="button" class="a3">
</div>
</div>
<div class="div3">
<a href="#">
<div class="div3_1">
1.Upload
</div>
</a>
<img src="upload.png" class="upload">
<a href="#">
<div class="div3_2">
2.Edit
</div>
</a>
<img src="edit.png" class="edit">
<a href="">
<div class="div3_3">
3.Enjoy
</div>
</a>
<img src="enjoy.png" class="enjoy">
</div>

</body>
</html>

0 0