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 ...
随机推荐
- rc.local添加tomcat服务启动命令，但是tomcat服务无法正常启动
遇到了一个特别坑的问题. 本来想着在rc.local文件里添加tomcat启动命令,使tomcat开机自启.之前在其他服务器上直接这样操作是没问题的,但很幸运的是,现在忽然就不行了. 开始排错: 1. ...
- [LeetCode] 769. Max Chunks To Make Sorted 可排序的最大块数
Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...
- SpringBoot小技巧：统一异常处理
SpringBoot小技巧:统一异常处理 情景描述 对于接口的定义,我们通常会有一个固定的格式,比如: 但是调用方在请求我们的API时把接口地址写错了,就会得到一个404错误,且不同于我们定义的数据格 ...
- Dockerfile常用指令说明
具体解释:https://blog.csdn.net/achenyuan/article/details/80231922 将dockerfile文件和生成好的jar 使用ftp工具上传到linux服 ...
- 消息中间件 kafka rabbitmq 选型差异
https://www.zhihu.com/question/43557507 https://baijiahao.baidu.com/s?id=1610644333184173190&wfr ...
- 【记录】【solr】solr7.2.1原子更新
就是说只更新指定的字段,没有的字段则添加,有的字段则替换,没有指定更新的字段不会被删除 原来的数据只有id和name这两个字段 java操作,更新一个字段,id用于指定数据 结果,name字段没有被删 ...
- jdk的下载路径和环境变量的配置
一:jdk百度网盘的下载路径: 链接:https://pan.baidu.com/s/1pF41oGcTqouULsWKEBn3hw 提取码:p1y2 复制这段内容后打开百度网盘手机App,操作更方便 ...
- SQL Join连接大小表在前在后的重要性（小表在前提高执行效率）
引用地址:https://blog.csdn.net/qq_30349961/article/details/82662550 http://blog.sina.com.cn/s/blog_6ff05 ...
- PHP 输入输出流 php://input 获取表单中2个重名name的值
PHP 输入输出流 php://input 获取表单中2个重名name的值 <?php // PHP有一种"所有IO都是流"的说法. // 压缩流参考 https://w ...
- IDEA debug断点调试技巧
Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化.通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方 ...