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 ...
随机推荐
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(三)使用Onvif协议进行设备PTZ云台控制
背景分析 熟悉EasyNVR产品的盆友们应该都知道,EasyNVR主要完成的是RTSP视频流到RTMP/HLS/Flv的转码,并提供了一套api和一个可视化管理平台来便于调用.同时支持ONVIF协议进 ...
- 大数据 -- Cloudera Manager(简称CM)+CDH构建大数据平台
一.Cloudera Manager介绍 Cloudera Manager(简称CM)是Cloudera公司开发的一款大数据集群安装部署利器,这款利器具有集群自动化安装.中心化管理.集群监控.报警等功 ...
- log4net记录多个级别文件
https://www.cnblogs.com/AprilBlank/p/12047757.html
- 元素高度变化使用动画transition
高度变化,使用transition,没有效果,可以使用max-height替换. 思路: 初始元素max-height:0; 不显示,父元素hover时,重新设置元素的max-height的值, 可以 ...
- 【整理】【docker】【Linux】整理笔记
1.Linux安装docker 参考文章:https://blog.csdn.net/yanpenglei/article/details/78944553 Docker 要求系统的内核版本高于 3. ...
- 用PowerDesigner将SQL转pdm文件
1.打开新建的pdm文件,File->Reverse Enginner->Databases 2.选择对应数据库(DBMS),点击确定,然后添加SQL文件 3.点击确定 注:如果DBMS没 ...
- 《ucore lab1 exercise5》实验报告
资源 ucore在线实验指导书 我的ucore实验代码 题目:实现函数调用堆栈跟踪函数 我们需要在lab1中完成kdebug.c中函数print_stackframe的实现,可以通过函数print_s ...
- asp net core Remote Validation 无法验证
[注意这里,Remote Validation是需要引入Jquery插件和启用客户端验证的]
- 精通react之react-router4源码分析(100代码实现router功能)
1.react-router4 是一个 react 组件 通过和 location / histroy 结合,来显示页面不同URL对应显示不同的组件 其中包含了三种路由.hash / boswer 等 ...
- LeetCode 5073. 进击的骑士（Java）BFS
题目:5073. 进击的骑士 一个坐标可以从 -infinity 延伸到 +infinity 的 无限大的 棋盘上,你的 骑士 驻扎在坐标为 [0, 0] 的方格里. 骑士的走法和中国象棋中的马相似, ...