HTML+Css基础页面练习

网页标题

次级标题

提示信息

导航

连接1 连接2 连接3

    <section>
        <article>
            <header>
               <h1>文章标题</h1>
            </header>
                <p>文章内容...</p>
                <footer>
                    <h2>文章注脚</h2>
                </footer>
        </article>
    </section>

    <aside>
        <h3>相关内容</h3>
        <p>相关辅助信息或服务。。。。</p>
    </aside>
    <footer>
        <h2>页脚</h2>
    </footer>
</div>

*{
margin: 0;
padding: 0;
}
a{

text-decoration: none;

}
a:hover{
text-decoration: underline;
}
body{
background-color: #ccc;
font-family: Arial,Geneva;

border: 0 #fff solid;

}

header{
background-color: #f47d31;
display: block;
text-align: center;
overflow: hidden;
}

header h2{
margin:0px;
}

h1{
font-size: 72px;
}
h2{
font-size: 24px;
}
h3{
font-size: 18px;
color: #f47d31;
}

h4{
color: #f47d31;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-box-shadow:2px 2px 20px #888;
-moz-transform:rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align: center;
background-color: #fff;
}

nav{
display:block;
width: 25%;
float: left;
}

nav a:link,nav a:visited{
display: block;
border-bottom: 3px #fff solid;
}
nav a:hover{
color:white;
background-color: #f47d31;
}

.container{
margin: 0 auto;
background-color: #888;
max-width: 900px;
border: 2px #fff dolid;
}
section{
display: block;
width: 50%;
float: left;
}
article{
background-color: #eee;
display: block;
margin:10px;
padding: 10px;
-webkit-border-radius:10px;
-webkit-box-shadow:2px 2px 2px #888;
-webkit-transform:rotate(-10deg);
-moz-border-radius:10px;
-moz-box-shadow:2px 2px 2px #888;
-moz-transform:rotate(-10deg);
}

article header{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius: 10px;
padding: 5px;
}
article h1{
font-size: 18px;
}
aside{
display: block;
width: 25%;
float: left;
}
aside h3{
margin: 15px;
color: #fff;
font-weight: bold;
}

aside p{
margin: 15px;
color: white;
background-color: #FFF;
color: #000;
text-align: center;
padding: 15px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
footer{
margin: 15px;
color: white;
background-color: #f47d31;
color: #fff;
text-align: center;
padding: 15px;
display: block;
clear: both;
}
footer h2{
font-size: 14px;
color: white;
}