<!DOCTYPE html>
<html>
<head>
<title>homework</title>
<meta charset="utf-8"/>
<style type="text/css">
.bg{
margin: auto;
width: 292px;
height: 592px;
background: #4FC0E8;
text-align: center;
font-weight: bold;
font-family: calibri;
color: white;
}
.div1{
height: 65px;
border-bottom: solid #3DAED6 2px;
line-height: 65px;
}
.div2{
background: white;
height: 18px;
}
.div3{
height: 175px;
border-bottom: solid #3DAED6 2px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
}
.lab{
position: relative;
top: -19px;
}
.div3_1{
text-align: left;
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
}
.div4{
background-color: #3BAEDA;
padding-left: 15px;
padding-right: 15px;
height: 41px;
line-height: 28px;
padding-top: 14px;
}
.div5{
font-size: 120px;
font-weight: normal;
padding-top: 15px;
padding-bottom: 15px;
}
.im{
position: relative;
left: -15px;
}
input[type="button"]{
border: none;
background: #3BAEDA;
width: 160px;
height: 45px;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="bg">
<div class="div1">LOAD MORE</div>
<div class="div2"></div>
<div class="div3">
<div>
<img src="radio.png" class="im" />
<label class="lab">LOREM IPSUM DOLOR</label>
</div>
<div class="div3_1">
Quisque posuere risus erat at scelerisque felis pulvinar quis. Maecenas arcu lorem, laoreet at dui in,hendrerit mattis mi.Sed eu vehicula lectus felis pulvinar quis. Maecenas arcu lorem, laoreet at posuere risus erat.
<a href="#" style="font-weight: bold;text-decoration: none;color: white;">Read More</a>
</div>
</div>
<div class="div2"></div>
<div style="height:294px;border-bottom: solid #3DAED6 2px;">
<div class="div4">
<img src="left.png" align="left">
<label >WEDNESDAY</label>
<img src="right.png" align="right">
</div>
<div class="div5">26</div>
<div><input type="button" value="ADD EVENT"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>homework</title>
<meta charset="utf-8"/>
<style type="text/css">
.bg{
margin: auto;
width: 292px;
height: 592px;
background: #4FC0E8;
text-align: center;
font-weight: bold;
font-family: calibri;
color: white;
}
.div1{
height: 65px;
border-bottom: solid #3DAED6 2px;
line-height: 65px;
}
.div2{
background: white;
height: 18px;
}
.div3{
height: 175px;
border-bottom: solid #3DAED6 2px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
}
.lab{
position: relative;
top: -19px;
}
.div3_1{
text-align: left;
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
}
.div4{
background-color: #3BAEDA;
padding-left: 15px;
padding-right: 15px;
height: 41px;
line-height: 28px;
padding-top: 14px;
}
.div5{
font-size: 120px;
font-weight: normal;
padding-top: 15px;
padding-bottom: 15px;
}
.im{
position: relative;
left: -15px;
}
input[type="button"]{
border: none;
background: #3BAEDA;
width: 160px;
height: 45px;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="bg">
<div class="div1">LOAD MORE</div>
<div class="div2"></div>
<div class="div3">
<div>
<img src="radio.png" class="im" />
<label class="lab">LOREM IPSUM DOLOR</label>
</div>
<div class="div3_1">
Quisque posuere risus erat at scelerisque felis pulvinar quis. Maecenas arcu lorem, laoreet at dui in,hendrerit mattis mi.Sed eu vehicula lectus felis pulvinar quis. Maecenas arcu lorem, laoreet at posuere risus erat.
<a href="#" style="font-weight: bold;text-decoration: none;color: white;">Read More</a>
</div>
</div>
<div class="div2"></div>
<div style="height:294px;border-bottom: solid #3DAED6 2px;">
<div class="div4">
<img src="left.png" align="left">
<label >WEDNESDAY</label>
<img src="right.png" align="right">
</div>
<div class="div5">26</div>
<div><input type="button" value="ADD EVENT"></div>
</div>
</div>
</body>
</html>
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
