网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局

表格布局

一个猴子的成长史

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

页脚

实现效果

表格布局

**表格布局的思路就是把整个网页看成一个简单的表格,然后在不同的单元格内进行内容填充.下面我们再使用div+css进行布局,一般的div结构元素如下图

图片来自实验楼

撸起袖子写代码

div布局

这是一个导航

优秀文章展现

你好,一只鸡
我在西河大桥看大腿
啊,大海好多水
我们走皮皮虾

开学啦

坑比小学僧们再见啦

good good study, day day up

css部分

#container{

width: 100%;

/*clear: both;*/

}

#header{

width: 100%;

background-color: blue;

text-align: center;

float: left;

/*clear: both;*/

}

#pagebody{

//float: left;

}

#sidebar{

width: 40%;

height: 500px;

background-color: red;

float: left;

/*clear: both;*/

}

#mainbody{

width: 60%;

height: 500px;

background-color: yellow;

float: left;

}

#footer{

width: 100%;

background-color: gray;

text-align: center;

font-size: 50px;

float: left;

}

实现效果

div+css布局

div布局的思路是是把页面看成一个大盒子,用盒子来盛装内容,至于两种布局方法的区别,看这里看这里:浅析div+css与表格布局的区别

关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局相关推荐

【前端学习笔记】09全方位了解flex布局
文章目录 flex布局 flex布局-介绍 flex布局-效果 flex布局-两根轴线 flex布局-容器属性 flex-direction flex-wrap flex-flow justify-c ...
学习笔记(49):Python实战编程-place布局
立即学习:https://edu.csdn.net/course/play/19711/343111?utm_source=blogtoedu 1.place布局: 1)最灵活的布局方式,是根据坐标点 ...
学习笔记| AS入门（三）布局篇
在我们之前的学习过程中,总是需要和.xml布局文件接触,那布局到底是什么呢?布局是指页面内容该如何排布,比如控件和父容器的位置关系以及控件与控件之间的位置关系是怎样的.其实除了最常见的LinearLa ...
android java与界面的关联_Android Studio安卓学习笔记(三)Android用户界面的设计布局与组件(一)用户界面布局设计(1)...
当我们创建了一个安卓项目后,我们会发现真正建立一个完善的安卓项目并不是想象的那么容易.其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件. 一:Androi ...
Android Studio安卓学习笔记(三)Android用户界面的设计布局与组件(一)用户界面布局设计(1)...
当我们创建了一个安卓项目后,我们会发现真正建立一个完善的安卓项目并不是想象的那么容易.其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件. 一:Androi ...
Silverlight学习笔记(3)：Silverlight的界面布局
在上一篇中讲述了使用VS2010开发Silverlight的一些基础知识,并且讲述了Silverlight的部署和代码安全知识,这一篇主要是讲述如何在Silverlight中摆放界面元素. 记得早年前 ...
Android学习笔记（一）——控件布局常用属性
LinearLayout线性布局 id:为控件指定相应的ID. width:控件的宽度. height:控件的高度. background:背景颜色. Orientation:控件的排列方向(默认是水 ...
网页学习笔记（全）Html+Css+Js+JQuery
前段笔记 (一)安装vscode 安装:插件 chinese 汉化 open-in-browser ---> 启用设置自动保存:文件 -> 自动保存 (二)认识页面结构: Emmet:? ...
javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...

关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局

导航

一个猴子的成长史

页脚

这是一个导航

开学啦

关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局相关推荐

最新文章

热门文章