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. VSCode安装MathJax插件

    曾经我一直照网上的教程安装了半天都没有安装好,直到我找到了一个叫"Markdown+Math"的插件,安装好之后就可以用了.

  2. vue-loader会缓存node_modules中依赖模块

    问题如下: https://github.com/vuejs/vue-cli/issues/3635 截止到vue cli3还没有解决 手动删除node_modules下的.cache文件夹可以解决这 ...

  3. 【Maven学习】Eclipse使用maven问题集

    环境 jdk 1.8 eclipse 4.7 apache-maven-3.6.1 一.eclipse 编译maven工程步骤 1.Update Project 2.maven clean 3.mav ...

  4. Tomcat 的端口被占用的解决办法

    在dos下,输入  netstat   -ano|findstr  8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill  /pid  6856  /f //说明,运行 ...

  5. tp3.2 如何比较两个字段

    使用exp if ($_GET['owe_property'] || $_GET['owe_property'] !== NULL) { if ((int)$_GET['owe_property'] ...

  6. JSON学习(二)

    首先,定义一个实体类Person: import com.fasterxml.jackson.annotation.JsonFormat; import java.util.Date; public ...

  7. Python之路【第二十篇】:python项目之旧版抽屉新热榜

    旧版抽屉新热榜 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. AVR单片机教程——EasyElectronics Library v1.3手册

    bit.h delay.h pin.h wave.h pwm.h tone.h adc.h button.h switch.h rotary.h pot.h ldr.h led.h rgbw.h se ...

  9. C语言开发中常见报错的解决方案

    C语言开发中常见报错的解决方案 整理来源于网络,侵权请通知删除.*禁止转载 ---- fatal error C1003: error count exceeds number; stopping c ...

  10. ZYNQ笔记（3）：GPIO的使用（MIO、EMIO）——led灯

    一.GPIO原理 1.GPIO介绍 程序员通过软件代码可以独立和动态地对每个 GPIO 进行控制,使其作为输入.输出或中断. (1)通过一个加载指令,软件可以读取一个 GPIO 组内所有 GPIO 的 ...