学习常用样式总结参考来自这里
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>图文列表</title>
6 <style type="text/css">
7 li{list-style-type: none;display:inline;float:left;width:100%; overflow:hidden;}
8 .u-img img{width:100px; height:100px;float:left;cursor: pointer;}
9 .u-txt{width:100%; height:100px; float:left; margin-left: -100px;}
10 .u-txt h3,.u-txt p{margin-left: 110px;}
11 .m-list1 li{width:400px; margin-top:30px;}
12 </style>
13 </head>
14 <body>
15 <div>
16 <ul class="m-list0">
17 <li>
18 <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div>
19 <div class="u-txt">
20 <h3>标题</h3>
21 <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
22 </div>
23 </li>
24 </ul>
25 <ul class="m-list1">
26 <li>
27 <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div>
28 <div class="u-txt">
29 <h3>标题</h3>
30 <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
31 </div>
32 </li>
33 <li>
34 <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div>
35 <div class="u-txt">
36 <h3>标题</h3>
37 <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
38 </div>
39 </li>
40 <li>
41 <div class="u-img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div>
42 <div class="u-txt">
43 <h3>标题</h3>
44 <p>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</p>
45 </div>
46 </li>
47 </ul>
48 </div>
49 </body>
50 </html>
与一侧固定一侧自适应原理相似
三个嵌套:li>div1(img),div2(h3,p)
div1宽度为100%,利用magin-left:负值
h3,div2两个magin-left为正
原理同布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>列表导航</title>
6 <style type="text/css">
7 a {
8 text-decoration:none;
9 font-family: Arial;
10 font-size: 16px;
11 color: black;
12 }
13 ul,li{list-style-type: none;}
14 .m-list1 li:before{
15 display:inline-block;
16 border:2px solid;
17 content: '';
18 margin:0 8px 2px 10px;
19 vertical-align: middle;
20 }
21 .m-list2 li:before{
22 border-radius: 50%;
23 }
24 </style>
25 </head>
26 <body>
27 <nav>
28 <ul class="m-list1">
29 <li><a href="#">主菜单导航项</a></li>
30 <li><a href="#">导航项</a></li>
31 <li><a href="#">导航项</a></li>
32 <li><a href="#">导航项</a></li>
33 </ul>
34 <ul class="m-list1 m-list2">
35 <li><a href="#">主菜单导航项</a></li>
36 <li><a href="#">导航项</a></li>
37 <li><a href="#">导航项</a></li>
38 <li><a href="#">导航项</a></li>
39 </ul>
40 </nav>
41 </body>
42 </html>
3. 含标题和Tab的头部导航
h2左浮,more右浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab</title>
<style type="text/css">
body{margin:20px;}
li{display:inline; list-style-type:none; float:left; margin:0 1px 0 0; padding:5px 8px; border:1px solid #ccc; border-bottom:0; border-radius:4px 4px 0 0;}
h3,.m-more{display:inline; float:left; font-size:16px; line-height: 30px;}
a {text-decoration:none; font-family: Arial; font-size: 14px; color:#666;}
.m-hd{display:block; width:100%;height:45px; padding-top:5px; border-bottom:1px solid #ccc; background-color: #f7f7f7; border-radius:8px 8px 0 0;}
.m-more{float:right;}
</style>
</head>
<body>
<header class="m-hd">
<h3>标题</h3>
<ul>
<li><a href="#">列表项一</a></li>
<li><a href="#">列表项二</a></li>
<li><a href="#">列表项三</a></li>
<li><a href="#">列表项四</a></li>
</ul>
<div class="m-more"><a href="#">More</a></div>
</header>
</body>
</html>
4. 简易表单
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>简易数据表格</title>
5 <meta charset="utf-8">
6 <style type="text/css">
7 body{
8 margin: 20px;
9 font-family: Arial;
10 font-size: 12px;
11 }
12 .m-tb{
13 width: 100%;
14 text-align: left;
15 border-collapse: separate;
16 color: #333;
17 table-layout: fixed;
18 }
19 .m-tb th,.m-tb td{
20 height: 1.5;
21 border: 1px solid #ddd;
22 border-width: 1px 0 0 1px;
23 padding: 10px;
24 }
25 .tb-f1{width: 100px;}
26 .tb-f2{width: 200px;}
27 .m-tb tbody tr:nth-child(2n){
28 background-color: #fafafa;
29 }
30 .m-tb tbody tr:hover{
31 background-color:#f0f0f0;
32 }
33 .m-tb tr th:last-child{
34 border-width: 1px 1px 0 1px;
35 }
36 .m-tb td:last-child{
37 border-width: 1px 1px 0px 1px;
38 }
39 .m-tb tbody > tr:last-child td{
40 border-width: 1px 0 1px 1px;
41 }
42 .m-tb tbody > :last-child > :last-child{
43 border-width: 1px 1px 1px 1px;
44 }
45 .m-tb > :first-child > :first-child > :first-child{
46 border-top-left-radius: 5px;
47 }
48 .m-tb > :first-child > :first-child > :last-child{
49 border-top-right-radius: 5px;
50 }
51 .m-tb > :last-child > :last-child > :first-child{
52 border-bottom-left-radius: 5px;
53 }
54 .m-tb > :last-child > :last-child > :last-child{
55 border-bottom-right-radius: 5px;
56 }
57 </style>
58 </head>
59 <body>
60 <table class="m-tb">
61 <thead>
62 <tr>
63 <th class="tb-f1">标题</th>
64 <th>标题</th>
65 <th class="tb-f1">标题</th>
66 <th class="tb-f1">标题</th>
67 <th class="tb-f2">标题</th>
68 </tr>
69 </thead>
70 <tbody>
71 <tr>
72 <td class="tb-f1">内容</td>
73 <td>内容内容内容内容内容内容内容</td>
74 <td class="tb-f1">内容内容</td>
75 <td class="tb-f1">内容内容</td>
76 <td class="tb-f2">内容内容内容</td>
77 </tr>
78 <tr>
79 <td class="tb-f1">内容</td>
80 <td>内容内容内容内容内容内容内容</td>
81 <td class="tb-f1">内容内容</td>
82 <td class="tb-f1">内容内容</td>
83 <td class="tb-f2">内容内容内容</td>
84 </tr>
85 <tr>
86 <td class="tb-f1">内容</td>
87 <td>内容内容内容内容内容内容内容</td>
88 <td class="tb-f1">内容内容</td>
89 <td class="tb-f1">内容内容</td>
90 <td class="tb-f2">内容内容内容</td>
91 </tr>
92 <tr>
93 <td class="tb-f1">内容</td>
94 <td>内容内容内容内容内容内容内容</td>
95 <td class="tb-f1">内容内容</td>
96 <td class="tb-f1">内容内容</td>
97 <td class="tb-f2">内容内容内容</td>
98 </tr>
99 <tr>
100 <td class="tb-f1">内容</td>
101 <td>内容内容内容内容内容内容内容</td>
102 <td class="tb-f1">内容内容</td>
103 <td class="tb-f1">内容内容</td>
104 <td class="tb-f2">内容内容内容</td>
105 </tr>
106 </tbody>
107 </table>
108 </body>
109 </html>
5. 简单表格
table设置固定宽度,table-layout 为fixed——由单元格的宽度决定表格的宽度,不受内容的影响 单元格设置固定宽度,剩下的单元格实现自适应
当border-collapse是collapse时border-radius不起作用,定义为separate通过border-width分别定义边框
通过孩子选择器控制表单的圆角
6. 简易翻页器
以超链接定义翻页按钮,设置其display为inline-block
通过:before与:after插入前后翻页的箭头
<!DOCTYPE html>
<html>
<head>
<title>简易翻页器</title>
<meta charset="utf-8">
<style type="text/css">
nav{
margin: 20px;
line-height: 32px;
text-align: center;
font-family: Arial;
font-size: 12px;
}
a,a:hover{
display: inline-block;
border:1px solid #ddd;
margin-left: -4px;
padding: 0 12px;
text-decoration: none;
vertical-align: top;
color: #39c;
}
a:hover{
background-color: #f5f5f5;
}
a.page-before:before,a.page-up:before{
margin-right: 3px;
font-family: \5b8b\4f53;
font-weight: bold;
content: '\3C';
}
a.page-next:after,a.page-down:after{
margin-left: 3px;
font-family: \5b8b\4f53;
font-weight: bold;
content: '\3E';
}
a:first-child{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
a:last-child{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<nav>
<a class="page-before" href="#"></a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">...</a>
<a href="#">10</a>
<a class="page-next" href="#"></a>
</nav>
<nav>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">...</a>
<a href="#">10</a>
</nav>
<nav>
<a class="page-up" href="#">上一页</a>
<a class="page-down" href="#">下一页</a>
</nav>
</body>
</html>
7. 弹出浮层
居中方式:
① 使用table布局,将浮层定义到td中
② 在js中获取屏幕的宽高通过计算得到
③ 绝对定位,top,left分别等于50%,使用magin-left,margin-top 的负值定位
<!DOCTYPE html>
<html>
<head>
<title>弹出浮层</title>
<meta charset="utf-8">
<style type="text/css">
.m-layer{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
table{
position: absolute;
width: 100%;
height: 100%;
vertical-align: middle;
font-family: 'microsoft yahei';
}
article{
position: relative;
width: 400px;
margin:0 auto;
}
h2,span{
display: inline-block;
}
header{
background-color: #fafafa;
height: 20px;
padding: 10px;
line-height: 20px;
border-bottom: 1px solid #ddd;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
section{
background-color: #fff;
padding: 20px;
font-size: 12px;
}
footer{
height: 30px;
line-height: 30px;
padding: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #fafafa;
font-size: 12px;
color: #999;
}
p{margin: 0;}
section p:last-child{
margin: 5px 0 0 0;
}
.m-layer h2{
float: left;
margin:0;
font-size: 16px;
}
.m-layer span{
display: inline-block;
float: right;
font-size: 24px;
color: #aaa;
}
.ft-other{
float:left;
}
.ft-bt{
float: right;
}
button{
display: inline-block;
font-size: 12px;
padding: 0 12px;
margin-left: 5px;
border-radius: 5px;
cursor: pointer;
}
button:first-child{
background-color: #e7e7e7;
color: #333;
border: 1px solid #d0d0d0;
}
button:last-child{
background-color:linear-gradient(#6dbde4,#399dd8);
border: 1px solid #2d88bf;
color: #fff;
}
</style>
</head>
<body>
<div class="m-layer"><table><tbody><tr><td>
<article>
<header>
<h2>标题</h2>
<span>×</span>
</header>
<section>
<p>默认固定居中,有遮罩,按钮区标题区都可删</p>
<p>内容区:其他模块</p>
</section>
<footer>
<div class="ft-other"><p>其他信息,比如提示</p></div>
<div class="ft-bt">
<button>确定</button>
<button>取消</button>
</div>
</footer>
</article></td></tr></tbody></table>
</div>
</body>
</html>
8. 缩略图
组成缩略图的标记很简单—ul
包裹任意数量的li
元素即可。它同样很灵活,只需添加少量标记即可包裹你需要展示的任何内容。