首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

HTML5的div与table的两种布局

作者：汤侑亦_473 | 来源：互联网 | 2023-05-29 15:08
最近在学习了html5，学习了<div>和<table>常见的两种布局：<!DOCTYPEhtml><html><h

最近在学习了html5，学习了

和常见的两种布局：


html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background: gray;
        }
        #heading{
            width: 100%;
            height: 10%;
            background: red;
        }
        #context_menu{
            width: 20%;
            height: 80%;
            background: greenyellow;
            float: right;
        }
        #context_body{
            width: 80%;
            height: 80%;
            background: chartreuse;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background: darkgreen;
        }

    style>
head>
<body>

<div id="container">
    <div id="heading">头部div>
    <div id="context_menu">内容菜单div>
    <div id="context_body">内容主体div>
    <div id="footing">底部div>
div>

body>
html>




table的布局：
html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局title>
head>
<body marginwidth="0px" marginheight="0px">
    <table width="100%" height="950px" style="background-color: gray">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: red">这是头部td>
        tr>

        <tr>
            <td width="20%" height="80%" style="background-color: aqua">左菜单td>
            <td width="80%" height="80%" style="background-color: darkgreen">td>
        tr>

        <tr>
            <td width="100%" height="10%" style="background-color: darkred" colspan="2">这是底部td>
        tr>

    table>

body>
html>










        
    

        
推荐阅读

        

            
        

    


    

        

            
            

                
                author-avatar
            


            

                汤侑亦_473            


            

                这个家伙很懒，什么也没留下！            



        

    


    

    

    
    

    

        
Tags | 热门标签

        

            
        

    


    
    

        

            

            

        

        
RankList | 热门文章

        

            
        

    

    


    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有