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

      

  • 相关阅读:
    2017加油
    配置SSH框架的心得
    .net 中select和where的区别
    oracle查询中文数据出现乱码
    three.js 加载 obj模型
    下载别人的3D模型文件
    关闭按钮
    桌面截屏保存成gif形式(软件)
    vue 中引入 three.js
    three.js-地球贴图-TextureLoader
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7076900.html
Copyright © 2011-2022 走看看