请选择 进入手机版 | 继续访问电脑版

送你一部iphoneX

发表于 09-20 19:01 显示全部楼层 18 210

本帖最后由 黄书伟 于 2017-9-20 19:13 编辑

就在上周的今天(2017.9.13),举世瞩目的iphoneX发布了;但是……据说能拿到手要等到11月!

不知道迷人你……money准备好了没?


咳咳…… 那个啥?……谈钱伤感情额……


作为既会设计又会代码的网页UI学院的妹纸帅锅们,这个问题,根本就不是问题!信不信,我分分钟就能送你一部?


QQ截图20170920184305.jpg

正品国行,放心拿去!



你要问我哪来的?来,让我拉着你的手,教你用代码画出你的iphoneX!


1.首先,我们需要新建一个HTML文件(废话),先做一些准备工作:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iphoneX</title>
  <style></style>
</head>
<body>
  <div class="device iphone-x"></div>

</body>
</html>

因为伪元素用的比较多,所以我们简单粗暴,先在style中清理下默认样式和伪元素样式支持:

*{
    padding:0;margin:0;
 }
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}


2.接下来,我们可以先画一个真正屏占比100%的全面屏:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iphoneX</title>
  <style>
 *{
  margin: 0;
  padding: 0;
 }
 
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone-x {
  height: 694px;
  width: 342px;
}

.iphone-x .frame {
  background: #222;
  border-radius: 54px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: 694px;
  padding: 22px;
  width: 342px;
}

.iphone-x .content {
  background-color: #fff;
  background-image: url("../img/bg.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  height: 650px;
  position: relative;
  width: 300px;
}
  
  </style>
</head>
<body>
  <div class="device iphone-x">
  <!-- 万众期待的外部轮廓 -->
    <div class="frame">
        <div class="content"></div>
    </div>
  </div>

</body>
</html>

效果图(虽然边框有点宽,但要是iphoneX真的长这样那也厉害了……):

QQ截图20170920182034.jpg


3.通话是手机最基本的功能,接下来,我们加上天线,说不定就可以打电话了呢!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iphoneX</title>
  <style>
 *{
  margin: 0;
  padding: 0;
 }
 
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone-x {
  height: 694px;
  width: 342px;
}

.iphone-x .frame {
  background: #222;
  border-radius: 54px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: 694px;
  padding: 22px;
  width: 342px;
}

.iphone-x .content {
  background-color: #fff;
  background-image: url("../img/bg.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  height: 650px;
  position: relative;
  width: 300px;
}
.iphone-x .stripe::after,
.iphone-x .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone-x .stripe::after {
  top: 68px;
}

.iphone-x .stripe::before {
  bottom: 68px;
}
  
  </style>
</head>
<body>
  <div class="device iphone-x">
     <!-- 万众期待的外部轮廓 -->
    <div class="frame">
        <div class="content"></div>
    </div>
    
    <!-- 低调奢华的天线 -->
    <div class="stripe"></div>
    
  </div>

</body>
</html>

效果预览:

QQ截图20170920183213.jpg


4.接下来是迷人性感的刘海:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iphoneX</title>
  <style>
 *{
  margin: 0;
  padding: 0;
 }
 
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone-x {
  height: 694px;
  width: 342px;
}

.iphone-x .frame {
  background: #222;
  border-radius: 54px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: 694px;
  padding: 22px;
  width: 342px;
}

.iphone-x .content {
  background-color: #fff;
  background-image: url("../img/bg.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  height: 650px;
  position: relative;
  width: 300px;
}
.iphone-x .stripe::after,
.iphone-x .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone-x .stripe::after {
  top: 68px;
}

.iphone-x .stripe::before {
  bottom: 68px;
}
.iphone-x .header {
  background: #222;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  height: 24px;
  left: 50%;
  margin-left: -82px;
  position: absolute;
  top: 22px;
  width: 164px;
  z-index: 199;
}

.iphone-x .header::after,
.iphone-x .header::before {
  content: "";
  height: 6px;
  position: absolute;
  top: 0;
  width: 6px;
}

.iphone-x .header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
  left: -6px;
}

.iphone-x .header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
  right: -6px;
}

.iphone-x .sensors::after,
.iphone-x .sensors::before {
  content: "";
  position: absolute;
}

.iphone-x .sensors::after {
  background: #444;
  border-radius: 2.5px;
  height: 5px;
  left: 50%;
  margin-left: -20px;
  top: 4px;
  width: 40px;
}

.iphone-x .sensors::before {
  background: #444;
  border-radius: 50%;
  height: 11px;
  left: 50%;
  margin-left: 30px;
  top: 1px;
  width: 11px;
}
  </style>
</head>
<body>
  <div class="device iphone-x">
     <!-- 万众期待的外部轮廓 -->
    <div class="frame">
        <div class="content"></div>
    </div>
    
    <!-- 低调奢华的天线 -->
    <div class="stripe"></div>
    
    <!-- 迷人性感的刘海 -->
    <div class="header">
      <div class="sensors"></div>
    </div>    
  </div>

</body>
</html>

效果图(看看,这个刘海怎么样?刘海两边的细节也做上去了哦)

QQ截图20170920183834.jpg


5.最后一步就是我们的静音,音量+-,再加上一个开机键,就可以愉快地使用了哦:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iphoneX</title>
  <style>
 *{
  margin: 0;
  padding: 0;
 }
 
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone-x {
  height: 694px;
  width: 342px;
}

.iphone-x .frame {
  background: #222;
  border-radius: 54px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: 694px;
  padding: 22px;
  width: 342px;
}

.iphone-x .content {
  background-color: #fff;
  background-image: url("../img/bg.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  height: 650px;
  position: relative;
  width: 300px;
}
.iphone-x .stripe::after,
.iphone-x .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone-x .stripe::after {
  top: 68px;
}

.iphone-x .stripe::before {
  bottom: 68px;
}
.iphone-x .header {
  background: #222;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  height: 24px;
  left: 50%;
  margin-left: -82px;
  position: absolute;
  top: 22px;
  width: 164px;
  z-index: 199;
}

.iphone-x .header::after,
.iphone-x .header::before {
  content: "";
  height: 6px;
  position: absolute;
  top: 0;
  width: 6px;
}

.iphone-x .header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
  left: -6px;
}

.iphone-x .header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
  right: -6px;
}

.iphone-x .sensors::after,
.iphone-x .sensors::before {
  content: "";
  position: absolute;
}

.iphone-x .sensors::after {
  background: #444;
  border-radius: 2.5px;
  height: 5px;
  left: 50%;
  margin-left: -20px;
  top: 4px;
  width: 40px;
}

.iphone-x .sensors::before {
  background: #444;
  border-radius: 50%;
  height: 11px;
  left: 50%;
  margin-left: 30px;
  top: 1px;
  width: 11px;
}
.iphone-x .btns {
  background: #606467;
  height: 26px;
  left: -2px;
  position: absolute;
  top: 92px;
  width: 3px;
}

.iphone-x .btns::after,
.iphone-x .btns::before {
  background: #606467;
  content: "";
  height: 50px;
  left: 0;
  position: absolute;
  width: 3px;
}

.iphone-x .btns::after {
  top: 48px;
}

.iphone-x .btns::before {
  top: 112px;
}

.iphone-x .power {
  background: #606467;
  height: 80px;
  position: absolute;
  right: -2px;
  top: 160px;
  width: 3px;
}
  </style>
</head>
<body>
  <div class="device iphone-x">
     <!-- 万众期待的外部轮廓 -->
    <div class="frame">
        <div class="content"></div>
    </div>
    
    <!-- 低调奢华的天线 -->
    <div class="stripe"></div>
    
    <!-- 迷人性感的刘海 -->
    <div class="header">
      <div class="sensors"></div>
    </div>
    
     <!-- 最后的按键 -->
    <div class="btns"></div>
    <div class="power"></div>        
  </div>
  

</body>
</html>

效果图(大功告成有木有?快夸我快夸我):

QQ截图20170920184305.jpg


刚刚下生产线的崭新iphoneX,送给你!

 



伸手党们,做点小任务,才能看到附件中的源码和素材哦!


咳咳,小码哥网页UI学院上海校区快要开班了,学费所有校区中最低的,赶快到碗里来哦……


附件解锁方式:请回帖:520小码哥网页UI学院上海!


游客,如果您要查看本帖隐藏内容请回复

回复 使用道具
举报
braqo029

发表于 11-24 14:19 显示全部楼层

KA72体积全球最小智能监控摄像机,小巧机身和1圆硬币差不多,麻雀虽小五脏俱全,KA72主控芯片采用美国进口安霸芯片,有史以来,最强大,最智能的芯片,保证连续录像录音不发热不死机,1600万像素单反级别完全媲美iPhone8摄像头,8核芯让运行更流畅更稳定,摄像镜头采用进口OV9715图像感光蓝镜芯片,170度宽广角上下左右全覆盖,KA72更是不惜成本打造全新技术HDR+WDR软硬合一,不论是在强光、弱光、晴天、雨天、阴天等不同环境都能自动校检所摄取画面清晰可见。强劲的18颗进口纳米夜视灯不爆红不发红,保证在漆黑一片无任何光线可视范围高达100米!录像录音不闪灯不亮灯、晚上夜视不发红,更隐蔽更神奇,防偷防婚外最佳设备!强磁机身随意吸贴,无需任何安装,更隐蔽更便捷的智能监控让您随心所欲! 选择KA72的理由:可吸附在衣服、包包、椅子、床下、衣柜、窗帘、洗手间、电视、门框、天花板、电灯、汽车等等,安装位置只有您想不到,没有KA72做不到。内置大容量电池,充满可用72小时,可连接充电宝、电源边充电录;KA72更是内置特有Turbo一键穿墙WIFI模块,WIFI发射更远更强更稳定,无需网络、无需网线、无需流量、无需布线,苹果手机、安卓手机、手机无需联网想看就看,智能监控就该这么简单,您想要的画面它都有! 在花样年华的世界上,你对她的信任不一定能换来她的真诚,爱人出轨、女友背叛、保姆虐童、员工偷懒、仓库失窃、店铺被抢、入室偷盗...还原真相,KA72您值得拥有!出差在外,家里发生了什么,您想要的画面,手机想看就看!远程监控不受距离限制,例如KA72在中国,人在美国,拿出手机就可以实时看、回放、下载、删除,隐私的画面,想下载就下载,想删就删,监控就该这样智能。 KA72参数:1600万像素、170度大广角、18颗进口夜视不发红光、HDR+WDR+WiFi功能、8核心处理器、全新HEVC编码技术。我们追求高质量,我们不打价格战,我们只拼高品质! QQ:851138899 热线:13530047234 官网:www.25xc.net ka72官网
回复 支持 反对 使用道具
举报
红色石头

发表于 11-02 17:41 显示全部楼层

厉害了

回复 支持 反对 使用道具
举报
踮脚怪

发表于 10-24 18:40 显示全部楼层

回复 支持 反对 使用道具
举报
nettman

发表于 10-24 18:25 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
做个有钱银

发表于 10-24 11:37 显示全部楼层

回复 支持 反对 使用道具
举报
益达月饼

发表于 10-19 08:42 显示全部楼层

回复 支持 反对 使用道具
举报
yy123go

发表于 10-04 14:57 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
山秀

发表于 09-30 18:28 显示全部楼层

回复 支持 反对 使用道具
举报
shaohua

发表于 09-26 21:45 显示全部楼层

520小码哥网页UI学院上海!
回复 支持 反对 使用道具
举报
12下一页

发表新文章
黄书伟

小码哥名师团队

0

学分

871

学币

1119

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1119

小码哥一周年勋章前100注册用户勋章签到周冠军勋章真土豪勋章勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育