html - 好友列表 - 头像为名字最后一个字

DATE: 2018-12-30

result:

File 01: test02.html

<!DOCTYPE html>
<html>

<head lang="en">
    <title> 网络小说 </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./test02.css"/>
</head>

<body>
    <div>
    <ul class="NameList">        
        <li>
            <span class="NameIcon">恩</span>
            <span class="name">布莱恩</span>
            <span class="address">大魔王</span>
        </li>
        <li>
            <span class="NameIcon girl">东</span>
            <span class="name">张卫东</span>
            <span class="address">修真老师生活录</span>
        </li>
        <li>
            <p>枫</p>
            <span class="name">古枫</span>
            <span class="address">天生神医</span>
        </li>
        <li>
            <img src="./walle.jpg"/>
            <span class="name">陈潇</span>
            <span class="address">重生贵公子</span>
        </li>
        <li>
            <img src="./dian.jpg"/>
            <span class="name">阿克蒙德 李察</span>
            <span class="address">罪恶之城</span>
        </li>
    </ul>
    </div>
</body>

</html>

File 02: test02.css

/* CSS区分大小写 */

/* 通用样式 */
*{
    margin:0;
    padding:0;
}

.NameList{
    margin:6px 0 0 6px; /* 上右下左 */
    background-color:#f3f3f3;
}
.NameList li{
    list-style:none;    /* 去除列表项前的标号 */
    width:300px;
    height:50px;
    line-height:50px;
    background-color:white;
    /* border:1px solid #ededf5; */ /* 线宽 样式 颜色 */
    margin-top:1px;
    padding:5px 0;  /* 上下、左右 */
    }
.NameList span.NameIcon{
    width:50px;
    height:50px;
    line-height:50px;
    background: blue;
    color:white;
    font-size:35px;
    text-align:center;  /* 文字居中 */
    float:left;
}
.NameList span.girl
{
    background:#ff07fa;
}
.NameList img{
    width:50px;
    height:50px;
    float:left;
}
.NameList p{
    width:50px;
    height:50px;
    line-height:50px;
    background: blue;
    color:white;
    font-size:35px;
    text-align:center;
    float:left;
}
.NameList span.name{
    float:left;
    width:110px;
    height:100%;
    margin-left:5px;
    font-size: 20px;
    overflow:hidden;    /* 溢出时隐藏溢出部分 */
}
.NameList span.address{
    float:left;
    font-size:10px;
}

html - 好友列表 - 头像为名字最后一个字

相关推荐