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 ...
随机推荐
- ODAC 安裝 （11.2.4）
1.下载解压 下载ODCA 安装包,下载地址:http://www.oracle.com/technetwork/database/windows/downloads/index-090165.htm ...
- python非官方扩展库
https://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装方法: 1.下载自己需要的库文件 例如:Twisted-19.2.1-cp37-cp37m-win32.wh ...
- 【maven学习】构建maven web项目
Maven Web应用 创建Web应用程序 要创建一个简单的java web应用程序,我们将使用Maven的原型 - web应用插件.因此,让我们打开命令控制台,进入到C: MVN目录并执行以下命令m ...
- mysql笔记7--一句查询语句的过程
1 sql语句示例 select *from A where id=1 2 mysql基本架构图 (1)Mysql分为Server层和引擎层两个部分 (2)Server层包括连接器,查询缓存,分析器, ...
- Git如何切换账户
如果你不知道现在本地Git用的帐号是什么,你可以输入 git config user.name 查看用户名 git config user.email 查看用户邮箱 修 ...
- 初识Java及所要准备的工作
整个Java学习路线 Java特点: 开源:源代码开放 跨平台:由于各平台有差异型,java由JVM对源代码进行解释执行,一次编译到处运行 Java的学习框架如下: JavaSE包括: 数据库包括: ...
- 关于Oracle报 ORA-00600: 内部错误代码, 参数: [kkqcscpopn_Int: 0], [], [], [], [], [], [], [], [], [], [], []解决
服务器上有的Oracle版本是11.2.0.1.0,但是用到了mybatis-PageHelper分页插件会报这个错误. 下面说说我是怎么遇到这个错误的:同事写的这个功能点是用到了前台分页,是正常的没 ...
- 004 Thymeleaf学习笔记
1.Thymeleaf概述 SpringBoot并不推荐使用jsp,但是支持一些模板引擎技术:Freemarker.Thymeleaf.Mustache. 简单说, Thymeleaf 是一个跟 Ve ...
- Java开发笔记（一百五十一）Druid连接池的用法
C3P0连接池自诞生以来在Java Web领域反响甚好,业已成为hibenate框架推荐的连接池.谁知人红是非多,C3P0在大型应用场合中暴露了越来越多的局限性,包括但不限于下列几点:1.C3P0管理 ...
- [终极巨坑]golang+vue开发日记【二】，登陆界面制作（一）
写在前面 本期内容是适合第一次使用vue或者golang开发的,内容会以实战的形式来讲解.看懂本段内容需要了解基础内容有html,css,最好可以看一下vue的基础.并且这里的每个知识点不可能详细解说 ...