HTML代码
系统帮助
css代码
/*对导航栏整体增加样式*/ header { height: 50px; background-color:#534141 ; padding: 0 30px; overflow: hidden; line-height:50px; } /*每一个导航增加样式*/ header>nav>a { font-size: 16px; color: #e6e6e6; padding: 17px; } /*导航悬停时设置颜色*/ nav>a:hover { color: #ffffff; background-color: #e12929; } /*前五个导航左浮动*/ nav:first-child { float: left; } /*后两个导航右浮动*/ nav:last-child { float:right; } /*对中间区域增加框*/ article { margin: 30px auto; background-color: #f1e4e4; height: auto; width: 710px; overflow: hidden; } /*中间区域增加顶部黑色长条*/ article>aside:not(:last-child) { margin:30px 30px 0 30px; background-color: #645858; height: 60px; } /*中间区域section部分增加外边距*/ article>section { margin:50px 30px; overflow: hidden; } /*中间区域增加七个方块*/ article>section>p { width: 100px; height: 100px; margin: 15px; float: left; background-color: #e58282; } /*中间区域增加底部黑色长条*/ article>aside:last-child { margin:0 30px 30px 30px; background-color: #645858; height: 60px; } /*对脚注增加样式*/ footer { height: 200px; background-color: #2a2a2a; } /*脚注每个div区域左浮动*/ footer>div { margin:50px 0 50px 50px; float:left; line-height: 2; } /*脚注中的字体以及颜色的样式*/ footer>div>p:first-child { font-size: 16px; color: #ffffff; } footer>div>p>a:not(first-child) { font-size: 14px; color: #e6e6e6; } /*导航固定位置*/ header { position: fixed; top:0; width: 100%; box-sizing: border-box; } article { margin-top: 80px; } /*对返回顶部增加样式*/ body>aside>a { width: 50px; height: 50px; position:fixed; right: 50px; bottom: 100px; }