精英盒子 -> 程序设计 -> html网页..(练手罢) [打印本页]

scxy 2012-09-20 20:51

html网页..(练手罢)

话说论坛也挺冷清的。
  1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>类Windows8风格</title>
        <style>
    * {
        margin:0;
        padding:0;
        line-height:1;
        border:0;
    }
    a {
        text-decoration:none;
        color:#082;
        -webkit-transition-duration:0.28s;
    }
    a:hover {
        color:#08D;
        background-color:#DDD;
        padding-left:20px;
    }
    #header {
        width:auto;
        height:100px;
        background-color:#DDD;
        border-bottom:1px solid #BBB;
        margin-bottom:30px;
    }
    #header-inner {
        width:1000px;
        height:100px;
        margin:0 auto;
    }
    div.title {
        height:100px;
        display:inline-block;
        float:left;
    }
    div.title a {
        text-decoration:none;
        color:#082;
        display:inline-block;
        height:28px;
        font-size:28px;
        padding:36px 40px;
        width:auto;
        max-width:100px;
        -webkit-transition-duration:0.28s;
    }
    div.title a:hover {
        background-color:#BBB;
        color:#08D;
    }
    ul.nav, li.nav {
        float:left;
        display:inline-block;
        list-style-type:none;
        height:100px;
    }
    ul.nav a {
        display:inline-block;
        height:16px;
        padding:42px 40px;
        font-size:16px;
    }
    ul.nav a:hover {
        background-color:#BBB;
        color:#08D;
    }
    div.user {
        display:inline-block;
        float:right;
        height:100px;
    }
    div.user a {
        display:inline-block;
        float:left;
        height:14px;
        font-size:14px;
        padding:43px 10px;
    }
    div.user a:hover {
        background-color:#BBB;
    }
    #main {
        display:block;
        width:1000px;
        margin:0 auto;
    }
    ul.artcile, ul.article li{
        list-style-type:none;
    }
    ul.article {
        display:block;
    }
    ul.article li {
        border-left:1px solid #BBB;
        border-bottom:1px solid #BBB;
        margin-bottom:20px;
        padding-left:10px;
        padding-bottom:10px;
    }
    ul.article li a {
        display:inline-block;
        font-size:20px;
        font-weight:bold;
        margin-bottom:5px;
    }
    ul.article li a:hover {
        border-left:2px solid #BBB;
    }
    ul.article li p.cont {
        display:block;
        font-size:14px;
        color:#555;
        padding-left:18px;
    }
        </style>
    </head>
    <body>
        <div id="header">
            <div id="header-inner">
                <div class="title"><a href="#header">SOGA</a></div>
                <ul class="nav">
                    <li class="nav"><a href="#a">A</a></li>
                    <li class="nav"><a href="#abcdefg">ABCDEFG</a></li>
                </ul>
                <div class="user">
                    <a href="#user">USERNAME</a>
                    <a href="#something">SOMETHING</a>
                </div>
            </div>
        </div>
        <div id="main">
            <ul class="article">
                <li>
                    <a href="#article_1">ARTICLE_1</a>
                    <p class="cont">SOGASOGASOGA_THE_TEST</p>
                </li>
                <li>
                    <a href="#article_2">ARTICLE_2</a>
                    <p class="cont">SOGASOGASOGA_THE_TEST_2</p>
                </li>
            </ul>
        </div>
    </body>
    </html>
应该没硬伤了吧

jybox 2012-09-20 21:33
不错

貌似动画效果只针对Chrome...

scxy 2012-09-21 16:58
jybox:不错
貌似动画效果只针对Chrome... (2012-09-20 21:33) 

这是css3好不好

jybox 2012-09-21 21:16
scxy:这是css3好不好 (2012-09-21 16:58) 

前面不是有webkit前缀么....
在firefox下试验确实不好使...




Powered by phpwind v8.7 Code ©2003-2011 phpwind
Time 0.041534 second(s),query:5 Gzip enabled