zoukankan html css js c++ java

常用样式制作思路

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

带点文字链接列表
利用：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>

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. 简单表格

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: 5b8b4f53;
            font-weight: bold;
            content: '3C';
        }
        a.page-next:after,a.page-down:after{
            margin-left: 3px;
            font-family: 5b8b4f53;
            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 元素即可。它同样很灵活，只需添加少量标记即可包裹你需要展示的任何内容。

如果您认为本文对得起您所阅读所花的时间，欢迎点击右下角↘ 推荐。您的支持是我继续写作最大的动力，谢谢 (●'◡'●)

字节跳动职位长期内推，如有需求可发送简历至 lichaoran.cr@bytedance.com

查看全文

相关阅读:
AutoComplete控件
 META httpequiv 大全
 十四条必知的手机电池充电技巧
 什么是套接字
 理解HTTP session原理及应用
 Adodb.Stream取得图像的高宽
 微软Windows 7测试版下载网上泄露
 Oracle新手學習
 Oracle字符串函数
 Oracle的Window服务启动时并不启动实例

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