ASP讨论区

模拟。。。。

楼主 2014 于 2014-03-06 19:42:04

模拟。。。。

[CODE]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
Examples
</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript" src="my.js"></script>
<style>/* Nexus 4 Pure CSS Design */
/* Author : Erhan Basa ( erhanbasa.com ) */
/* http://erhanbasa.com/blog/css-ile-nexus-4/ */

* {
margin: 0;
padding: 0;
}
::selection {
background: transparent;
}
body {
color: #4196b7;
font: normal 12px arial,sans-serif;
}

.nexus {
position: relative;
margin: 10px auto;
width: 314px;
height: 600px;
border-radius: 80px / 40px;
border-top: 3px solid #222;
background: #6d6d6b;
background: -moz-linear-gradient(left, #6d6d6b 0%, #3b3b3c 1%, #979797 3%, #686868 4%, #2e2e2e 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6d6d6b), color-stop(1%,#3b3b3c), color-stop(3%,#979797), color-stop(4%,#686868), color-stop(100%,#2e2e2e));
background: -webkit-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background: -o-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background: -ms-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background: linear-gradient(to right, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6b', endColorstr='#2e2e2e',GradientType=1 );
}
.nexus:before {
position: absolute;
content: '';
z-index: -1;
top: -6px;
left: 0px;
background: #babbbb;
width: 314px;
height: 78px;
border-radius: 25% / 45%;
border-top: 1px solid #444;
}
.nexus:after {
position: absolute;
content: '';
z-index: -1;
bottom: -5px;
left: 0px;
background: #babbbb;
width: 314px;
height: 78px;
border-radius: 25% / 45%;
border-bottom: 2px solid #555;
}
.speaker {
position: absolute;
left: 0px;
top: 0px;
width: 65px;
height: 5px;
background: #333;
left: 50%;
margin-left: -33px;
border-radius: 0 0 6px 6px;
border:1px solid #474747;
border-top: 0;
box-shadow: inset 0 0 1px black;
}
.screen {
position: absolute;
left: 17px;
top: 64px;
width: 282px;
height: 467px;
background: white;
}
.phone-infos {
width: 100%;
height: 17px;
background: #303030;
}
.phone-infos span {
float: right;
font-size: 11px;
margin: 2px 3px;
}
.phone-infos .battery {
width: 8px;
height: 10px;
background: #4196b7;
margin-top: 2px;
position: relative;
margin-top: 4px;
}
.phone-infos .battery:before {
width: 4px;
height: 2px;
position: absolute;
left: 2px;
top: -2px;
background: #4196b7;
content: '';
}
.phone-infos .gsm {
position: relative;
height: 12px;
margin-right: 10px;
}
.phone-infos .gsm b {
float: left;
position: absolute;
bottom: 0;
}
.phone-infos .gsm b:before {
position: absolute;
content: '';
top: -3px;
width: 0;
height: 0;
border-bottom: 3px solid #4196b7;
border-left: 3px solid transparent;
}
.phone-infos .gsm .signal1 {
width: 3px;
height: 0px;
background: #4196b7;
left: -8px;
}
.phone-infos .gsm .signal2 {
width: 3px;
height: 3px;
background: #4196b7;
left: -4px;
}
.phone-infos .gsm .signal3 {
width: 3px;
height: 7px;
background: #4196b7;
}
.phone-infos .gsm .signal4 {
width: 3px;
height: 11px;
background: #808184;
left: 4px;
}
.phone-infos .gsm .signal4:before {
border-bottom: 3px solid #808184;
border-left: 3px solid transparent;
}

.phone-tabs {
border-bottom: 1px solid #858383;
background: #303030;
height: 50px;
}
.phone-tabs li {
float: left;
list-style: none;
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
}
.phone-tabs li a {
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
text-decoration: none;
background: #303030;
cursor:pointer;
height: 40px;
width:94px;
display: block;
text-align: center;
position: relative;
padding-top: 10px;
}
.phone-tabs li a:active {
background: rgba(104,208,249,.4);
}
.phone-tabs li a:before {
height: 20px;
width: 1px;
background: #858383;
position: absolute;
content: '';
left: 0;
top: 16px;
}
.phone-tabs li:first-child a:before {
display: none;
}
.phone-tabs li.current a:after {
position: absolute;
content: '';
left: 0px;
bottom: 0px;
width: 100%;
height: 5px;
background: #4196b7;
}

.phone-tab-contents {
width: 100%;
height: 365px;
position: relative;
overflow: hidden;
}
.phone-tab-contents .tab {
width: 100%;
height: 365px;
position: absolute;
background: #3f3f3f;
position: absolute;
-webkit-transition:all .25s ease-in;
-moz-transition:all .25s ease-in;
-o-transition:all .25s ease-in;
transition:all .25s ease-in;
}
.phone-tab-contents .tab.phone {
left:0;
background: #3f3f3f url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAABJRU5ErkJggg==) repeat;
}
.phone-tab-contents .tab.clock{
left: 282px;
}
.phone-tab-contents .tab.peoples{
left: 564px;
}

.phone-tab-contents.getclock .tab.phone{
left: -282px;
}
.phone-tab-contents.getclock .tab.clock{
left: 0px;
}
.phone-tab-contents.getclock .tab.peoples{
left: 282px;
}

.phone-tab-contents.getpeoples .tab.phone{
left: -564px;
}
.phone-tab-contents.getpeoples .tab.clock{
left: -282px;
}
.phone-tab-contents.getpeoples .tab.peoples{
left: 0px;
}

.phone-tab-contents .tab.clock p:first-child,
.phone-tab-contents .tab.peoples p:first-child {
margin-top: 50px;
}
.phone-tab-contents .tab.peoples p,
.phone-tab-contents .tab.clock p{
width: 90%;
padding: 10px 5% 0;
text-align: center;
color: #bbb;
}
.phone-tab-contents .tab.peoples p a,
.phone-tab-contents .tab.clock p a{
color: #fff;
}

.main-btns {
width: 100%;
height: 34px;
background: #303030;
}
.main-btns li {
list-style: none;
float: left;
}
.main-btns li a {
width: 30px;
display: block;
width: 94px;
height: 34px;
text-align: center;
}

.number-area {
color: #fff;
font-size: 20px;
text-align: center;
padding: 20px 0 20px;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #333;
margin-bottom: 10px;
}
.number-area .numbers {
width: 230px;
float: left;
padding: 0 10px;
height: 14px;
}
.number-area .delete-btn {
float: right;
margin-right: 10px;
cursor: pointer;
}

.numbers-container {
overflow: hidden;
}
.numbers-container span {
width: 94px;
height: 30px;
float: left;
font-size: 30px;
text-indent: 22px;
position: relative;
padding: 15px 0;
cursor: pointer;
}
.numbers-container span:active {
background: rgba(104,208,249,.4);
}
.numbers-container span em {
font-size: 12px;
color: #fff;
font-style: normal;
position: absolute;
left: 22px;
bottom: 15px;
padding-bottom: 5px;
}
.numbers-container span em.brd:before {
position: absolute;
width: 14px;
height: 2px;
background: #fff;
content: '';
top: 9px;
left: 24px;
}
.numbers-container span em:after {
width: 35px;
height: 2px;
background: #4196b7;
content: '';
position: absolute;
top: 16px;
left: 22px;
}
.numbers-container span.fff {
color: #fff;
text-align: center;
}

.call-btn {
width: 100%;
text-align: center;
border-top: 1px solid #333;
padding-top: 10px;
}

/* Icon Group */
.icon {
display: inline-block;
font-style: normal;
position: relative;
}

.icon.phone {
background: #fff;
width: 5px;
height: 26px;
-webkit-transform: rotate(145deg);
-moz-transform: rotate(145deg);
-o-transform: rotate(145deg);
transform: rotate(145deg);
border-radius: 0 6px 6px 0;
margin-top: 5px;
}
.icon.phone:before {
position: absolute;
content: '';
width: 8px;
height: 9px;
background: #fff;
left: -6px;
bottom: -1px;
border-radius: 3px 6px 7px 3px;
}
.icon.phone:after {
position: absolute;
content: '';
width: 8px;
height: 9px;
background: #fff;
left: -6px;
top: -1px;
border-radius: 3px 6px 7px 3px;
}

.icon.clock {
background: #303030;
width: 22px;
height: 22px;
border: 2px solid #fff;
border-radius: 22px;
margin-top: 4px;
}
.icon.clock:before {
position: absolute;
content: '';
height: 9px;
width: 2px;
background: #fff;
top: 2px;
left: 10px;
}
.icon.clock:after {
position: absolute;
content: '';
height: 9px;
width: 2px;
background: #fff;
top: 9px;
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
left: 14px;
}

.icon.peoples {
background: #fff;
height: 10px;
width: 22px;
border-radius: 12px 12px 0 0;
margin-top: 20px;
}
.icon.peoples:after {
position: absolute;
content: '';
background: #fff;
width: 14px;
height: 14px;
border: 2px solid #303030;
border-radius: 18px;
top: -14px;
left: 2px;
z-index: 10;
}
.icon.peoples:before {
position: absolute;
content: '';
background: #303030;
width: 10px;
height: 5px;
left: 6px;
top: -5px;
z-index: 20;
border-radius: 0 0 15px 15px;
}

.icon.close {
font-size: 12px;
color: #303030;
background: #fff;
width: 14px;
height: 12px;
line-height: 12px;
margin-top: 5px;
}
.icon.close:before {
position:absolute;
content:'';
left:-8px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 6.5px 8px 6.5px 0;
border-color: transparent #ffffff transparent transparent;
}

.icon.home {
width: 25px;
height: 8px;
border: 2px solid #bbbbbb;
border-top: 0;
margin-top: 15px;
}
.icon.home:after {
width: 2px;
height: 17px;
background: #bbbbbb;
position: absolute;
top: -12px;
left: 5px;
content: '';
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
.icon.home:before {
width: 2px;
height: 17px;
background: #bbbbbb;
position: absolute;
top: -12px;
right: 5px;
content: '';
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
}

.icon.windows {
width: 20px;
height: 8px;
border: 2px solid #bbbbbb;
margin-top: 13px;
}
.icon.windows:after {
width: 2px;
height: 14px;
background: #bbbbbb;
position: absolute;
content: '';
right: -6px;
top: -6px;
}
.icon.windows:before {
width: 22px;
height: 2px;
background: #bbbbbb;
position: absolute;
content: '';
right: -4px;
top: -6px;
}

.icon.back {
width: 20px;
height: 2px;
background: #bbb;
color: #bbb;
font-size: 18px;
line-height: 0px;
text-indent: -16px;
font-family: sans-serif;
margin-top: 12px;
}
.icon.back:before {
width: 7px;
height: 11px;
background: #303030;
position: absolute;
content: '';
left: 8px;
z-index: 10;
top: 2px;
}
.icon.back:after {
width: 20px;
height: 7px;
border: 2px solid #bbb;
position: absolute;
content: '';
border-radius: 10px;
}</style>
</head>
<body>
<div class="nexus">
<div class="speaker">
</div>
<div class="screen">
<div class="phone-infos">
<span>
03.15
</span>
<span class="battery">
</span>
<span class="gsm">
<b class="signal1">
</b>
<b class="signal2">
</b>
<b class="signal3">
</b>
<b class="signal4">
</b>
</span>
</div>
<ul class="phone-tabs">
<li class="current">
<a class="getphone">
<i class="icon phone">
</i>
</a>
</li>
<li>
<a class="getclock">
<i class="icon clock">
</i>
</a>
</li>
<li>
<a class="getpeoples">
<i class="icon peoples">
</i>
</a>
</li>
</ul>
<div class="phone-tab-contents">
<div class="tab phone current">
<div class="number-area">
<span class="numbers">
</span>
<a class="delete-btn">
<i class="icon close">
x
</i>
</a>
</div>
<div class="numbers-container">
<span class="pushed1">
1
<em class="brd">
o o
</em>
</span>
<span class="pushed2">
2
<em>
ABC
</em>
</span>
<span class="pushed3">
3
<em>
DEF
</em>
</span>
<span class="pushed4">
4
<em>
GHI
</em>
</span>
<span class="pushed5">
5
<em>
JKL
</em>
</span>
<span class="pushed6">
6
<em>
MNO
</em>
</span>
<span class="pushed7">
7
<em>
PQRS
</em>
</span>
<span class="pushed8">
8
<em>
TUV
</em>
</span>
<span class="pushed9">
9
<em>
WXYZ
</em>
</span>
<span class="pushedasterisk fff">
*
</span>
<span class="pushed0">
0
<em>
+
</em>
</span>
<span class="pushednumber fff">
#
</span>
</div>
<div class="call-btn">
<i class="icon phone">
</i>
</div>
</div>
<div class="tab clock">
<p>
Not Ready
</p>
<p>
Visit Nexus 4 Official Page
</p>
<p>
<a href="http://www.google.com/nexus/4/">
http://www.google.com/nexus/4/
</a>
</p>
<p>
Visit My Site
</p>
<p>
<a href="http://erhanbasa.com/">
http://erhanbasa.com/
</a>
</p>
</div>
<div class="tab peoples">
<p>
Not Ready
</p>
<p>
Visit Nexus 4 Official Page
</p>
<p>
<a href="http://www.google.com/nexus/4/">
http://www.google.com/nexus/4/
</a>
</p>
<p>
Visit My Site
</p>
<p>
<a href="http://erhanbasa.com/">
http://erhanbasa.com/
</a>
</p>
</div>
</div>
<ul class="main-btns">
<li>
<a>
<i class="icon back">
<
</i>
</a>
</li>
<li>
<a>
<i class="icon home">
</i>
</a>
</li>
<li>
<a>
<i class="icon windows">
</i>
</a>
</li>
</ul>
</div>
</div>
<script>// Nexus 4 Pure CSS Design
// Author : Erhan Basa ( erhanbasa.com )
// http://erhanbasa.com/blog/css-ile-nexus-4/
$(document).ready(function() {

/*Current Tab */
$('.phone-tabs li a').click(function() {
$('.phone-tabs li').removeClass('current');
$(this).parent().addClass('current');
});

/*Simple Tab */
var tabContents = $('.phone-tab-contents');
$('.phone-tabs .getphone').click(function() {
tabContents.removeClass('getpeoples');
tabContents.removeClass('getclock');
});

$('.phone-tabs .getclock').click(function() {
tabContents.removeClass('getpeoples');
tabContents.addClass('getclock');
});

$('.phone-tabs .getpeoples').click(function() {
tabContents.removeClass('getclock');
tabContents.addClass('getpeoples');
});

/*Delete */
$('.delete-btn').click(function() {
var numbers = $('.number-area .numbers').text();
var numbers2 = $('.number-area .numbers').text().length;
$('.number-area .numbers').text(numbers.substr(0, numbers2 - 1));
});

/*Pusher*/
var pusher = {
number: function(num) {
$('.numbers-container .pushed' + num + '').click(function() {
$('.number-area .numbers').append('' + num + '');
});
}
}

pusher.number(1);
pusher.number(2);
pusher.number(3);
pusher.number(4);
pusher.number(5);
pusher.number(6);
pusher.number(7);
pusher.number(8);
pusher.number(9);
pusher.number(0);

$('.numbers-container .pushedasterisk').click(function() {
$('.number-area .numbers').append('*');
});

$('.numbers-container .pushednumber').click(function() {
$('.number-area .numbers').append('#');
});

});</script>
</body>
</html>[/CODE]

电脑版 Page created in 0.1094 seconds with 4 queries.