NEC是什麼?
NEC是Nice Easy Css的簡稱,是網易(杭州)前端CSS開源項目代號,她爲您提供漂亮簡單的樣式解決方案。
她包括了規範、框架、代碼庫、插件等內容,致力於爲前端開發人員提供高效率高質量的前端頁面開發解決方案,提高多人協作效率,也爲非專業人員提供快速製作網頁的解決方案。
- 讀規範,讓你的代碼更具智慧和美麗的方法
- 用框架,選擇一份合適的HTML和CSS基礎代碼
- 找代碼,在這裏找到她,或給你啓發,或她就是你的
- 裝插件,幫助你快速有效的使用代碼庫
今天特地學習了NEC自適應相關的佈局,下面是主要的使用示例。
兩列左側定款,右側自適應佈局
<div class="g-bd1 f-cb">
<div class="g-sd1">
<p>左側定寬</p>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<p>右側自適應</p>
</div>
</div>
</div>
<style>
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}
p{height: 150px;padding: 10px;color: #fff;background: orange;}
</style>
其中左側定寬,設置相對定位,左浮動脫離文檔流,右移定寬的負值;
右側設爲右浮動,寬爲100%,右側margin-left設爲左側定寬+隔開距離;
注意:這裏負邊距如果低於左側寬度,將會無法滿足右側100%寬度要求,需要自己動手實驗哈。
兩列右側定寬,左側自適應佈局
<div class="zell-dm2 g-bd2 f-cb">
<div class="g-mn2">
<div class="g-mn2c">
<p>
我是左側
</p>
</div>
</div>
<div class="g-sd2">
<p>
我是右側
</p>
</div>
</div>
<style>
.g-sd2{float: right;position: relative;width:240px;margin-left:-240px;}
.g-mn2 {float: left;width:100%;}
.g-mn2c {margin-right: 280px;}
.zell-dm2 p{background: pink;height:300px;padding:5px;}
</style>
和上一個思路相同。
三列左側自適應佈局
<div id="demo">
<div class="g-bd4 f-cb">
<div class="g-sd41">
<p>右側定寬1</p>
</div>
<div class="g-sd42">
<p>右側定寬2</p>
</div>
<div class="g-mn4">
<div class="g-mn4c">
<p>左側自適應</p>
</div>
</div>
</div>
</div>
<style>
#demo{
width:980px;margin:auto;
margin-top: 45px;
}
.g-bd4{
border:1px solid black;
}
.g-sd41,.g-sd42{
position: relative;float: right;width:230px;
}
.g-sd42{
width:190px;margin-right: 10px;
}
.g-mn4{
float: left;width:100%;margin-right: -430px;
}
.g-mn4c{
margin-right:440px;
}
.g-bd4 p{
padding:5px;background-color: orange;
height:140px;
}
</style>
原理依然使用負邊距消除溢出。
三列左側右側定寬,中間自適應
<div class="g-bd5 f-cb">
<div class="g-sd51">
<p>
左側定寬
</p>
</div>
<div class="g-mn5">
<div class="g-mn5c">
<p>
中間自適應
</p>
</div>
</div>
<div class="g-sd52">
<p>
右側定寬
</p>
</div>
</div>
<style>
.g-bd5 {
margin: 45px 0 0 0;
}
.g-sd51,.g-sd52{
position: relative;width:240px;
margin: 0 -240px 0 0;
float: left;
}
.g-sd52{
float: right;
margin:0 0 0 -240px;
}
.g-mn5 {
float: left;
width:100%;
}
.g-mn5c{
margin:0 250px 0 250px;
}
.g-bd5 p{
height:120px;
background-color:pink;
padding:5px;
}
</style>