nec css规范

最新推荐文章于 2021-06-09 12:46:50 发布
最新推荐文章于 2021-06-09 12:46:50 发布
阅读量640 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： css nec 网易
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blueblueuueew/article/details/70859685
版权 
<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_2008.pdf
11-20
美国国家电气规范_nec_2008,美国国家电气规范_nec_2008下载美国国家电气规范_nec_2008下载美国国家电气规范_nec_2008下载
nec规范之css框架文件
09-05
nec规范之css框架文件,详见博文：http://blog.csdn.net/chen_zw/article/details/47908475
CSS规范-网易NEC
雾里看花
09-05 3449
㈠ CSS规范 - 分类方法Ⅰ. CSS文件的分类和引用顺序通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。 我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。 1. 公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长
NEC 框架规范 css function
weixin_33755554的博客
02-21 83
/* function */.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}.f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;...
CSS规范—分类方法（NEC规范学习笔记）
weixin_30546933的博客
01-19 141
一、CSS文件的分类和引用顺序 Css按照性质和用途，将Css文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用，有需要可以添加版本号 1.公共型样式：包含以下几个部分 标签的重置和设置默认值：比如定义a标签。 统一调用背景图和清除浮动或其他需统一处理的长样式： 网站通用布局： 通用模块和其他拓展： 元件和其拓展： 功能类样式...
转载/NEC:更好的CSS样式解决方案之三/工程师规范篇
qq_26780317的博客
01-30 231
前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。 规范 你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；你和他一起开发一个产品，你总是怕...
一个将你写的任意风格的CSS代码转换成符合NEC代码规范的Gulp插件
08-10
一个将你写的任意风格的CSS代码转换成符合NEC代码规范的Gulp插件{"JavaScript":2725}
snippetsOfNEC:NEC 用于 sublime 文本编辑器的 CSS 片段
07-14
snippet，你用活了么?——Sublime代码片段，提高你的开发效率作为一名前端coder，这款编辑器应该不会陌生啦，简单轻量功能强大，真心好用~ 再说说它提供的snippet功能，可以一定程度的把我们从复制粘贴的重复劳动中...
NEC4 Practical Solutions
06-14
NEC4 Practical Solutions NEC4实用解决方案
NEC html规范
weixin_33785972的博客
02-19 92
HTML规范-整体结构 HTML基础设施 文件应以“<!DOCTYPE......>”首行顶格开始，推荐使用“<!DOCTYPEhtml>”。 必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码<metacharset="utf-8"/>。 根据页面内容和需求填写适当的keywords和description...
nec规范
天涯蓝药师
09-14 585
你和他一起开发一个产品，你总是怕代码和他有冲突或互相影响 1.公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。     2.特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模
css框架---网易NEC之css规范，使用和学习心得
weixin_33937778的博客
11-08 123
说在前头关于网易NEC，（想瞧一瞧请点击这里）我最早听说是在三个月前；是一位三年多工作经验的前端大牛，推荐的；然后自己看了一下觉得非常不错。也就在公司项目中使用了，并逐渐喜欢了这种风格。现在，差不多用了三个多月；今天呢，再次拜读了新浪前端大牛--曹刘阳的《编写高质量代码--Web前端开发修炼之道》（想下载请点击这里），这本书是10年出来的，里面关于css样式文件如何分类，整理...
转载/NEC:更好的CSS样式解决方案之一/CSS规范篇
qq_26780317的博客
01-30 697
前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。 规范 你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；你和他一起开发一个产品，你总是怕...
NEC 更好的css方案
yang5687810的博客
03-04 278
css reset： 概述 重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。 代码展示 /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,f...
html 样式规则,分类方法 - CSS规范 - 规范 - NEC : 更好的CSS样式解决方案
weixin_34759490的博客
06-09 96
重置(reset)和默认(base)(tags)：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！统一处理：建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式！布局(grid)(.g-)：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！模块(...
国产框架：“nec更好的css方案”
专注的小眼神的博客
03-31 1237
所谓网网易出品，必出精品。我想很多人在用过网易的产品时，都会感觉哎呦，不错哦！ 总体来说有个特点就是规矩，整洁。接下来说的这个就是来自网易的一个开源的前端css项目。 那么NEC是什么呢，他是网易（杭州）前端css开源项目项目，N:nice; E:easy; C:css；她包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案，提高多人协作效率，也
NEC≠NEC=NFPA 70
冰影随风的专栏
09-25 970
在世界上任何地方销售电气设备，就不可避免地要接触当地的电气规范。这些规范包括了设备安规、配电安规、并网要求、电磁兼容等等。 在美国，电气业界普遍使用的配电规范名为NEC (National Electrical Code) ，即国家电气规范。 这个规范还有另外一个名字叫做NFPA 70. NFPA的全称为National Fire Protection Association，即全国消防协会。听起来是个国有监管组织，然而并非如此。由于美国是个自组织的的社会，一旦某个行业出现混乱或者缺罚监管的情况，往往
nec（网易前端css框架）
宅小屋, 观天下, 心淡定, 享生活。
03-20 2645
http://nec.netease.com/
CSS规范 - 最佳实践--（来自网易）
weixin_33895516的博客
04-22 91
最佳选择器写法（模块） /* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性 优化组合 */ .m-nav li{}/* 后个性 语义化标签选择器 */ .m-nav a{}/* 后个性中的共性 按结构顺序 */ .m-nav a.a1{}/* 后个性中的个性 */ .m-nav a.a2{}/* 后个性中的个性...
诺瓦星云nec培训书本
最新发布
07-29
诺瓦星云（NEC）是一个基于区块链技术的云计算平台，为企业和开发者提供了一种新型的去中心化云服务。为了帮助用户更好地了解NEC平台和掌握其使用技巧，NEC官方推出了一本名为“诺瓦星云（NEC）培训书本”的教材。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值