Mui- Card View

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
</head>
<body > 
    < header class = "MUI MUI-bar-bar-NAV" > <-! top navigation bar - with a return key -> 
        < A class = "MUI-Action Back-MUI MUI-icon-icon-LEFT - MUI-left pull-NAV " > </ A > 
        < h1 of class =" MUI-title " > test properties </ h1 of > 
    </ header > 
    < div class =" MUI-Content " > <-! mbody body controls recommendations are written in the content inside -> 
        < div class = "MUI-Card" style="margin: 10px;"><!--Four Margin -> 
        <! - the header, placed title -> 
        < div class = "MUI-Card-header" > 
            < IMG the src = "imgs / 2.png" width = "40" class = " pull-left-MUI " style =" padding-left: 0px; Line-height: 0px; " /> 
            < div class =" MUI-Media-body " style =" padding: 5px; " > ! <- inside can nested title, text content, padding, four within the margin settings -> 
                < the p- > Posted 15:30 2016-06-30 </ the p- > 
            </div>
        </div>
        <! - Content Area -> 
            < div class = "Content-MUI-Card" style = "Line-height: 0px;" > 
                < IMG the src = "imgs / 1.png" width = "100%"  /> 
            </ div > 
                
            <! - footer, additional information or place operations supported -> 
            < div class = "MUI-Card-footer" > 
                < div class = "MUI-Media-body" style = "padding: 5px ; " > <! - inside nestable title, text, padding, padding provided four -> 
                    small M 
                    <the p- > Posted 2016-06-30 15:30</ P > 
                </ div > 
            </ div > 
        </ div > 
        <-! Can be recycled, provided the card attempting -> 
        < div class = "MUI-Card" style = "margin: 10px;" > <-! - four Margin -> 
        <! - the header, placed title -> 
        <! - <div class = "MUI-Card-header"> header </ div> -> 
        <! - content area -> 
            < div class = "Content-MUI-Card" style = "background: # 900; Line-height: 0px;" > <! - Line-height: 0px; reducing the gap, remove the white background -> 
                <IMG the src = "imgs / 1.png" width = "100%"  /> 
            </ div > 
                
            <-! footer, additional information or the placement operation supported -> 
            < div class = "footer-MUI-Card" > 
                < div class = "MUI-Media-body" style = "padding: 5px;" > <-! inside nestable title, text, padding, padding provided four -> 
                    small M 
                    < P > Posted at 15:30 2016-06-30 </ the p- > 
                </ div > 
            </ div > 
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">mui.init();</script>
</body>
</html>

Guess you like

Origin www.cnblogs.com/fdxjava/p/11071899.html