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;	
    }
    

      

  • 相关阅读:
    使用IDEA 创建Mevan项目后,项目中没有Java源文件夹的解决方案
    Head FIRST HTML & CSS 16/3/15
    Head FIRST HTML & CSS 16/3/11
    hdu 5375 dp
    Thinking in java 16/3/8plus
    Thinking in java 16/3/8
    Beauty of mathematics
    Thinking in java 16/3/6
    Thinking in java 16/3/5
    SQL SERVER迁移--更换磁盘文件夹
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7076900.html
Copyright © 2011-2022 走看看