列表頁製做一

時間 2019-12-06

標籤列表製做简体版

原文原文鏈接

html代碼css

<!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

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社區模板前端代碼前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。