CSS制作华为mate8手机模型示例
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手机模型示例的更多相关文章
- 华为Mate8手机优化技巧
我的华为Mate8手机手机存储(手机内存)32G, 运行内存3G,2016年买的手机,两样数值都偏小,导致使用手机的时候经常卡顿,一天来回清理垃圾.清理内存很多次,要运行微信.QQ等占用运行内存较多的 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 关于华为P9手机的解锁、刷Recovery、获取Root、安装Busybox，以及升级降级的全过程（和一些错误的解决方法）
我有一部华为P9手机,型号EVA-TL00,属于移动定制机.用了半年多了,想给手机添加一些功能,发现有些功能必须Root之后才能用代码实现,所以动了Root的打算. 一.手机解锁.(不解锁则无法对手机 ...
- (完美)华为Mate8 NXT-TL00的USB调试模式在哪里开启的经验
每当我们使用pc通过数据线连接上安卓手机的时候,如果手机没有开启usb调试模式,pc则没法成功检测到我们的手机,在一些情况下,我们使用的一些功能比较强的的软件如以前我们使用的一个软件引号精灵,老版本就 ...
- 制作移动端手机网站过程中的SEO优化方法技巧
据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...
- 用css制作星级评分
Step 1: XHTML <ul class="star-rating"> <li><a href="#" titl ...
- Css制作table细线表格
制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...
随机推荐
- bladex数据字典关联基础表
一:引用import {getDeptTree} from "@/api/system/dept";二: { label: "部门id", prop: &quo ...
- react一些问题
一.死循环 1.问题描述 function handleClick() { this.setState({count: ++this.state.count}); console.log(" ...
- cube-ui按钮配合toast单例模式应用
<template> <div> <cube-button icon="cubeic-right" @click="goNext" ...
- 191128A学习入门-典型信号，单位冲激信号
之所以研究典型信号是因为这些信号可以组合成复杂的信号.而根据线性时不变系统的性质,先把复杂信号拆解成多个简单信号的组合,那么每个简单信号通过这个系统后的输出累加等于原来的输出. 单位冲激信号,单位阶跃 ...
- json_encode不自动转义斜杠“/”的方法
默认的情况之下使用 json_encode 对数组进行 json 格式的转换时候会自动的将数据中含有斜杠的字符串进行转义,如图 两种解决办法 其一,正则替换: $a = str_replace(& ...
- 【记录】【windows】下查看端口是否被占用并杀死该进程
查看端口是否被占用 netstat -aon|findstr "端口号" 比如 netstat -aon|findstr "6340" 杀死该进程 taskki ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- Java中参数始终是按值传递
Java中参数始终是按值传递. public class Main { public static void main(String[] args) { int x = 5; change(x); S ...
- c++11多线程记录1 -- std::thread
启动一个线程 话不多说,直接上代码 void func(); int main() { std::thread t(func); //这里就开始启动线程了 t.join(); // 必须调用join或 ...
- F1 相似查找字段存在的table
REPORT ZME12_BDC1. *REPORT demo_select_dynamic_conditions . TABLES: makt,dd02t,marc. TYPE-POOLS : AB ...