css3(3)
2016-08-28 本文已影响5人
OldSix1987
iPhone手机做法
Paste_Image.png
思路
- 先将要做模型分成5块：
（1）#iphone > #camera + #headphone + #screen + #btn
- 难点1：主要集中在相对坐标，这里的做法是，如果不指定父类为相对坐标系，则子类会直接以
body为坐标系，所以基本的做法都是选好要作为相对坐标系的父类，子类中指定绝对坐标，然后根据top和left的位置移动到最终的目标位置即可。
- 难点2：圆角矩形的半径，可以指定任意一边的半径大小，灵活使用。
- 难点3：
before和after的使用，一般情况下都是将其指定为display:block。
- 难点4：
box-shadow：1px 2px 3px rgba(0,0,0, 0.5) inset;
- 难点5： 阻止边界传导，父元素
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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//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; /*阻止边界的传导*/
}
#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>
