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. Python - Django - 扩展默认 auth 表

    models.py: from django.db import models from django.contrib.auth.models import AbstractUser class Us ...

  2. [Golang] mynats(对nats.go的二次封装)

    0x0 前言 最近项目开始使用nats作为消息中间件. nats的引入确实解决项目很多痛点. 比如: 1)服务动态横向扩展 2)负载均衡(nats的均衡机制只有随机,不过对我们来说也够用了) 3)多服 ...

  3. 使用BaGet 搭建私有nuget 服务器

    使用BaGet 搭建私有nuget 服务器 netNugetBaGet 引言 为了增强代码的安全性和企业团队开发的高效性,搭建私有的package 包管理服务器是很有必要的,搭建私有的类库管理服务有以 ...

  4. FLINK-11738

    caused by: akka.pattern.asktimeoutexception: ask timed out on flink Caused by: akka.pattern.AskTimeo ...

  5. java实现视频转码

    废话不多说,直接上代码: 这是转码工具类: package com.gcsoft.pyas.sysbase.utils; import com.gcsoft.pyas.AppProperties; i ...

  6. Oracle Spatial分区应用研究之五：不同分区粒度+本地空间索引效率对比

    1.实验目的 若使用本地空间索引,不同分区粒度将产生不同索引组织,其索引分区个数.大小.R-TREE树结构均不相同.那么,在什么分区粒度下的本地空间索引效率较高呢? 2实验数据 实验数据为全国2531 ...

  7. jquery关于on click事件的理解

    jquery关于on click事件的理解 <pre><a style="min-width:60px; margin-left:6px;" wenzhangid ...

  8. 翻书shader

    //把下面的shader挂载到plane上,调节_Angle Shader "Unlit/PageTurning"{ Properties { _Color ("Colo ...

  9. 处理登录时，AJAX的状态码无权限情况

    $.ajaxSetup({ complete: function(XMLHttpRequest, textStatus) { }, error:function(jqXHR,textStatus,er ...

  10. Flume和 Sqoop

    Sqoop简介 Sqoop是一种旨在有效地在Apache Hadoop和诸如关系数据库等结构化数据存储之间传输大量数据的工具 原理: 将导入或导出命令翻译成Mapreduce程序来实现. 在翻译出的M ...