nec css规范

<html>
<head>
    <meta charset="UTF-8">
    <title>体验网易nec 规范 title>
    <style>
    /**
     *
     * .g_ 布局
     * .m_ 模块
     * .u_ 元件 
     * .f_ 功能
     * .z_ 状态
     *
     * css 多用组合 少用继承 
     * 
     * 该方法是网易前端nec框架 
     * 页面是使用 nec规范 的demo 
     * 2017 4 27 
     */

    /*rest      
     -------------------------*/
     body{margin: 0;background-color: #eee;}
     ul{list-style: none;padding: 0;margin: 0;}

    .g_layout {width:1200px;margin: 0 auto;}    
    .g_main{float: left;width: 980px;}
    .g_side{float: right;width: 200px;}
    .g_main_sd{float: left;width: 170px;}
    .g_main_mn{float: right;width: 800px;}

    .m_head{background-color: #000923;}
    .m_head .log_img{margin-top: 8px;}

    .m_nav{list-style: none;margin: 0;}
    .m_nav .nav_item{float: left;margin: 0 5px;}

    .m_hot_sell .title{margin: 0 0 5px 0;padding: 0 0 5px 0;}
    .m_hot_sell .item{float: left;margin-right: 10px;}
    .m_hot_sell .item img{width: 120px;height: 120px;}

    .m_brand_sdlist .item{margin-bottom: 10px;}
    .m_brand_sdlist .tit{margin: 0;padding: 5px;}
    .m_brand_sdlist .list{margin: 0;padding: 5px;}

    .m_tab{list-style: none;background-color: #000923;margin: 10px 0;color:#fff;padding: 0;}        
    .m_tab .tab_item{float: left;width: 20%;text-align: center;}
    .m_tab .tab_item.z_cur{background-color: #244091;color: #fff;}

    .m_tab2{display: inline-block; list-style: none;background-color: #f8f8f8;margin: 10px 0;color:#fff;padding: 0;}        
    .m_tab2 .tab_item{float: left;width: 55px;text-align: center;padding: 5px 0;margin-right: 10px; }
    .m_tab2 .tab_item.z_cur{background-color: #244091;color: #fff;}

    .m_pro_list li.item{float: left;width: 190px;}

    .u_log{width:100px;height: 30px;}
    .u_btn{}
    .u_wrap{background-color: #fff;clear: both;overflow: hidden;color: #666;padding: 5px;}

    .f_left {float: left;}
    .f_right{float: right;}

    .f_white{color:#fff;}
    .f_hui_b{color:#151515}/*storng*/
    .f_hui_t{color:#333}/*title*/
    .f_hui_c{color:#666}/*content*/
    .f_hui_s{color:#999}/*subcontent*/

    .f_bg_white{background-color: #fff;}
    .f_bg_hui{background-color: #eee;}

    .f_clr{clear: both;overflow: hidden;}
    .f_line46{height: 46px;line-height: 46px;}
    .f_line28{height: 36px;line-height: 36px;}
    .f_inlineblock{display: inline-block;}

    .f_m0{margin: 0;}
    .f_mb10{margin-bottom: 10px;}
    .f_mb20{margin-bottom: 20px;}
    .f_p20{padding: 20px;}
    .f_p10{padding: 10px;}
    .f_bd{border: 1px solid #ddd;}
    .f_bdb{border-bottom: 1px solid #ddd;}

    .f_fs18{font-size: 18px;}
    .f_fs24{font-size: 24px;}
    style>
head>
<body>
    <div class="m_head f_white">
        <div class="g_layout f_clr">
            <div class="f_left f_line46">
                <img class="f_inlineblock u_log log_img" src="https://unsplash.it/g/200/300" alt="">
            div>
            <ul class="m_nav m_site_nav f_right f_line46">
                <li class="nav_item">11li>
                <li class="nav_item">11li>
                <li class="nav_item">11li>
                <li class="nav_item">11li>
            ul>
        div>
    div>
    <div class="g_layout">
        <ul class="m_tab m_head_tab f_clr f_line28">
            <li class="tab_item z_cur">1li>
            <li class="tab_item">1li>
            <li class="tab_item">1li>
            <li class="tab_item">1li>
        ul>
    div>
    <div class="g_layout f_clr">
        <div class="g_main">
            <div class="mainc">
                <div class="m_hot_sell f_mb20 f_bg_white f_p20">
                    <h1 class="title f_bdb f_fs24">热销h1>
                    <ul class="wrap f_clr">
                        <li class="item">
                            <img src="https://unsplash.it/200/300/?random" alt="1">
                        li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                        <li class="item"><img src="https://unsplash.it/200/300/?random" alt="1">li>
                    ul>
                div>
                <div class="f_clr">
                    <div class="g_main_sd">
                        <div class="f_bg_white f_p10 m_brand_sdlist">
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">1p>
                                <ul class="list">
                                    <li>1li>
                                    <li>2li>
                                    <li>3li>
                                    <li>4li>
                                    <li>5li>
                                ul>
                            div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">2p>
                                <ul class="list">
                                    <li>1li>
                                    <li>2li>
                                    <li>3li>
                                    <li>4li>
                                    <li>5li>
                                ul>
                            div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">3p>
                                <ul class="list">
                                    <li>1li>
                                    <li>2li>
                                    <li>3li>
                                    <li>4li>
                                    <li>5li>
                                ul>
                            div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">4p>
                                <ul class="list">
                                    <li>1li>
                                    <li>2li>
                                    <li>3li>
                                    <li>4li>
                                    <li>5li>
                                ul>
                            div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">5p>
                                <ul class="list">
                                    <li>1li>
                                    <li>2li>
                                    <li>3li>
                                    <li>4li>
                                    <li>5li>
                                ul>
                            div>  
                        div>
                    div>
                    <div class="g_main_mn">
                        <div class="f_bg_white f_p10">
                            <ul class="m_tab2 f_hui_t f_clr">
                                <li class="tab_item z_cur">allli>
                                <li class="tab_item">moreli>
                                <li class="tab_item">numli>
                            ul>
                            <div class="m_pro_list">
                                
                                <ul class="wrap f_clr">
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww1p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww2p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww3p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww4p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww5p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww6p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww7p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww8p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww9p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww10p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww11p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww12p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww13p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww14p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww15p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww16p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww17p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww18p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww19p>
                                    li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww20p>
                                    li>
                                ul>
                            div>
                        div>
                    div>
                div>

            div>
        div>
        <div class="g_side">
            <div class="sidec f_bg_white f_p20">
                <h2 class="f_m0 f_fs18">Browse relatedh2>
                <ul>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2p>
                        div>
                    li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2p>
                        div>
                    li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2p>
                        div>
                    li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2p>
                        div>
                    li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2p>
                        div>
                    li>       
                ul>
            div>
        div>      
    div>
    <div class="m_foot">
        <img src="https://unsplash.it/1800/200?random" width="100%" alt="">
    div>
body>
html>

你可能感兴趣的:(学习笔记)