经常看到有些网站显示着手机外形,在里面展示内容,以前一直以为是用手机的图片做的,现在找到一种用css来制作安卓android手机外形的方法,分享给大家.
工具/原料
网页浏览器(推荐chrome)
文本编辑器(推荐sublimetext)
方法/步骤
1、新建android.html文件,咯悝滩镞添加基本的html5标签<!DOCTYPEhtml><html><head><罪焐芡拂metacharset="UTF-8"><title></title><style></style></head><body></body></html>
2、在body标签中添加如下标签<divclass="device-android"><divclass="device-inner"></div></div>
3、在style标签中添加如下样式.device-android{width:3瀵鸦铙邮60px;height:鲂番黟谊640px;position:relative;background:#111;padding:60px20px;box-shadow:0px0px0px2px#aaa;border-radius:20px;}.device-android:before{content:'';width:14px;height:14px;border-radius:50%;position:absolute;left:50%;margin-left:-7px;background:#666;top:25px;}.device-android:after{content:'';width:8px;height:8px;border-radius:50%;position:absolute;left:50px;background:#444;top:30px;}.device-inner{background-color:#FFF;height:100%;}
4、在chrome浏览器中打开页面,查看效果
5、android.html完整的代码
