前端设计（三）HTML 布局（div，span）

HTML 布局主要有两种：使用 div 元素的布局和使用 span 元素的布局，那么他们的优缺点是什么呢？下面我们将详细的进行介绍。

使用 div 元素布局

例子：

div 部分：

<body><div id="header"><h1>deepin国际社区</h1>
</div></body>

css 部分：

<style>#header {background-color:black;color:red;text-align:center;padding:25px;
}
</style>

使用 table 元素布局

例子：

<body><table class="syl">
<tr><td>deepin国际社区</td>
</tr>
</table></body>

css 部分：

<style>
table.syl {width:100%;border:1px solid #d4d4d4;
}
table.syl td {padding:10px;width:20px;
}
</style>

table 元素布局：

优点：理解比较简单。
不同的浏览器看到的效果一般相同。缺点：显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table 元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。

div 元素布局：

优点：符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
节省代宽，代码冗余度低。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

注：DIV+CSS 并不是要我们抛弃 table，因为 table 在显示数据时更加方便，因此我们要根据实际情况灵活应用。

前端设计（三）HTML 布局（div，span）相关推荐

html--div+css样式布局(div+span)
目录简述盒模型: 布局相关属性简述 div是块级元素 (占用一整行) span是内联元素(占用内容的长度,也可以转换成块级元素) DIV和SPAN存在的意义就是为了应用css样式 <!DO ...
【前端设计】前端设计原则，布局规范
内容总结于 elementUI,iview,bootStrap中文网,互联网前端设计原则一致性 Consistency 与现实生活一致:与现实生活的流程.逻辑保持一致,遵循用户习惯的语言和概念: ...
前端设计-css网格布局的最佳实践
越来越常见的问题-现在人们正在使用css网格布局来生产-似乎是"最好的做法是什么?"这个问题的简短答案是使用规范中定义的布局方法.您选择使用的规范的特定部分,以及如何将网格与其他布 ...
前端设计最详细的div介绍+效果图+代码图
楼主刚学不久 , 学到css 发现十分有趣和好玩,今天跟大家分享一下 CSS中,div 标签的介绍,这也是我上课的笔记 div ,用得非常多的标签,也是最重要的标签本身是一个html的标签, 特点: ...
前端两栏布局和三栏布局
两栏布局左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘要本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

前端设计（三）HTML 布局（div，span）

使用 div 元素布局

使用 table 元素布局

table 元素布局：

div 元素布局：

注：DIV+CSS 并不是要我们抛弃 table，因为 table 在显示数据时更加方便，因此我们要根据实际情况灵活应用。

前端设计（三）HTML 布局（div，span）相关推荐

最新文章

热门文章