iPhone手機做法
Paste_Image.png
思路
- 先將要做模型分成5塊：
（1）#iphone > #camera + #headphone + #screen + #btn
- 難點1：主要集中在相對坐標(biāo)，這里的做法是，如果不指定父類為相對坐標(biāo)系，則子類會直接以
body為坐標(biāo)系，所以基本的做法都是選好要作為相對坐標(biāo)系的父類，子類中指定絕對坐標(biāo)，然后根據(jù)top和left的位置移動到最終的目標(biāo)位置即可。
- 難點2：圓角矩形的半徑，可以指定任意一邊的半徑大小，靈活使用。
- 難點3：
before和after的使用，一般情況下都是將其指定為display:block。
- 難點4：
box-shadow：1px 2px 3px rgba(0,0,0, 0.5) inset;
- 難點5： 阻止邊界傳導(dǎo)，父元素
overflow：hidden即可。
源碼
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#iphone {
width: 250px;
height: 500px;
background-color: #2e2e2e;
margin: auto;
border: 10px solid #3b3b3b;
border-radius: 50px;
box-shadow: 3px 5px 5px 1px rgba(0,0,0,0.5);
position: relative;
}
#iphone:before {
content: '';
width: 50px;
height: 6px;
background-color: #2e2e2e;
display: block;
position: absolute;
top: -16px;
left: 160px;
border-radius: 3px 3px 0 0;
}
#iphone:after {
content: '';
width: 6px;
height: 50px;
background: #2e2e2e;
display: block;
position: absolute;
top: 60px;
left: -15px;
border-radius: 3px 0px 0px 3px;
}
#camera {
width: 6px;
height: 6px;
border: 3px solid #4a4a4a;
margin: 20px auto;
background-color: #1a1a1a;
border-radius: 50%;
box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}
#headphone {
width: 60px;
height: 5px;
border: 4px solid #4a4a4a;
margin: 13px auto;
background-color: #1a1a1a;
border-radius: 10px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}
#screen {
width: 220px;
height: 360px;
margin: 15px auto 0px;
background-color: #0a0a0a;
border: 4px solid #1a1a1a;
position: relative;
}
#screen span {
display: block;
color: white;
font-size: 30px;
text-align: center;
vertical-align: middle;
position: absolute;
top: 140px;
left: 50px;
}
#btn {
width: 40px;
height: 40px;
background-color: #1a1a1a;
margin: 8px auto 0;
border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset;
overflow: hidden; /*阻止邊界的傳導(dǎo)*/
}
#btn:before {
content: '';
width: 20px;
height: 20px;
border: 2px solid #FFF;
display: block;
margin: 9px auto;
border-radius: 5px;
}
</style>
</head>
<body style="padding:50px;background-color:#ccc">
<div class="container" style="padding:30px;background-color:#fff;">
<div id="iphone">
<div id="camera"></div>
<div id="headphone"></div>
<div id="screen"><span>iPhone6S</span></div>
<div id="btn"></div>
</div>
</div>
</body>
</html>
