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">11</li>
                <li class="nav_item">11</li>
                <li class="nav_item">11</li>
                <li class="nav_item">11</li>
            </ul>
        </div>
    </div>
    <div class="g_layout">
        <ul class="m_tab m_head_tab f_clr f_line28">
            <li class="tab_item z_cur">1</li>
            <li class="tab_item">1</li>
            <li class="tab_item">1</li>
            <li class="tab_item">1</li>
        </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">1</p>
                                <ul class="list">
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                            </div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">2</p>
                                <ul class="list">
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                            </div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">3</p>
                                <ul class="list">
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                            </div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">4</p>
                                <ul class="list">
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                            </div>
                            <div class="item f_bd">
                                <p class="tit f_bdb f_bg_hui">5</p>
                                <ul class="list">
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </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">all</li>
                                <li class="tab_item">more</li>
                                <li class="tab_item">num</li>
                            </ul>
                            <div class="m_pro_list">
                                <!-- ul.wrap>(li.item>(img[src=https://unsplash.it/200/300/?random][width=160][height=160]+p{wwwwww$}))*20 -->
                                <ul class="wrap f_clr">
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww1</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww2</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww3</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww4</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww5</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww6</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww7</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww8</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww9</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww10</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww11</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww12</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww13</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww14</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww15</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww16</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww17</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww18</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww19</p>
                                    </li>
                                    <li class="item">
                                        <img src="https://unsplash.it/200/300/?random" alt="" width="160" height="160">
                                        <p>wwwwww20</p>
                                    </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 related</h2>
                <ul>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2</p>
                        </div>
                    </li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2</p>
                        </div>
                    </li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2</p>
                        </div>
                    </li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2</p>
                        </div>
                    </li>
                    <li>
                        <img src="https://unsplash.it/130/130/?random" alt="" width="130" height="130">
                        <div>
                            <p>2</p>
                        </div>
                    </li>       
                </ul>
            </div>
        </div>      
    </div>
    <div class="m_foot">
        <img src="https://unsplash.it/1800/200?random" width="100%" alt="">
    </div>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
诺瓦星云(NEC)是一个基于区块链技术的云计算平台,为企业和开发者提供了一种新型的去中心化云服务。为了帮助用户更好地了解NEC平台和掌握其使用技巧,NEC官方推出了一本名为“诺瓦星云(NEC)培训书本”的教材。 这本培训书本旨在通过系统化和全面的介绍,帮助读者深入了解NEC平台的核心概念、技术原理以及应用场景。它从NEC平台的背景和发展历程开始,向读者解释了区块链和云计算的基本概念。接着,书中详细介绍了NEC平台的特点和功能,包括智能合约、去中心化存储和计算能力。 除了理论知识,这本培训书本还提供了大量的实例和操作指南。它通过实际案例和操作步骤,引导读者学习如何使用NEC平台进行开发、部署和管理区块链应用。此外,书中还涵盖了NEC平台的安全性和性能优化等方面的内容,帮助用户更好地保护数据和提升系统效率。 通过阅读这本培训书本,用户可以系统地学习NEC平台的使用方法,并掌握相关技术和工具。这对于企业和开发者来说都是非常有价值的,因为NEC平台的应用前景广阔,能够为各行业带来创新和变革。 总而言之,“诺瓦星云(NEC)培训书本”是一本全面介绍NEC平台的教材,通过理论和实践相结合的方式,帮助读者深入了解NEC平台的核心概念和使用技巧,为其在区块链领域的应用打下坚实的基础。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值