学习HTML的应用

lc另一种生活

于 2014-10-12 17:12:05 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/l240896578/article/details/40019779

版权

<!DOCTYPE html>
<html>
<head>
<title>图</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 439px;
height:494px;
background-color: #FFFFFF;
background-image: url(6.jpg);
border-radius: 10px;
}
.b{
width: 135px;
height: 113px;
background-color: #FFFFFF;
position: absolute;
border-radius: 5px;
left: 25px;
top: 35px;
float: left;

}
.b_1{
width: 269px;
height: 113px;
background-color:#ffffff;
float: left;
position: absolute;
border-radius: 5px;
left: 160px;
top: 35px;
}
.b_1_1{
width: 210px;
height: 20px;
background-color:#ffffff;
font-family: arial;
font-weight: 900;
font-size: 16px;
position: relative;
left: 10px;
top: 10px;
}
.b_1_2{
width: 220px;
height: 30px;
background-color:#ffffff;
font-family: arial;
position: relative;
font-size: 5px;
left: 10px;
top: 10px;
border-bottom: dashed gray 1px;
}
.b_1_3{
width: 80px;
height: 25px;
background-color:#ffffff;
position: relative;
font-weight: 900;
font-size: 20px;
left: 10px;
top: 30px;
}
.b_1_4{
width: 100px;
height:25px;
background-color: blue;
position: relative;
left: 150px;
top: 5px;

}
.c{
width: 135px;
height: 113px;
background-color: #FFFFFF;
position: absolute;
border-radius: 5px;
left: 25px;
top: 170px;
float: left;
}
.c_1{
width: 269px;
height: 113px;
background-color:#ffffff;
float: left;
position: absolute;
border-radius: 5px;
left: 160px;
top: 170px;

}
.c_1_1{
width: 210px;
height: 20px;
background-color:#ffffff;
font-family: arial;
font-weight: 900;
font-size: 16px;
position: relative;
left: 10px;
top: 10px;
}
.c_1_2{
width: 220px;
height: 30px;
background-color:#ffffff;
font-family: arial;
position: relative;
font-size: 5px;
left: 10px;
top: 10px;
border-bottom: dashed gray 1px;
}
.c_1_3{
width: 80px;
height: 25px;
background-color:#ffffff;
position: relative;
font-weight: 900;
font-size: 20px;
left: 10px;
top: 30px;
}
.c_1_4{
width: 100px;
height:25px;
background-color: blue;
position: relative;
left: 150px;
top: 5px;
}
.d{
width: 404px;
height: 55px;
background-color:#A19676;
position: absolute;
border-radius: 10px;
left: 25px;
top: 305px;

}
.d_1{
width: 190px;
height: 30px;
font-family: arial;
color: white;
font-weight: 900;
position: relative;
left: 135px;
top: 18px;
}
.e{
width: 404px;
height: 55px;
background-color: #8A805D;
position: absolute;
border-radius: 10px;
left: 25px;
top: 375px;
}
.e_1{
width: 200px;
height: 30px;
font-family: arial;
color: white;
font-weight: 900;
position: relative;
left: 135px;
top: 18px;
}
.f{
width: 380px;
height: 31px;
background-color:#E4E2D6;
position: relative;
border-radius: 10px;
left: 30px;
top: 440px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<img src="7.jpg">
</div>
<div class="b_1">
<div class="b_1_1">Kitchen lorem ipsum dolor</div>
<div class="b_1_2">
hdsjahdkdsdsadadaddsdsccccccccpp
adadadadadadadaddsadadada
</div>
<div class="b_1_3">1248 $</div>
<div class="b_1_4"><img src="10.jpg"></div>
</div>
<div class="c">
<img src="8.jpg">
</div>
<div class="c_1">
<div class="c_1_1">Kitchen Kitchi Kutchi</div>
<div class="c_1_2">
dsadsadsadsadsadsadsadsadsads
dsadsadsadsadsadsads
</div>
<div class="c_1_3">2513 $</div>
<div class="c_1_4">
<img src="10.jpg">
</div>
</div>
<div class="d">
<div class="d_1">Click here now</div>
</div>
<div class="e">
<div class="e_1">This is after click</div>
</div>
<div class="f">
<input type="button" style="width:88px;height:31px;background-image: url(an.jpg);border-radius: 5px;">
<input type="button" style="width:88px;height:31px;background-image: url(an2.jpg);border-radius: 5px;">
<input type="button" style="
width:88px;height:31px;background-image: url(an4.jpg);border-radius: 5px;">
<input type="button" style="width:88px;height:31px;background-image: url(an3.jpg);border-radius: 5px;">
</div>
</div>
</body>
</html>