程序博客网 > ubuntu如何打开py文件

网页制作中常用的基础知识002－CSS布局与表格布局的区别

来源：互联网发布：ubuntu如何打开py文件编辑：程序博客网时间：2024/05/21 14:49

表格布局方式主要是利用HTML语言中table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。

下面是一段典型的表格布局的HTML源代码：

<table width="741" height="136" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/banner_01.jpg" width="257" height="136"></td>

<td><img src="images/banner_02.jpg" width="250" height="136"></td>

<td><img src="images/banner_03.jpg" width="234" height="136"></td>

</tr>

</table>

利用这段代码在网页中插入了一个1行3列的表格，并定义了表格的宽度为741像素、高度为136像素、表格的边框为0像素、单元格填充（单元格与其内填充的元素（如文字，图片）之间的距离）为0像素、单元格间距为0像素，然后分别在3个单元格中插入图片，这样在浏览器中浏览网页时，会发现3张图片显示为一整张图片，从而达到页面布局的目的，如图所示。

但是，由于布局的需要，会在一个页面中插入多个嵌套表格，这样就使得大量样式设计代码混杂在表格单元格之中，可读性降低，很难进行修改，另外，加上大量的图片以及其他元素会导致网页文件变得十分庞大，最终导致浏览器下载及解析速度很慢。

利用CSS进行页面布局，可以有效避免表格布局所带来的种种问题。

下面是一段典型的CSS布局的HTML源代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

.example{

float:left; /*表示div在页面中浮动在当前位置的左侧*/

margin-top:10px;; /*表示div距上方有10像素的外边距*/

margin-right:10px; /*表示div距右侧有10像素的外边距*/

margin-bottom:10px; /*表示div距下侧有10像素的外边距*/

margin-left:10px; /*表示div距左侧有10像素的外边距*/

background-color: #CCCCCC; /*表示div背景为浅灰色*/

text-align:center; /*表示div里的文字居中显示*/

}

</style>

<title>CSS布局示例</title></head>

<body>

<div class="example">网站首页|产品介绍|组织结构|招聘信息|地理位置|联系我们 </div>

</body>

</html>

这段代码在浏览器中的效果如图所示，这是一个很简单的文字定位效果。

ubuntu如何打开py文件

ubuntu如何打开py文件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子电钢琴图片哪个牌子电钢琴好买钢琴还是电钢琴电钢琴钢琴国产电钢琴什么牌子好学电钢琴多少钱旗能电铝皇马电钢琴艾茉森电钢琴价格电钢钢银电商卡西欧电钢日钢电商平台钢银电商平台电钢和钢琴的区别卡哇伊电钢电钢价格钢钢地雅马哈电钢系列机钢电钮的拼音电钮拼音电钮电钮的意思电钻换钻头电钻图片电钻怎么用电钻吃玉米东成电钻电钻玉米家用电钻电钻使用电钻防尘罩电钻品牌电钻冲击钻充电钻价格博大电钻史丹利电钻电钻声电钻报价电钻开锁