CSS3学习笔记(4)-CSS3函数

 1 <style><!--
 2 .col-3{
 3         width: calc(100%/3 - 6px);
 4         float: left; 
 5         margin-right: calc(6px*3 /2); 
 6         background: #fff; 
 7         color: #333; 
 8         height: 100px; 
 9         text-align: center; 
10         margin-bottom: calc(6px*3 /2); 
11         font-size: 18px; 
12         line-height: 100px;
13         box-shadow:0 0 10px;
14     }
15     .col-3:nth-child(3){
16         margin-right: 0;
17     }
18     .container{
19         overflow:hidden;
20     }
21     .alexrootdiv{
22         font-family: 微软雅黑; 
23         margin: 0; 
24         padding: 0;
25     }
26     .alexrootdiv>p{
27         font-size: 15px; text-indent: 2em;
28     }
29     .alexrootdiv>div{
30         background: #eeeeee; border: 1px solid #aaa; 
31         width: 99%; padding: 5px; margin: 1em 0 1em 0;
32     }
33     .alexrootdiv>div>p:first-of-type,.alextitlep{
34         font-size: 18px; font-weight: bold; color: red;
35     }
36     .alexrootdiv span{
37         color:blue;font-weight:bold;
38     }
39     .alexrootdiv table{
40         margin-top:10px;border-collapse:collapse;
41         border:1px solid #aaa;width:100%;
42     }
43     .alexrootdiv table th{
44         vertical-align:baseline;padding:5px 15px 5px 6px;
45         background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
46     }
47     .alexrootdiv table td{
48         vertical-align:text-top;padding:6px 15px 6px 6px;
49         background-color:#efefef;border:1px solid #aaa;
50     }
51     .attentationp{
52         font-size: 15px; text-indent: 2em; 
53         background: #ee0; color: red; font-weight: bold;
54     }
55 --></style>
56 <div class="alexrootdiv">
57 <div class="container">
58 <div class="col-3">1</div>
59 <div class="col-3">2</div>
60 <div class="col-3">3</div>
61 <div class="col-3">4</div>
62 </div>
63 </div>