列表页制作一

Posted 青春无语

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了列表页制作一相关的知识，希望对你有一定的参考价值。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href = "list.css" rel = "stylesheet" type="text/css">
</head>
<body>
<ul>
    <li class="km-list">
        <a href = "#" class="km-avatar">
            <img src = "#" alt="un">
        </a>
        <h4>
            dfsfdf
        </h4>
        <p>
            <span>xianxin</span>
            <span>3tianqian</span>
            <span>layui</span>
            <span class = "view">
                <i>28</i>
                <i>350</i>
            </span>
        </p>
    </li>
    <li class="km-list">
        <a href = "#" class="km-avatar">
            <img src = "" alt="un">
        </a>

        <h4>
            fsdfs
        </h4>
        <p>
            <span>xianxin</span>
            <span>3tianqian</span>
            <span>layui</span>
            <span class = "view">
                <i>28</i>
                <i>350</i>
            </span>
        </p>
    </li>
</ul>
</body>
</html>
View Code

css代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: \'\';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*li样式*/
/*给个相对定位，用来定位内部子元素*/
/*给个高度==内部用户头像图片高度*/
/*给上下padding 10px，则总高度=65px*/
/*给个左padding75px，一会儿用来放置图片*/
.km-list
{
    position: relative;
    height: 45px;
    padding: 10px 0px 10px 75px;
    border-bottom: 1px dotted #E9E9E9;
}
/*给头像一个绝对定位，让其移动到距离li父节点左边15px，顶部10px的位置*/
/*同时，脱离文档流，下面的h2节点和p节点可以和头像对其*/
.km-list .km-avatar
{
    position: absolute;
    left: 15px;
    top:10px;
}
/*设置头像的宽高*/
/*水平方向15+45+15=75*/
/*垂直方向10+45+10=65*/
.km-avatar img
{
    width:45px;
    height: 45px;
    border-radius: 2px;
}
View Code

参照layui社区模板前端代码

以上是关于列表页制作一的主要内容，如果未能解决你的问题，请参考以下文章

为片段制作自定义列表视图？

译丨Yarn - Javascript 新一代套件管理

改变另一个片段的片段（列表）

如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段？

可折叠工具栏 - 使片段页脚在 Android 中始终可见

P07：博客列表页&底部制作