CSS

最新推荐文章于 2024-09-08 10:28:36 发布

枫叶-

最新推荐文章于 2024-09-08 10:28:36 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/zhangtaoloving/article/details/40023755

版权

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.bg
{
margin: auto;
font-family: Arial;
color: white;
width: 292px;
height: 592px;
}
.p1
{
font-size: 15px;
font-weight: bold;
height: 67px;
line-height: 67px;
background-color: rgb(79,192,232);
text-align: center;
}
.p2
{
margin-top: 18px;
height: 195px;
background-color: rgb(79,192,232);
}
.p2_1
{
float: left;
width: 75px;
height: 75px;
line-height: 75px;
}
.p2_2
{
font-size: 15px;
font-weight: bold;
float: left;
width: 217px;
height: 75px;
line-height: 75px;
}
.p2_3
{
position: relative;
left: 12px;
top: 4px;
height: 120px;
font-size: 13px;
line-height: 19px;
word-spacing: -1px;
}
.p3
{
margin-top: 18px;
height:295px;
background-color: rgb(79,192,232);
}
.p3_1
{
height: 55px;
background-color: rgb(59,174,218);
}
.p3_1_1
{
position: relative;
left: 15px;
top: 15px;
width: 55px;
float: left;
}
.p3_1_2
{
width: 182px;
font-size: 15px;
font-weight: bold;
line-height: 55px;
text-align: center;
float: left;
}
.p3_1_3
{
position: relative;
left: 15px;
top: 15px;
width: 55px;
float: left;
}
.p3_2
{
height: 240px;
text-align: center;
}
.p_button
{
margin-left: auto;
margin-right: auto;
width: 160px;
height: 45px;
background-color: rgb(9,174,218);
line-height: 45px;
font-size: 15px;
}
</style>
</head>
<body>
<div class="bg">
<div class="p1"><b>LOAD MORE</b></div>
<div class="p2">
<div class="p2_1"><img src="la.png"></div>
<div class="p2_2">   <b>LOREM IPSUM DOLOR</b></div>
<div class="p2_3">
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.<b>Read More</b>
</div>
</div>
<div class="p3">
<div class="p3_1">
<div class="p3_1_1"><img src="arrow.png"/></div>
<div class="p3_1_2">WEDNESDAY</div>
<div class="p3_1_3"><img src="arrow2.png"/></div>
</div>
<div class="p3_2">
<div style="font-size:140px;">26</div>
<div class="p_button"><b>ADD EVENT</b></div>
</div>
</div>
</div>
</body>
</html>