用纯CSS画一个iphone手机

抱歉呀,图片找不到啦。。。

在简单学习了HTML和CSS之后,尝试实现一个iPhone手机的UI界面。

首先,捋一下相关知识点。

HTML(Hyper Text Markup Language)超文本编辑语言是构成网页的基础,也就是一个网页的骨架,用各式各样的标签(Tag)构成。

CSS(Cascading Style Sheet)层叠样式表单可以控制网页的页面显示样式,也就是通过搭配给骨架赋予美丽的外表。

下面是相关代码:

<!--html代码部分-->
<html>
<div class="phone">
  <div class="speaker"></div>
  <div class="screen"></div>
  <div class="home"></div>
</div>
</html>
<!--css代码部分-->
<style type="text/css">
  html{
  background:black;
}
.phone{
  border:1px solid #ccc;/*solid表示实线,#ccc是灰色*/
  width:240px;
  height:480px;
  border-radius:24px;/*添加圆角边框*/
}
.speaker{
  border:1px solid #666;
  width:40px;
  height:4px;
  margin:10px auto;/*添加外边距,居中显示*/
  border-radius:4px;
  background:#333;
}
.screen{
  border:1px solid #333;
  width:90%;
  height:85%;
  margin:0 auto;
  background:#111;
}
.home{
  border:2px solid #333;
  width:35px;
  height:35px;
  margin:2px auto;
  border-radius:35px;/*此处的宽高和圆角半径一致*/
}
</style>

这样一个iPhone的基本样式就完成啦,快来点击上方“预览” 按钮 欣赏一下吧。。。

标签

发表评论