CSS制作华为mate8手机模型效果图

　　1.HTML代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div class="phone">

            <div class="body"></div>

            <div class="head"></div>

            <div class="cinema"></div>

            <div class="button"></div>

            <div class="screen"></div>

            <div class="probutton"></div>

            <div class="brobutton"></div>

        </div>

        <hr>

        <div class="RotateButton"></div>

    </body>

</html>

　　2.CSS代码

*{

    list-style: none;

    text-decoration: none;

    font-family: "微软雅黑 UI";

    font-size: 14px;

    padding: 0;

    margin: 0;

}

body {

    padding: 20px;

    margin: 0 auto;

}

.phone {

    position: relative;

}

.body {

    width: 240px;

    height: 400px;

    background-color: #daa520;

    border-radius: 5%;

}

.screen {

    width: 240px;

    height: 340px;

    background-color: #444;

    position: absolute;

    top: 30px;

    left: 0;

}

.screen:before {

    content: 'HUAWEI';

    font-style: italic;

    position: absolute;

    top: 160px;

    left: 100px;

    color: #FFFFFF;

}

.cinema {

    background-color: #444;

    border-radius: 50%;

    position: absolute;

    top: 10px;

    left: 60px;

    width: 10px;

    height: 10px;

}

.cinema:before {

    content: '';

    background-color: #444;

    border-radius: 50%;

    position: absolute;

    top: 0;

    left: 115px;

    width: 10px;

    height: 10px;

}

.cinema:after {

    content: '';

    background-color: #444;

    border-radius: 15px;

    position: absolute;

    top: 2px;

    left: 28px;

    width: 70px;

    height: 5px;

}

.button {

    border-radius: 0 10px 10px 0;

    width: 3px;

    height: 50px;

    position: absolute;

    top: 40px;

    left: 240px;

    background-color: #DAA520;

}

.button:before {

    content: '';

    border-radius: 0 10px 10px 0;

    width: 3px;

    height: 30px;

    position: absolute;

    top: 60px;

    left: 0;

    background-color: #DAA520;

}

.probutton {

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 2px solid #ffd700;

    position: absolute;

    top: 375px;

    left: 108px;

}

.probutton:before {

    content: '';

    width: 13px;

    height: 13px;

    border-radius: 20%;

    border: 2px solid #FFD700;

    position: absolute;

    top: -2px;

    left: -80px;

}

.probutton:after {

    content: '';

    border-style: solid;

    border-width: 12px;

    border-color: transparent #FFD700 transparent transparent;

    width: 0;

    height: 0;

    position: absolute;

    top: -4px;

    left: 74px;

}

　　备注：伪类before、after配合使用，减少标签使用量。

　　Best wishes to you.

　　LaoYu

　　此文章为程序猿原创，特此声明。转载请注明出处，谢谢！

CSS制作华为mate8手机模型示例的更多相关文章

  1. 华为Mate8手机优化技巧

    我的华为Mate8手机手机存储(手机内存)32G, 运行内存3G,2016年买的手机,两样数值都偏小,导致使用手机的时候经常卡顿,一天来回清理垃圾.清理内存很多次,要运行微信.QQ等占用运行内存较多的 ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 关于华为P9手机的解锁、刷Recovery、获取Root、安装Busybox，以及升级降级的全过程（和一些错误的解决方法）

    我有一部华为P9手机,型号EVA-TL00,属于移动定制机.用了半年多了,想给手机添加一些功能,发现有些功能必须Root之后才能用代码实现,所以动了Root的打算. 一.手机解锁.(不解锁则无法对手机 ...

  6. (完美)华为Mate8 NXT-TL00的USB调试模式在哪里开启的经验

    每当我们使用pc通过数据线连接上安卓手机的时候,如果手机没有开启usb调试模式,pc则没法成功检测到我们的手机,在一些情况下,我们使用的一些功能比较强的的软件如以前我们使用的一个软件引号精灵,老版本就 ...

  7. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  8. 用css制作星级评分

    Step 1: XHTML <ul class="star-rating">       <li><a href="#" titl ...

  9. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

随机推荐

  1. kubernetes reference

    hyperkube在kubernetes pod里面执行kubernetes命令(例如kubectl) https://feisky.gitbooks.io/kubernetes/components ...

  2. IIS6远程代码执行漏洞复现CVE-2017-7269

    简述 CVE-2017-7269是IIS 6.0中存在的一个栈溢出漏洞,在IIS6.0处理PROPFIND指令的时候,由于对url的长度没有进行有效的长度控制和检查,导致执行memcpy对虚拟路径进行 ...

  3. Git 查看更改

    当向仓库中添加文件或删除文件后,可能需要查看更改. 查看更改有多种方式. 1.查看状态 # git status 结果 1 2 # 位于分支 master 无文件要提交,干净的工作区 2.查看日志 # ...

  4. Vue+abp树形表格

    项目中需要用到树形表格,其他同学找了一个ZkTable,我也就跟着用了,不太好用,有更好的记得联系我.先说下缺点,如果这些不能满足你,后面也没必要看了. 缺点如下(也可能我不会用,如果你会一定记得告诉 ...

  5. SpringBoot系列教程web篇之404、500异常页面配置

    接着前面几篇web处理请求的博文,本文将说明,当出现异常的场景下,如404请求url不存在,,403无权,500服务器异常时,我们可以如何处理 原文友链: SpringBoot系列教程web篇之404 ...

  6. Spirng学习指南-第一章(完)

    Spring学习指南 内容提要 ​ Spring框架是以简化J2EE应用程序开发为特定目标而创建的,是当前最流行的Java开发框架. ​ 本书从介绍Spring框架入手,针对Spring4.3和Jav ...

  7. HLP帮助文件源文件RTF文件的编写

    https://www.cnblogs.com/gaodu2003/archive/2008/12/17/1356861.html 举例说明如下: 每一节的标题在RTF文件中一般以特有的脚注($)指定 ...

  8. [Atcoder AGC037E]Reversing and Concatenating

    题目大意:有一个长度为$n$的字符串$S$,有$k$次操作,每次操作为把$S$变为$SS^R$(即翻转后再接在一起),然后从中选取一段长度为$n$的字串.问$k$次操作后,字典序最小的一种是什么.$n ...

  9. ConcurrentDictionary,ConcurrentStack,ConcurrentQueue

    static void Main(string[] args) { var concurrentDictionary = new ConcurrentDictionary<int, string ...

  10. Java调用Http/Https接口(7,end)--WebClient调用Http/Https接口

    WebClient是Spring提供的非阻塞.响应式的Http客户端,提供同步及异步的API,将会代替RestTemplate及AsyncRestTemplate.文中所使用到的软件版本:Java 1 ...