常见样式模块

时间：2015-09-04 16:52:18 阅读：270 评论：0 收藏：0 [点我收藏+]

标签：

带点文字链接列表

 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>

View Code

左图右文列表

技术分享

三个嵌套：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>

View Code

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>

tab.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>

easyform

5. 简单表格

当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>

page.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>

layer.html

8. 缩略图

组成缩略图的标记很简单—ul包裹任意数量的li 元素即可。它同样很灵活，只需添加少量标记即可包裹你需要展示的任何内容。

常见样式模块

标签：

原文地址：http://www.cnblogs.com/chaoran/p/4781794.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行