我的手机是诺基亚920，13年4月份买的。工作之余，就想用css做一下WP8的界面效果，如上图所示。不做不知道，一做还挺难的。尤其是画那个QQ 的企鹅图标，太难画了。怎么画都不像。

 

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <style type="text/css">
  6     ul,li{
  7         list-style: none;
  8         margin:0;
  9         padding:0;
 10     }
 11     .clearfix:after{height: 0;content: '.';display: block;visibility: hidden;clear: both;}
 12     .holder{background-color: #000; border-color: #bfbfbf; width: 702px; height: 1260px; margin:0 auto; padding:10px 38px; }
 13     .headIcon{margin:0; padding:0; }
 14     .headIcon .left{float: left; }
 15     .left .icon{float: left; width: 60px; height: 36px; overflow: hidden; position: relative; }
 16     .left .icon .signal{position: absolute; background-color: #bfbfbf; bottom: 0; width: 8px; height: 7px; }
 17     .left .icon .s1{left: 0; width: 8px; height: 7px; }
 18     .left .icon .s2{left: 11px; height: 14px; }
 19     .left .icon .s3{left: 22px; height: 21px; }
 20     .left .icon .s4{left: 33px; height: 28px; }
 21     .left .icon .s5{left: 44px; height: 35px; background-color: #3a3a3a; }
 22     .left .icon .l1{border-top: 2px #bfbfbf solid; height: 0; width: 8px; position: absolute; top:2px; left: 2px; }
 23     .left .icon .l2{border-top: 2px #bfbfbf solid; height: 0; width: 14px; position: absolute; top:2px; left: 2px; -webkit-transform:rotate(45deg); -webkit-transform-origin:top left; -o-transform:rotate(45deg); -o-transform-origin:top left; -ms-transform:rotate(45deg); -ms-transform-origin:top left; -moz-transform:rotate(45deg); -moz-transform-origin:top left; transform:rotate(45deg); transform-origin:top left; }
 24     .left .icon .l3{border-top: 2px #bfbfbf solid; height: 0; width: 8px; position: absolute; top:2px; left: 2px; -webkit-transform:rotate(90deg); -webkit-transform-origin:top left; -o-transform:rotate(90deg); -o-transform-origin:top left; -ms-transform:rotate(90deg); -ms-transform-origin:top left; -moz-transform:rotate(90deg); -moz-transform-origin:top left; transform:rotate(90deg); transform-origin:top left; }
 25     .left .icon .r1{position: absolute; bottom: 0; right: 0; width: 0; height:0; border: 4px solid #bfbfbf; border-radius:3px; }
 26     .left .icon .r2{position: absolute; bottom: -8px; right: -8px; width: 16px; height:16px; border: 4px solid #bfbfbf; border-radius:16px; }
 27     .left .icon .r3{position: absolute; bottom: -16px; right: -16px; width: 32px; height:32px; border: 4px solid #bfbfbf; border-radius:32px; }
 28     .left .icon .r4{position: absolute; bottom: -24px; right: -24px; width: 48px; height:48px; border: 4px solid #bfbfbf; border-radius:48px; } 
 29     .left .icon .msg{border-radius: 3px; margin: 6px 0 0 8px; border:3px solid #bfbfbf; width: 36px; border-left-width: 5px; border-right-width: 5px; height: 26px; } 
 30     .left .icon .msg .bdiv{border:3px solid #bfbfbf; border-left: none; border-right-width: 10px; margin-top:6px; height: 6px; -webkit-box-shadow:0 1px 1px 1px #8e8e8e; -moz-box-shadow:0 1px 1px 1px #8e8e8e; -ms-box-shadow:0 1px 1px 1px #8e8e8e; -o-box-shadow:0 1px 1px 1px #8e8e8e; box-shadow:0 1px 1px 1px #8e8e8e; }
 31     .left .icon .msg .brdiv{border-right:6px solid #bfbfbf; box-shadow:0 1px 1px 1px #8e8e8e; height: 8px; }
 32     .headIcon .right{float: right;}
 33     .right .icon{float:left; position: relative; width: 80px; height: 36px; overflow: hidden;}
 34     .right .battery_body{width: 40px; height: 20px; border:3px solid #bfbfbf;margin:8px 0; float: left; overflow: hidden;}
 35     .right .battery_qu{width: 24px; height: 12px; background-color: #bfbfbf;margin:4px;}
 36     .right .battery_head{margin:16px 0 14px 4px; width: 4px; height: 8px;background-color: #bfbfbf; float: left;}
 37     .right .text{text-align: right; color: #bfbfbf; font-size: 32px; line-height: 40px;}
 38     
 39     .box{
 40         margin-top: 48px;
 41     }
 42     .box li{ position: relative;width: 160px; height: 160px; margin:0 20px 20px 0; background-color: #1ba1e2; float: left; text-align: center; }
 43     .calendar{}
 44     .weixin .face{position: absolute;background-color: #fff;border-radius: 26px / 22px;}
 45     .weixin .face1{top:50px;left: 44px;width: 52px;height: 44px;}
 46     .weixin .face .eyebig{position: absolute; background-color: #1ba1e2;width: 6px;height: 6px;border-radius: 3px;}
 47     .weixin .face .eyesmall{position: absolute; background-color: #1ba1e2;width: 5px;height: 5px;border-radius: 2.5px;}
 48     .weixin .face .lefteye{ left: 13px; top:12px; }
 49     .weixin .face .righteye{ left: 30px; top:12px; }
 50     .weixin .face2{top:70px; left: 70px; border:2px solid #1ba1e2;width: 44px;height: 36px;}
 51     .weixin .face1 .angle{position: absolute; top:38px;left:8px;width:0;height: 0;border-top:10px solid #fff;border-left: 3px solid transparent;border-right: 3px solid transparent;-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-ms-transform:rotate(36deg);-o-transform:rotate(36deg);transform:rotate(36deg);}
 52     .weixin .face2 .angle{position: absolute; top:32px;left:30px;width:0;height: 0;border-top:8px solid #fff;border-left: 3px solid transparent;border-right: 3px solid transparent;-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-ms-transform:rotate(320deg);-o-transform:rotate(320deg);transform:rotate(320deg);}
 53 
 54     .qq .head{position: absolute; top:44px; left: 52px; width: 40px;height: 20px; border-top-left-radius: 40px; border-top-right-radius:40px;border:8px solid #fff; border-bottom: none;}
 55     .qq .armdiv{position: absolute;top:72px;left: 0;overflow: hidden;height: 20px; width: 160px;}
 56     .qq .armdiv .armline{position: absolute;top:-12px;left: 44px;width: 60px;height: 62px;border:6px solid #fff;border-radius: 34px;}
 57     .qq .hand{position: absolute;height: 8px;width: 12px;border:none;top:12px;background-color: #fff;}
 58     .qq .handline1{ left: 48px; transform:rotate(-20deg);}
 59     .qq .handline2{ left: 100px;transform:rotate(200deg);}
 60     .qq .footdiv{position: absolute;top:92px;left: 0;height: 16px;width: 100%;overflow: hidden;}
 61     .qq .footdiv .foot{position: absolute;top:-24px;border-radius: 24px;width: 24px; height: 24px; border:8px solid #fff;}
 62     .qq .footdiv .foot1{left: 44px;}
 63     .qq .footdiv .foot2{left: 75px;}
 64 
 65     .call .phone{position: absolute; top:70px; left: 50px; width: 36px;height: 12px;border:16px solid #fff;border-top-width: 12px; border-bottom: none;border-top-left-radius: 22px;border-top-right-radius: 22px;-webkit-transform:rotate(-120deg);-moz-transform:rotate(-120deg);-ms-transform:rotate(-120deg);-o-transform:rotate(-120deg);transform:rotate(-120deg);}
 66 
 67     .set .screw{position: absolute;top:58px;left: 58px;width: 32px;height: 32px;border:8px solid #fff;border-radius: 32px;-webkit-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-ms-transform:rotate(-8deg);-o-transform:rotate(-8deg);transform:rotate(-8deg);}
 68     .set .screw .heart{position: absolute;top:10px;left: 10px;width: 0;height: 0;border-radius:6px;border:6px solid #fff; }
 69     .set .screw .line{position: absolute;background-color: #fff;border:none;width: 8px;height: 12px;}
 70     .set .screw .line1{top:12px;left: 38px;}
 71     .set .screw .line2{top:30px;left: 30px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
 72     .set .screw .line3{top:36px;left: 12px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
 73     .set .screw .line4{top:30px;left: -6px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
 74     .set .screw .line5{top:12px;left: -15px;}
 75     .set .screw .line6{top:-8px;left: -8px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
 76     .set .screw .line7{top:-16px;left: 12px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
 77     .set .screw .line8{top:-8px;left: 32px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
 78 
 79     </style>
 80 </head>
 81 <body>
 82     <div class="holder">
 83         <section class="headIcon clearfix">
 84             <ul class="left">
 85                 <li class="icon">
 86                     <div class="signal s1"></div>
 87                     <div class="signal s2"></div>
 88                     <div class="signal s3"></div>
 89                     <div class="signal s4"></div>
 90                     <div class="signal s5"></div>
 91                 </li>
 92                 <li class="icon">
 93                     <div class="l1"></div>
 94                     <div class="l2"></div>
 95                     <div class="l3"></div>
 96                     <div class="r1"></div>
 97                     <div class="r2"></div>
 98                     <div class="r3"></div>
 99                     <div class="r4"></div>
100                 </li>
101                 <li class="icon">
102                     <div class="msg">
103                         <div class="bdiv"></div>
104                         <div class="brdiv"></div>
105                     </div>
106                 </li>
107             </ul>
108             <ul class="right">
109                 <li class="icon">
110                     <div class="battery_body">
111                         <div class="battery_qu"></div>
112                     </div>
113                     <div class="battery_head"></div>
114                 </li>
115                 <li class="icon text">13:26</li>
116             </ul>
117         </section>
118         <section class="box clearfix">
119             <ul class="clearfix">
120                 <li class="set">
121                     <div class="screw">
122                         <div class="heart"></div>
123                         <div class="line line1"></div>
124                         <div class="line line2"></div>
125                         <div class="line line3"></div>
126                         <div class="line line4"></div>
127                         <div class="line line5"></div>
128                         <div class="line line6"></div>
129                         <div class="line line7"></div>
130                         <div class="line line8"></div>
131                     </div>
132                 </li>
133                 <li>
134                     <div class="call">
135                         <div class="phone"></div>
136                     </div>
137                 </li>
138                 <li class="weixin">
139                     <div class="face face1">
140                         <div class="eyebig lefteye"></div>
141                         <div class="eyebig righteye"></div>
142                         <div class="angle"></div>
143                     </div>
144                     <div class="face face2">
145                         <div class="eyesmall lefteye"></div>
146                         <div class="eyesmall righteye"></div>
147                         <div class="angle"></div>
148                     </div>
149                 </li>
150                 <li class="qq" style="margin-right:0">
151                     <div class="head"></div>
152                     <div class="armdiv">
153                         <div class="armline"></div>
154                         <div class="hand handline1"></div>
155                         <div class="hand handline2"></div>
156                     </div>
157                     <div class="footdiv">
158                         <div class="foot foot1"></div>
159                         <div class="foot foot2"></div>
160                     </div>
161                 </li>
162                 <li></li>
163                 <li></li>
164                 <li></li>
165                 <li style="margin-right:0"></li>
166                 <li></li>
167                 <li></li>
168                 <li></li>
169                 <li style="margin-right:0"></li>
170                 <li></li>
171                 <li></li>
172                 <li></li>
173                 <li style="margin-right:0"></li>
174                 <li></li>
175                 <li></li>
176                 <li></li>
177                 <li style="margin-right:0"></li>
178                 <li></li>
179                 <li></li>
180                 <li></li>
181                 <li style="margin-right:0"></li>
182             </ul>
183         </section>
184     </div>
185 </body>
186 </html>

未完待续。