DAY4——腾讯训练营

来源：互联网发布：淘宝代购only是正品吗编辑：程序博客网时间：2024/05/20 18:52

卡片制作

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;
}

最后的效果图：

0 0