`
zybing
  • 浏览: 459998 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

防止表格或DIV布局的网页页面被撑大的方法

CSS 
阅读更多

防止表格或DIV布局的网页页面被撑大的方法

    我们在设计网页的时候,通常会固定网页页面的大小,从而使页面整体协调。可是用户在网站后台添加文章时,由于输入的时候只是随便从Word中或者其他网页上直接把内容复制到网页文本编辑器中,这样就会把一些乱七八糟的样式给复制进来,往往造成的后果是会把前台页面撑的很大,如我前台页面设置的宽度为960px,可是用户在后插入了一个1024px的表格,那么整个页面就被撑的很大,非常难看,所以今天就教大家防止表格或DIV布局的网页页面被撑大的方法。

    其实我们只需要控制好整个网站页面的CSS即可,只需要在前台页面调用的CSS文件中加入如下代码即可:

    ·如果你前台页面是用表格来布局的,那么在CSS文件中加入如下代码:

table {
table-layout: fixed;
word-break: break-all;
overflow: hidden;
}

    ·如果你前台页面是用DIV来布局的,那么在CSS文件中加入如下代码:

div {
table-layout: fixed;
word-wrap: break-word;
overflow: hidden;
}

分享到:
评论

相关推荐

    html div布局

    HTML中的`<div>`元素是网页布局的基础,它在CSS+Div布局中扮演着至关重要的角色。CSS(层叠样式表)与`<div>`标签的结合使用,使得网页设计更加灵活、可维护且结构化。 `<div>`是HTML中的一个通用容器标签,全称为...

    网页表格或div层在网页中被撑开解决之道

    当表格或div容器内的内容(如图片、文字)过大时,如果不进行适当处理,会导致整个页面布局失衡,影响用户体验。以下是一些解决这个问题的有效方法: 1. **限制图片大小**:通过在HTML代码中设置`<img>`标签的`...

    DIV+CSS布局方法

    DIV+CSS布局方法是现代网页设计中不可或缺的一部分,它极大地改善了网页的可维护性和可扩展性。在传统的HTML布局中,表格经常被用来控制页面元素的位置,但这种方式往往导致代码冗余,不利于搜索引擎优化(SEO),...

    DIVCSS网页标准化布局PPT学习教案.pptx

    4. **布局页面居中**: - 对于整体页面居中,可以将外部容器设置为`margin: auto;`并限定宽度。 5. **设置多列浮动的布局**: - 通过设置多个`<div>`元素的`float`属性,可以轻松实现多列布局。 #### 十、总结 ...

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    在CSS网页布局中,实现DIV水平居中是一个常见的需求,尤其在软件开发中,良好的页面布局能提供优秀的用户体验。本文将详细介绍几种不同的方法来实现这一目标。 首先,对于单行垂直居中的情况,我们可以利用CSS的`...

    div+css网站布局实例

    在`div+css`布局中,`<div>`经常被用作容器,承载不同的页面区域,如头部、主体、侧栏和底部等。 1. **盒模型**:理解CSS的盒模型是进行`div+css`布局的基础。盒模型包括内容(content)、内边距(padding)、边框...

    DIV+CSS完美布局

    在传统的HTML布局中,人们常常依赖表格或者内联样式来控制网页元素的位置和样式,这种方法既不便于代码的管理,也容易导致页面结构混乱。而**DIV+CSS**布局则将结构(HTML)和样式(CSS)分离,使得网页设计更加清晰...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的默认样式`white-space`是`normal`,这意味着元素内的文本会在适当的地方自动...

    jsp css+div 后台框架

    CSS + Div布局是现代网页设计的主流方法,它取代了早期的表格布局,提供了更好的控制力和可扩展性。通过组合多个Div,开发者可以构建复杂的网格系统,实现自适应和响应式设计。 一个“比较完美的后台框架”应该具备...

    Div+CSS 布局大全

    #### XHTML下的CSS+Div布局总结 - **DOCTYPE的选择**:文档类型声明(DOCTYPE)是HTML文档的组成部分,用于告知浏览器文档遵循的HTML标准。正确选择DOCTYPE对于确保浏览器正确解析页面至关重要。例如,严格模式(如...

    2天掌握DIV+CSS网页制作技术

    - 在早期网页设计中,表格(Table)常用于布局,但这种方法不利于内容的语义化和SEO,而且在响应式设计中表现不佳。 3. **基础三:xHTML+CSS与SEO** - 使用xHTML+CSS有助于提升网页在搜索引擎中的排名,因为它使...

    DIV+CSS网页制作对搜索引擎优化的优势分析.pdf

    【标题】:“DIV+CSS网页制作对搜索引擎优化的优势分析” 【描述】:本文详细探讨了使用DIV+CSS技术构建网页对搜索引擎优化(SEO)...因此,无论从技术层面还是SEO角度,采用DIV+CSS布局都是现代网页设计的首选方法。

    最经典的制作网页的教程DIV+CSS

    ### DIV+CSS网页布局经典教程知识点汇总 #### 一、DOCTYPE的选择 - **什么是DOCTYPE**:DOCTYPE是指Document Type,即文档类型,在HTML文档头部用来指定文档遵循的标准或规范。DOCTYPE的作用在于告诉浏览器文档...

    ul dl dt ol的解释与div+css布局技巧集锦

    在CSS中,`div`常被用作布局容器,通过设置宽度、高度、边距等属性来调整页面布局。通过合理使用`div`,可以实现更灵活的网页设计。 在CSS布局中,`float`属性常用于创建多列布局。`float:left`或`float:right`可以...

    Div+CSS布局大全

    #### 二、XHTML下的CSS+Div布局总结 ##### XHTML代码规范 - **标记闭合**:确保所有HTML标签都有相应的关闭标签。 - **小写字母**:所有标签和属性名称必须使用小写字母。 - **合理嵌套**:确保所有HTML标记正确嵌套...

    Dreamweaver层与表格的转化.pdf

    在网页设计中,Dreamweaver 是一款强大的工具,...这样,通过灵活运用层、表格和 div 标签,可以创建出适应不同浏览器和设计需求的复杂网页布局。在实际操作中,理解这些概念和技巧将大大提高网页设计的效率和灵活性。

    HTML5+CSS3网页设计基础-第七章-网页布局设计.pptx

    随着Web标准的发展,传统的表格布局已经被DV+CSS布局方式取代,HTML5更是引入了新的结构布局标签,以简化和优化网页的设计与布局。 本章的目标是让学生理解并掌握使用HTML5的新布局标签和CSS进行页面布局的方法。...

    div+css布局中常用方法汇总.docx

    【div+css布局中常用方法】在网页设计中,Div+CSS布局是现代网页开发的基础,它通过HTML的div元素和CSS样式来控制页面布局,提供了更灵活、可维护性更强的设计方式。以下是一些在div+css布局中常用的技术和方法: 1...

    JAVA WEB类似Excel的表格锁定效果的实现

    - **表格数据同步**:由于锁定的div实际上是表格的一部分,需要确保锁定div和内容区域div的数据同步,防止滚动时出现错位。 在提供的压缩包文件"javaweb表格锁定的实现实例"中,可能包含了实现这一效果的HTML、CSS...

    CSS+DIV.ppt

    【CSS+DIV】是一种网页...CSS+DIV布局允许设计者将内容和样式分离,提高了代码的可读性和复用性,使得网页在不同设备和浏览器上的表现更加一致。学习并熟练掌握这些知识点,能帮助开发者构建高效、美观且响应式的网页。

Global site tag (gtag.js) - Google Analytics