常用样式制作思路

超然

发布于 2018-08-03 17:14:44

4500

发布于 2018-08-03 17:14:44

文章被收录于专栏：超然的博客超然的博客

学习常用样式总结参考来自这里

带点文字链接列表利用：before实现

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-09-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

常用样式制作思路

常用样式制作思路

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐