表头固定内容滚动的表格
HTML
CSS
两栏三栏自适应布局
|
|
CSS
纯CC3幻灯手风琴效果
HTML
CSS
纯CSS3点控式幻灯hover切换
HTML
CSS
将代码放进去试试吧!
资源摘自NEC规范 NEC规范
前端布局详细代码库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="m-demo">
<table>
<thead>
<tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th>最后列不定宽d</th></tr>
</thead>
</table>
<div class="scroll">
<table>
<tbody>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
</tbody>
</table>
</div>
</div>
<div class="m-demo">
<table>
<thead>
<tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th>最后列不定宽d</th></tr>
</thead>
</table>
<div class="scroll">
<table>
<tbody>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
</tbody>
</table>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 表头固定内容滚动的表格 */
.m-demo{margin:0 0 20px;line-height:18px;}
.m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;}
.m-demo table{width:100%;table-layout:fixed;}
.m-demo th,.m-demo td{width:100px;padding:10px;border:1px solid #ddd;}
.m-demo th{font-weight:bold;background:#eee;}
.m-demo thead th:last-child,.m-demo tbody td:last-child{width:auto;}
.m-demo tbody tr:nth-child(2n){background:#fafafa;}
.m-demo tbody tr:first-child td{border-top:0;}
.m-demo tbody tr:last-child td{border-bottom:0;}
.m-demo tbody tr td:first-child{border-left:0;}
.m-demo tbody tr td:last-child{border-right:0;}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 两栏三栏自适应布局 */
<style type="text/css">
/* 预览辅助样式 */
.g-bd p{padding:1em;margin:0;background:#dfedf0;}
.g-mnc1 p,.g-mnc2 p,.g-mnc3 p,.g-mnc5 p{background:#ddd;}
.g-bd{margin:0.5em 0;height:50px;}
</style>
/* 两栏布局 主栏左 侧栏右 */
.g-mn1{float:left;width:100%;margin-right:-200px;}
.g-mnc1{margin-right:210px;}
.g-sd1{float:right;width:200px;}
/* 两栏布局 主栏右 侧栏左*/
.g-mn2{float:right;width:100%;margin-left:-200px;}
.g-mnc2{margin-left:210px;}
.g-sd2{float:left;width:200px;}
/* 三栏布局 主栏右 两侧栏左*/
.g-mn3{float:right;width:100%;margin-left:-520px;}
.g-mnc3{margin-left:520px;}
.g-sd3a{float:left;width:300px;margin-right:10px;}
.g-sd3b{float:left;width:200px;}
/* 三栏布局 主栏中 两侧栏分居左右*/
.g-mn4{float:right;width:100%;margin-left:-200px;}
.g-mnc4{margin-left:210px;}
.g-sd4{float:left;width:200px;}
.g-mn5{float:left;width:100%;margin-right:-200px;}
.g-mnc5{margin-right:210px;}
.g-sd5{float:right;width:200px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="m-demo">
<li><a href="#"><img src="http://nec.netease.com/img/m/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/5.jpg" alt=""/></a></li>
</ul>
<ul class="m-demo m-demo-1">
<li><a href="#"><img src="http://nec.netease.com/img/m/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/5.jpg" alt=""/></a></li>
</ul>
1
2
3
4
5
6
7
8
9
li {list-style: none;}
/* 纯CSS3幻灯手风琴效果hover切换，默认初始收起 */
.m-demo{width:600px;height:250px;overflow:hidden;}
.m-demo li{float:left;width:120px;heihgt:100%;box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-transition:width 0.5s ease-out;-moz-transition:width 0.5s ease-out;-ms-transition:width 0.5s ease-out;transition:width 0.5s ease-out;}
.m-demo:hover li:not(:hover){width:50px;}
.m-demo li:hover{width:400px;}
/* 初始展开 */
.m-demo-1 li{width:50px;}
.m-demo-1 li:first-child{width:400px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="m-demo">
<li></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/1.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/2.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/3.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/4.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="http://nec.netease.com/img/m/5.jpg" alt=""/></a></li>
<li></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 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,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
/* 纯CSS3点控式幻灯hover切换 */
.m-demo{position:relative;width:400px;height:250px;overflow:hidden;}
.m-demo li:nth-child(3n-1){position:absolute;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:transform 0.5s ease-out,opacity 0.5s ease-out;-moz-transition:transform 0.5s ease-out,opacity 0.5s ease-out;-ms-transition:transform 0.5s ease-out,opacity 0.5s ease-out;transition:transform 0.5s ease-out,opacity 0.5s ease-out;}
.m-demo:hover li:nth-child(3n-1){opacity:0;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.m-demo li:nth-child(2),.m-demo li:nth-child(3n-1):hover,.m-demo li:nth-child(3n+1):hover + li{z-index:2;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.m-demo li:nth-child(3n+1),.m-demo li:nth-child(3n){position:relative;z-index:5;float:left;width:10px;height:10px;margin:235px 0 0 5px;border-radius:50%;}
.m-demo li:nth-child(3n+1),.m-demo:hover li:nth-child(3n+1){box-shadow:inset 0 1px 1px rgba(0,0,0,0.5);background:rgba(0,0,0,0.2);}
.m-demo li:nth-child(3n){z-index:4;margin-left:-10px;}
.m-demo li:first-child{margin-left:325px;}
.m-demo li:first-child,.m-demo li:nth-child(3n+1):hover,.m-demo li:nth-child(3n-1):hover + li{box-shadow:inset 0 1px 1px rgba(0,0,0,0.5);background:rgba(255,255,0,0.8);}
.m-demo li:nth-child(3n-1):hover + li{z-index:6;}
帅的人已经打赏~！
