经常看到有些网站显示着手机外形, 在里面展示内容, 以前一直以为是用手机的图片做的, 现在找到一种用css来制作安卓android手机外形的方法, 分享给大家.工具/原料more网页浏览器(推荐chrome)文本编辑器(推荐sublime text)方法/步骤1/5分步阅读

新建android.html文件, 添加基本的html5标签

!DOCTYPE html

html

head

meta charset=UTF-8

title/title

style

/style

/head

body

/body

/html

2/5

在body标签中添加如下标签

div class=device-android

div class=device-inner/div

/div

3/5

在style标签中添加如下样式

.device-android {

width: 360px;

height: 640px;

position: relative;

background: #111;

padding: 60px 20px;

box-shadow: 0px 0px 0px 2px #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/5

在chrome浏览器中打开页面, 查看效果

5/5

android.html完整的代码

ANDROIDCSS手机安卓