html.div

程序员文章站 2023-10-17 23:37:35

使用div构造简单的信息图片 html: zhwTest ......

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

页面显示样式：

html.div

上一篇：长假期间饮食切不可肆意 7个原则护肠胃

下一篇：五个最不健康的生活习惯你有吗