CSS3圆角仿QQ2012主窗口
运用CSS3的圆角技术,来仿写了QQ2012的主窗口,大家都知道QQ2012的主窗口现在都是使用的圆角框,看上去不那么呆板,用CSS3做圆角效果,也是学习CSS3的必修课,通过这一些小小的功能实现,你会慢慢了解CSS3的强大功能。
运用CSS3的圆角技术,来仿写了QQ2012的主窗口,大家都知道QQ2012的主窗口现在都是使用的圆角框,看上去不那么呆板,用CSS3做圆角效果,也是学习CSS3的必修课,通过这一些小小的功能实现,你会慢慢了解CSS3的强大功能。
答案:<!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=gb2312" />
<title>CSS3圆角技术仿写了QQ2012主窗口</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
input, textarea, select {
*font-size:100%;
}
legend {
color:#000;
}
ul,li{list-style:none;}
a{text-decoration:none;}
body{
font-size:12px;}
.cl{
clear:both;}
input{
border:0;
outline:none;
}
hr{
border:0;
}
.main{
width:299px;
height:664px;
border:1px solid #616161;
border-radius:3px;
margin:50px;
position:relative;
}
.top{
height:50px;
background:#1CA4BA;
border:1px solid #89CED9;
border-radius:3px 3px 0 0;
}
.top h1{
font-size:12px;
font-weight:bold;
margin:2px 0 0 8px;
font-family:"微软雅黑";
text-shadow:0px 0 13px #fff;
}
.toux{
width:60px;
height:60px;
border-radius:5px;
z-index:10000px;
position:absolute;
top:25px;
left:8px;
box-shadow:0 0 7px #ECECEC;
border:1px solid #AFB9C3;
}
.toux:hover{
box-shadow:0 0 12px #06ACF1;
}
.toux span{
width:58px;
height:58px;
display:block;
border-radius:5px;
border:1px solid #fff;
background:#44B6D0;
}
.radiusnow{
border-radius:5px 0 0 0;
padding:10px;
border-top:1px solid #1596AB;
background:#fff;
}
.radiustwo{
border-radius:0 30px 0 0;
padding:10px;
position:absolute;
left:60px;
top:35px;
background:#fff;
border-top:2px solid #1596AB;
}
.radiusthree{
border-radius:17px;
background:#fff;
padding:20px;
position:absolute;
left:78px;
top:40px;
z-index:1000;
border-top:2px solid #1596AB;
}
.radiusfour{
border-radius:40px;
background:#fff;
padding:40px;
position:absolute;
left:115px;
top:30px;
z-index:2000;
border-top:2px solid #1596AB;
}
.radiusfive{
border-radius:25px;
background:#fff;
padding:20px;
position:absolute;
left:190px;
top:35px;
z-index:2000;
border-top:2px solid #1596AB;
}
.radiussix{
border-radius:30px;
background:#fff;
padding:30px;
position:absolute;
left:229px;
top:28px;
z-index:2000;
border-top:2px solid #1596AB;
}
.radiusseven{
border-radius:18px;
background:#fff;
padding:10px;
position:absolute;
left:279px;
top:37px;
z-index:2000;
border-top:2px solid #1596AB;
}
.right{
left:85px;
top:25px;
z-index:3000;
position:absolute;
}
.state{
width:8px;
height:8px;
border-radius:8px;
border:2px solid red;
background:#fff;
}
.state em{
width:2px;
height:8px;
display:block;
background:red;
margin-left:3px;
-webkit-transform:rotate(-40deg);
}
.san{
border-style:solid;
display:block;
left:16px;
top:3px;
border-color:#375357 #1CA4BA;
border-width:4px 4px 0 4px;
}
.name{
left:26px;
top:0;
width:70px;
margin-left:10px;
font-size:13px;
text-shadow:0 0 10px #fff;
}
.search{
margin:30px 0 0 10px;
z-index:4000;
border-radius:4px;
border:1px solid #D0D0D0;
height:26px;
color:#808080;
line-height:26px;
width:283px;
text-indent:8px;
background:-webkit-radial-gradient(top, #E3E3E3 20px,#fff 20%);
}
.search div .a{
width:10px;
height:10px;
display:block;
top:3px;
right:20px;
border-radius:8px;
border:2px solid #67979F;
}
.search div .b{
width:3px;
height:10px;
display:block;
top:13px;
right:20px;
-webkit-transform:rotate(-35deg);
background:#67979F;
}
.san_two{
border-style:solid;
display:block;
right:6px;
top:10px;
border-color:#375357 #fff;
border-width:4px 4px 0 4px;
}
.nav{
margin-top:70px;
}
.nav ul{
height:33px;
border-radius:3px;
background:#fff;
}
.nav ul .currte{
width:98px;
height:33px;
border-top-left-radius:6px;
border-bottom:1px solid #EFF6F8;
background:-webkit-linear-gradient(#D4ECEF,#EAF5F7,#fff);
}
.nav ul .border{
height:32px;
width:199px;
border:1px solid #ccc;
}
.nav dl{
padding-left:10px;
}
.nav dl dd p{
padding-left:20px;
top:0;
font-family:'微软雅黑';
}
.nav dl dd em{
border-style:solid;
display:block;
top:4px;
border-color:#fff #787878;
border-width:4px 0px 4px 4px;
}
.nav dl .now{
margin-top:10px;
}
.nav dl .two{
margin-top:35px;
}
.nav dl .three{
margin-top:60px;
width:200px;
}
.about{
margin:50px;
line-height:30px;
}
.f_left{
float:left;
}
.f_right{
float:right;
}
.absolute{
position:absolute;
}
.relative{
position:relative;
}
</style>
</head>
<body>
<div class="main f_left">
<div class="top">
<h1>QQ2012</h1>
</div>
<span class="radiusnow"></span>
<span class="radiustwo"></span>
<span class="radiusthree"></span>
<span class="radiusfour"></span>
<span class="radiusfive"></span>
<span class="radiussix"></span>
<span class="radiusseven"></span>
<p class="toux"><span></span></p>
<div class="right">
<div class="state">
<em></em>
</div>
<em class="san absolute"></em>
<strong class="name absolute">发粪涂墙</strong>
<p style="margin-top:15px;">离开以后 第8天。。。</p>
</div>
<div class="search absolute">
<p class="f_left">搜索联系人,网页信息和问问答案</p>
<div class="f_right">
<em class="a absolute"></em>
<em class="b absolute"></em>
<em class="san_two absolute"></em>
</div>
</div>
<div class="nav">
<ul>
<li class="currte f_left"></li>
<li class="border f_left"></li>
</ul>
<dl>
<dd class="absolute now"><em class="absolute"></em> <p class="absolute">[201/689]</p></dd>
<dd class="absolute two"><em class="absolute"></em> <p class="absolute">[1/1]</p></dd>
<dd class="absolute three"><em class="absolute"></em> <p class="absolute">Myboss [1/3]</p></dd>
</dl>
</div>
</div>
<div class="about f_left">
运用 css3属性的 :
<p>渐变[radial-gradient();]</p>
<p>圆角[border-radius:;]</p>
<p>斜角[transform:rotate();]</p>
<p>字体阴影[text-shadow:;]</p>
<p>阴影[box-shadow:;]</p>
</div>
</body>
</html>
上一个:CSS3文字立体效果
下一个:css3三维动画菜单上下翻转