zoukankan      html  css  js  c++  java
  • 列表页制作一

    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社区模板前端代码

  • 相关阅读:
    转载(SQL Server 存储过程的分页)
    学会了怎么样利用捕获异常提示数据库主键重复错误
    遇到.net加了验证控件的表单无法提交的问题
    过劳死IT界杀手 [注:该文属于转载,非原创],好可怕啊!
    很喜欢的一些道理。
    学会了在DropDownList的项里加多个空格
    好东东:asp.net利用多线程执行长时间的任务,客户端显示出任务的执行进度的示例
    javascript判断字符长度最好的方法
    layui中使用layverify进行非必填整数校验
    SuppressWarnings抑制警告的关键字
  • 原文地址:https://www.cnblogs.com/kamibaba/p/6574790.html
Copyright © 2011-2022 走看看