微信京东底部导航栏的实现 目标1:1:1:1.5:1.5

w没有实现宽度分配为1:1:1:1.5:1.5效果

 

 

 

 

 

 

 

 

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Document</title>
10 </head>
11 <body>
12 <style type="text/css">
13     /*table {*/
14         /*width: 200px;*/
15         /*height: 60px;*/
16     /*}*/
17 
18     table {
19         width: 10em;
20         height: 10em;
21     }
22 
23 
24     table, th, td {
25         border: 1px solid black;
26         border-collapse: collapse;
27     }
28 </style>
29 <table>
30     <tr>
31         <td style="width: 1%"></td>
32         <td style="width: 1%"></td>
33         <td style="width: 1%"></td>
34         <td style="width: 1.5%"></td>
35         <td style="width: 1.5%"></td>
36     </tr>
37 </table>
38 
39 <table>
40     <tr>
41         <td style="width: 10%"></td>
42         <td style="width: 10%"></td>
43         <td style="width: 10%"></td>
44         <td style="width: 15%"></td>
45         <td style="width: 15%"></td>
46     </tr>
47 </table>
48 
49 <table>
50     <tr>
51         <td style="width: 16.6666%"></td>
52         <td style="width: 16.6666%"></td>
53         <td style="width: 16.6666%"></td>
54         <td style="width: 25%"></td>
55         <td style="width: 25%"></td>
56     </tr>
57 </table>
58 
59 
60 </body>
61 </html>

 

 

w行按比例分配宽度。

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Document</title>
10 </head>
11 <body>
12 <style type="text/css">
13     table {
14         width: 6em;
15         height: 6em;
16     }
17 
18     table, th, td {
19         border: 1px solid black;
20         border-collapse: collapse;
21     }
22 </style>
23 <table>
24     <tr>
25         <td style="width: 1%"></td>
26         <td style="width: 1%"></td>
27         <td style="width: 1%"></td>
28         <td style="width: 1.5%"></td>
29         <td style="width: 1.5%"></td>
30     </tr>
31 </table>
32 
33 <table>
34     <tr>
35         <td style="width: 10%"></td>
36         <td style="width: 10%"></td>
37         <td style="width: 10%"></td>
38         <td style="width: 15%"></td>
39         <td style="width: 15%"></td>
40     </tr>
41 </table>
42 
43 </body>
44 </html>

 

posted @ 2017-02-10 11:01  papering  阅读(348)  评论(0)  编辑  收藏  举报