欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html.div

程序员文章站 2022-06-03 08:10:53
使用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>&nbsp;|&nbsp;</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