简单的html+css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework</title>
<style type="text/css">
.div1{
width: 291px;
height: 593px;
border: 1px solid black;
}
.div2{
width: 291px;
height: 45px;
background: #4FC0E8;
color: white;
font-weight: bold;
text-align: center;
font-family: Arial;
padding-top: 25px;
}
.div3{
width: 291px;
height: 18px;
background: white;
}
.div4{
float: left;
width: 208px;
height: 83px;
background: #4FC0E8;
color: white;
font-family: Arial;
font-weight: bold;
padding-left:83px;
margin-top: -84px;
line-height: 83px;
}
.div5{
width: 283px;
height: 112px;
background: #4FC0E8;
color: #D9E0FA;
font-weight: bold;
font-family: Arial;
font-size: 10px;
margin-top: -1px;
padding-left: 8px;
text-align: left;
line-height: 16px;
}
.div6{
width: 291px;
height: 235px;
background: #4FC0E8;
}
.div7{
width:150px;
height:47px;
background:#3BAEDA;
margin-left: 65px;
text-align: center;
line-height: 47px;
font-family: Arial;
color: #F0F6F2;
font-weight: bold;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> <!-- 第一块蓝色背景模块 -->
LOAD MORE
</div>
<div class="div3"> <!-- 第二块白色背景模块 -->
</div>
<span>
<img src="lb2.jpg"><!-- 喇叭模块 -->
</span>
<div class="div4">
LOREM IPSUM DOLOR
</div> <!-- 喇叭后面的模块 -->
<div class="div5"> <!-- 喇叭下面一段文字模块 -->
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.
<span style="font-size:12px;color:white;font-weight:bolder;text-shadow:white;text-decoration:blink;">Read more
</span> <!-- 文字最后两个单词 -->
</div>
<!-- 大段文字下的空白模块 -->
<div style="width:291px;height:19px;background:white;"></div>
<!-- 空白下WEDNESDAY模块 -->
<div style="width:291px;height:56px;background:#3BAEDA;">
<img src="xq4.jpg">
</div>
<!-- 剩下的全部模块 -->
<div class="div6">
<div style="color:#FCFFFB;font-size:9em;text-align:center;font-family:黑体;font-weight:100;">
26
</div>
<div class="div7">
ADD EVENT
</div>
</div>
</div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
