卡片制作
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="0419.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="card">
<div class="card_image">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492610287248&di=cd64598361ddefa113b348037df8d6c0&imgtype=0&src=http%3A%2F%2Fi-7.vcimg.com%2F6839727a04721d94508e13186a71c4db1168327%2Forigin.jpg" width="135px" height="150px" />
</div>
<div class="card_body">
<div class="card_title">
<h4 style="text-align:center">TITANIC</h4>
</div>
<div class="card_time">
<p style="text-align:center">December 19,1997</p>
</div>
<div class="card_content">
<h5 style="text-align:center">lead actor/actress </h5>
<p style="text-align:center">Leonardo DiCaprio</p>
<p style="text-align:center">Kate Winslet</p>
</div>
</div>
</div>
</body>
</html>
css文件
*{
padding:0px;
margin:0px;
}
.card
{
width:295px;
height:150px;
border:solid 1px #000000;
}
.card_image
{
width:132px;
height:150px;
float:left;
margin-left:5px;
}
.card_body
{
width:147px;
height:150px;
float:left;
margin-left:5px;
}
.card_title {
height:25px;
padding-top:4px;
}
.card_time {
height:30px;
width:145px;
}
.card_content {
height:90px;
}
.card_content p{
padding-top:2px;
}
最后的效果图：
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
