使用CSS3的圆角技术仿写QQ2012的主窗口_CSS相关

使用CSS3的圆角技术仿写QQ2012的主窗口: 发布时间：2019-10-21编辑：脚本学堂

CSS3的圆角技术，仿写QQ2012的主窗口，用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>
    <FCK: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;
    <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>: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>

提示：可修改代码后再运行!

上一篇：用css控制鼠标hover不抖动
下一篇：借助jquery实现的CSS3时钟式进度条

与使用CSS3的圆角技术仿写QQ2012的主窗口有关的文章

本文标题：使用CSS3的圆角技术仿写QQ2012的主窗口
本页链接：http://www.jb200.com/tx/135.html

浏览排行

栏目分类

热点文章

1css实现网站导航之横向导航

使用CSS3的圆角技术仿写QQ2012的主窗口