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

      

  • 相关阅读:
    C#编程总结(三)线程同步 多线程
    配置 Spring.NET
    C# Redis
    WPF MvvmLight RelayCommand 绑定Command 的使用
    WCF编程系列(一)初识WCF
    C#/WPF程序开机自动启动
    C# 创建Windows Service(Windows服务)程序
    前端Js框架汇总
    列式存储和行式存储
    llvm-3.4.2 编译失败 解决方案
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7076900.html
Copyright © 2011-2022 走看看