常见样式模块 / 憋错料

带点文字链接列表

 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>

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 元素即可。它同样很灵活，只需添加少量标记即可包裹你需要展示的任何内容。

时间： 2024-08-12 11:33:23

常见样式模块

常见样式模块的相关文章

Android Notification常见样式总结

蓝鸥零基础学习HTML5第六讲 CSS的常见样式

常见样式问题七、word-break、word-wrap、white-space区别

CSS总结最后的选择符和字体、元素常见样式

常见样式知识点

常见的模块时间模块

webpack 样式模块打包深入学习

python几种常见的模块安装方法

Nginx中常见的模块及其作用