使用div構造簡單的信息圖片 html: <!DOCTYPE html><html><head><meta charset="utf-8"><title>zhwTest</title><link rel="stylesheet" href="../css/zhwCommon.css"></head> ...
使用div構造簡單的信息圖片
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zhwTest</title>
<link rel="stylesheet" href="../css/zhwCommon.css">
</head>
<body>
<div id="mainbody">
<div class="border-radius" id="divbox" onclick="getInfo(id)">
<span> <image width=60px heigth=60px src="../image/男.png"></span><br/>
<span>
<a>張三</a>
<a> | </a>
<a style="color:red;">30歲</a>
</span><br/>
<hr style=”border:1 dashed s#987cb9“ width=”100%“ color=#987cb9 SIZE=1/>
<span>
<a>node</a>
</span><br/>
</div>
</div>
</body>
</html>
css:
.border-radius
{
border:5px solid blue;
padding:5px;
background:white;
width:150px;
height:140px;
border-radius:0px;
float:left;
font-size: 18px;
}
#mainbody
{
border:none;
padding:0px;
background:#edeef0;
border-radius:5px;
height:100%;
text-align: center;
}
頁面顯示樣式：
