html网页..（练手罢）|程序设计 - 精英盒子

<!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>