热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

HTML5的div与table的两种布局

最近在学习了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>






推荐阅读
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • HTML5 sever-sent onmessage方法不执行,怎么回事,求大神指点!做服务器广播,页面接收!
    我想实现HTML5sever-sent实现服务器发送消息,然后页面来获取消息,网上找了好多方法,最终找到了一个能用的,但是消息获取页面不执行onmessage方法,求大神指点!本人用.net写的,代 ... [详细]
  • 绑定完成的汗青绑定的基础是propertyChange事宜。怎样得知viewModel成员值的转变一直是开辟MVVM框架的主要题目。主流框架的处置惩罚有一下三大类:别的开辟一套AP ... [详细]
  • 一、HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单。<!DOCTYPEhtml><html><head> ... [详细]
  • 媒介这里大部份是本身碰到过的状况,另有一部份自创了偕行的文章,假如人人有碰到别的坑,迎接提出来一同研讨。学问要点1.Meta标签1.制止用户缩放页面,页面强迫让文档的宽度与装备的宽 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 吐槽:团队遣散,我们该何去何从?
    写在最前:纯属吐槽,漫笔,勿喷!就在前些天,放工回家的路上,看到群信息,说:据说京东裁人了~,也是在上上月,也一度被传的沸沸扬扬的:阿里、京东、华为接踵被曝住手社招,音讯也是满天飘 ... [详细]
  • FileReader详解与实例---读取并显示图像文件
    我们曾经在《HTML5中File对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过xhr发送到后端形成交互。作为FileAPI的一部 ... [详细]
  • 不BB,直接正题一.将大众要领绑定到Page上单个绑定constoldPagePagePagefunction(app){注重大众函数的名字不要反复,不然掩盖app.utilfun ... [详细]
  • 活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址:http:ask.jiutianniao.com ... [详细]
  • <!DOCTYPEhtml><htmllang"en"><head><metacharset"UTF-8&qu ... [详细]
author-avatar
汤侑亦_473
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有