我是靠谱客的博主 搞怪音响,最近开发中收集的这篇文章主要介绍html5绘制 布局图,html5 div布局与table布局详解,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下

div布局:html+css实现简单布局。

#container中height不能写成百分数,必须为具体高度。

div布局

body{

margin:0;

padding:0;

}

#container{

width:100%;

height:650px;

background-color: aqua;

}

#heading{

width:100%;

height:10%;

background-color: azure;

}

#content-menu{

width:30%;

height:80%;

background-color: chartreuse;

float:left;

}

#content-body{

width:70%;

height:80%;

background-color: chocolate;

float:left;

}

#footer{

width:100%;

height:10%;

background-color: darkgrey;

clear: both;

}

头部
内容菜单
内容主体

效果图:

f2429c3593d1436bf1ff726f61cf68f2.png

table布局:

table布局
这是头部
左菜单内容右菜单
这是底部

效果图:

0b0b056118affea1ffe0a44506fdb0ba.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

最后

以上就是搞怪音响为你收集整理的html5绘制 布局图,html5 div布局与table布局详解的全部内容,希望文章能够帮你解决html5绘制 布局图,html5 div布局与table布局详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(36)

评论列表共有 0 条评论

立即
投稿
返回
顶部