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

      

  • 相关阅读:
    jQuery 中 attr() 和 prop() 方法的区别
    Jquery DOM元素的方法
    超链接的#和javascript:void(0)的区别
    CSS定位之position详解(转载)
    jQuery最佳实践(转载)
    jQuery官方基础教程笔记(转载)
    股票---基金基础知识
    eclipse里面构建maven项目详解(转载)
    sax解析操作XML
    DOM4j操作xml文件
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7076900.html
Copyright © 2011-2022 走看看