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

最新推荐文章于 2022-04-09 11:25:52 发布

trb331617

最新推荐文章于 2022-04-09 11:25:52 发布

阅读量1.6k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/trb331617/article/details/85381731

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

Color:

<!-- RGB -->
#000000: 黑；        #00ffff: 浅亮蓝；    #000084: 暗蓝；
#ff0000: 亮红；      #ffffff: 白；        #840084: 暗紫；
#00ff00: 亮绿；      #c6c6c6: 亮灰；      #008484: 浅暗蓝；
#ffff00: 亮黄；      #840000: 暗红；      #848484: 暗灰；
#0000ff: 亮蓝；      #008400: 暗绿；      #ff00ff: 亮紫；
#848400: 暗黄

trb331617

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html - 好友列表 - 头像为名字最后一个字

DATE: 2018-12-30result:File 01: test02.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;title&gt; 网络小说 &lt;/title&gt; &lt;meta charset="utf-8"&gt; &a
复制链接

扫一扫