html -- div table布局 -- 加布局简单例子

快来打我* 2022-07-18 00:25 212阅读 0赞

div布局，div.html：

<!DOCTYPE html>
    <html>
      <head>
        <meta name="generator"
        content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
        <meta name="div" content="div layout div" />
        <meta />
        <title>div布局</title>
    	<style>
    		body{
    			margin:0px;
    			
    		}
    		div#container{
    			width:100%;
    			height:920px;
    			background-color:darkgray;
    		}
    		div#header{
    			width:100%;
    			height:10%;
    			background-color:blue;
    		}
    		div#content_left_menu{
    			width:20%;
    			height:80%;
    			background-color:red;
    			float:left;
    		}
    		div#content_body{
    			width:60%;
    			height:80%;
    			background-color:darkcyan;
    			float:left;
    		}
    		div#content_right_menu{
    			width:20%;
    			height:80%;
    			background-color:darkgreen;
    			float:left;
    		}
    		div#footer{
    			width:100%;
    			height:10%;
    			background-color:green;
    			clear:both;
    		}
    	</style>
      </head>
      <body>
    	<div id="container">
    		<div id="header">头部</div>
    		<div id="content_left_menu">左菜单</div>
    		<div id="content_body">内容主体</div>
    		<div id="content_right_menu">右菜单</div>
    		<div id="footer">底部</div>
    	</div>
      </body>
    </html>

table布局，table.html：

<!DOCTYPE html>
    <html>
      <head>
        <meta name="table"
        content="layout use table element" />
        <title>table布局</title>
      </head>
      <body marginwidth="0px" marginheight="0px">
    	<table width="100%" height="920px" style="background-color:darkgray">
    		<tr>
    			<td colspan = "3" width="100%" height="10%" style="background-color:blue">头部</td>
    		</tr>
    		<tr>
    			<td width="20%" height="80%" style="background-color:red">左菜单</td>
    			<td width="60%" height="80%" style="background-color:darkblue">内容主体</td>
    			<td width="20%" height="80%" style="background-color:darkred">右菜单</td>
    		</tr>
    		<tr>
    			<td width="100%" height="10%" colspan="3" style="background-color:darkgreen">底部</td>
    		</tr>
    	</table>
      </body>
    </html>

===================================================================================================================

简单布局例子：

simple.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单布局</title>
        <link href="my.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div class="container">
        <div class="wrapper">
            <div class="header">
                <div class="header_nav">
                    <div class="header_title">
                        勇哥俱乐部
                    </div>
                    <div class="header_navbar">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li><a href="#">技术课程</a></li>
                            <li><a href="#">技术问答</a></li>
                            <li><a href="#">VIP会员</a></li>
                        </ul>
                    </div>
    
                    <div class="header_img">
                        <img src="im.jpg">
                    </div>
                    <div class="header_spotlight">
                        <form>
                            <input type="text">
                        </form>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="body_title">
                    <h3>勇哥俱乐部</h3>
                    <p>加入俱乐部，学习最新的技术课程，引领潮流</p>
    
                </div>
                <hr />
                <hr />
            </div>
        </div>
        <div class="footer">
            作者邮箱：heqingyong101@163.com
        </div>
    
    </div>
    </body>
    </html>

样式表，my.css:

*{
        margin:0px;
        padding:0px;
    }
    body{
        background-color:snow;
    }
    .wrapper{
        width:80%;
        height:1000px;
        background-color: antiquewhite;
        margin:0px auto;
    }
    .header{
        widht:100%;
        height:90px;
        background-color: snow;
        margin:0px auto;
    }
    .header_nav{
        padding-bottom:30px;
        padding-top:30px;
        width:100%;
        height:30px;
        position:relative;
    }
    .header_title{
        float:left;
        font-family:Arial Harrington sans-serif;
        font-size:30px;
        color:burlywood;
    }
    .header_img img{
        border-radius:30px;
        width:26px;
        height:26px;
        display:inline;
        box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
        float:right;
    }
    .header_spotlight form input{
        margin-right:40px;
        width:100px;
        height:26px;
        float:right;
        position:relative;
    }
    form input{
        border-radius:30px;
        height:26px;
    }
    ul{
        float:left;
        margin-left:40px;
        list-style-type:none;
        padding-top:6px;
        padding-bottom:6px;
    }
    li{
        margin-left:40px;
        display:inline;
    }
    a:link, a:visited{
        font-weight:bold;
        color:darkgray;
        text-align:center;
        padding:6px;
        text-decoration:none;
    }
    a:hover, a:active{
        color:dimgray;
    }
    .body{
        padding:30px;
        height:auto;
        weight:auto;
    }
    .body_title h3{
        font-size:30px;
        font-family: "Arial Harrington";
        color:#333333;
    }
    .body_title p{
        margin-top:20px;
        margin-bottom:20px;
    }
    .footer{
        padding-top:20px;
        padding-bottom:20px;
        color:gray;
        text-align:center;
        font-size:10px;
    
    }