zoukankan      html  css  js  c++  java
  • 07 带语义的布局元素

    --------------------------------------------------------------------------------------------------------------------------------------------------

    --------------------------------------------------------------------------------------------------------------------------------------------------

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hTML5</title>   
    <link href="07-1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<div class="container">
        	<header>
            	header
            	<nav>nav</nav>
            </header>
            
            <article>
            	acticle
                <section>
                	section
                </section>
                <section>
                	section
                </section>
                <section>
                	section
                </section>
            </article>
            
            <aside>
            	aside
            </aside>
            
            <footer>
            	footer
            </footer>
        </div>
    </body>
    </html>

    --------------------------------------------------------------------------------------------------------------------------------------------------  

    @charset "utf-8";
    /* CSS Document */
    .container {
    	margin:0px auto;
    	900px;
    	font-weight:bold;
    	font-size:18px;	
    }
    
    header {
    	background-color:#0CF;
    	height:150px;
    	margin-bottom:20px;	 
    }
    
    nav {
    	background-color:#FF0;
    	height:100px;
    	95%;	
    	margin:0px auto;
    }
    
    article {
    	background-color:#39F;
    	600px;
    	float:left;
    	margin-right:20px;
    }
    
    section {
    	background-color:#FC0;
    	height:150px;
    	margin:20px;	
    }
    
    aside {
    	background-color:#F66;
    	280px;
    	height:551px;	
    	float:right;
    	margin-bottom:20px;
    }
    
    footer {
    	background-color:#0CF;
    	clear:both;
    	height:120px;	
    }
    

      

  • 相关阅读:
    java_day12_jdk1.8新特性
    IT修养-基础篇
    selenium之 chromedriver与chrome版本映射表(更新至v2.31)
    selenium--定位--CSS
    敏捷测试--之scrum--原理
    敏捷测试和瀑布测试的关联
    bugfree安装
    Linux
    mysql--命令行创建数据库
    软件测试流程
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7076900.html
Copyright © 2011-2022 走看看