<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>
nec css规范
最新推荐文章于 2021-06-09 12:46:50 发布