纯CSS写了个魅族 M8 手机界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS MEIZU M8 by [email protected]</title>
<style>
body {
background-color:#fff;
font-family:‘微软雅黑‘;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#m8 {
width:266px;
height:482px;
margin:auto;
border:1px solid #fff;
-moz-border-radius:38px;
-khtml-border-radius:38px;
-webkit-border-radius:38px;
border-radius:38px;
background-color:#2E2F31;
}
div.sideline {
width:246px;
height:466px;
margin:6px auto;
border:2px solid #4F525B;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
background-color:#131418;
}
span.ring {
width:8px;
height:8px;
display:block;
overflow:hidden;
float:left;
margin:auto 4px;
border:1px solid #060709;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#838584;
}
span.ring em {
width:6px;
height:6px;
display:block;
margin-top:2px;
border:1px solid #060709;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#0F1012;
}
div#receiver {
padding:30px 0 20px 97px;
}
div#screen {
width:88%;
height:336px;
overflow:hidden;
margin:auto;
border:3px solid #1B1C20;
background-color:#fff;
text-align:center;
position:relative;
background:url(http://www.itxueren.com/desktopbg.jpg) no-repeat;
}
div#mike {
padding-top:12px;
}
div.m {
width:66px;
height:35px;
display:block;
margin:auto;
border:1px solid #040509;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
cursor:pointer;
}
div.m span {
width:26px;
height:13px;
display:block;
margin:10px auto;
border:1px solid #565656;
border-top:none;
border-right:none;
background-color:#4F5150;
position:relative;
}
div.m span b,div.m span em{
width:2px;
height:12px;
display:block;
background-color:#020403;
position:absolute;
bottom:-1px;
}
div.m span b{
margin-left:9px;
}
div.m span em{
margin-left:18px;
}
div#screen .top {
color:#fff;
background-color:#000;
opacity:.4;
font-size:10px;
position:relative;
}
div#screen .bottom {
width:100%;
height:40px;
line-height:40px;
border-top:1px solid #ccc;
background-color:#000;
background:-moz-linear-gradient(center top , #ccc, #000) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#ccc), to(#000));
-webkit-box-shadow:0 -2px 4px #000;
-moz-box-shadow:0 -2px 4px #000;
opacity:.5;
position:absolute;
bottom:0;
color:#000;
font-size:20px;
text-shadow:2px 2px #32312B;
text-transform:uppercase;
}
div#time {
width:87%;
height:45px;
margin:auto 12px;
border:1px solid #000;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#000;
opacity:.8;
position:absolute;
bottom:55px;
color:#fff;
}
div#time .t {
width:120px;
display:block;
float:left;
font-size:33px;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
padding-top:1px;
}
div#time .d,div#time .q {
width:60px;
display:block;
font-size:10px;
float:left;
text-align:left;
padding-left:2px;
}
div#time .d{
padding-top:5px;
}
</style>
</head>
<body>
<div id="m8">
<div class="sideline">
<div id="receiver" class="clearfix">
<span class="ring"><em></em></span>
<span class="ring"><em></em></span>
<span class="ring"><em></em></span>
</div>
<div id="screen">
<div class="top">中国移动</div>
<div id="time">
<span class="t">01:25</span>
<span class="d">06月06日</span>
<span class="q">星期日</span>
</div>

<div class="bottom">css魅族M8 by 若寒</div>
</div>
<div id="mike" class="clearfix">
<div class="m">
<span><b></b><em></em></span>
</div>
</div>
</div>
</div>
</body>
</html>

纯CSS写了个魅族 M8 手机界面

时间: 2024-11-29 10:11:31

纯CSS写了个魅族 M8 手机界面的相关文章

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

无聊,纯css写了个评分鼠标移入的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

重新整理:纯CSS写三角形

整理一下几年前写的知识点,关于如何用纯CSS写三角形. 方法1:利用CSS3旋转正方形 知识点: transform:rotate(45deg) 兼容性:FF/Chrome/IE9+ html: <div class="imgbox1"> <img src="images/200x300.jpg" alt="" /> <p>内容文字内容文字内容文字内容文字</p> </div> CSS:

纯CSS写三角形-border法[基础篇]

纯CSS写三角形-border法[基础篇] 注意:所有知识点将不考虑IE6 ( ̄▽ ̄") 在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可.但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量.所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量.减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量. CSS3出现以后,“方形旋转45度”制作三角形的

纯CSS写三角形-border法[晋级篇01]

纯CSS写三角形-border法[晋级篇01] 注意:所有知识点将不考虑IE6 ( ̄▽ ̄") (1)有边框的三角形 在上一篇完成简单的三角形border法后,我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

还在为小三角形切图?使用纯CSS写一个简单的三角形

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会

教你如何用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式. 具体如何实现呢?请耐心往下看... 1. HTML结构 <!--HTML--> &l

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单 控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因 可以配合上transform: scale() 让弹窗更有动态感觉 全部代码: <!DOCT