网页制作技巧:数据过多时不会影响页面布局

文章简介:网页制作技巧:数据过多时不会影响页面布局.

着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示。
要达到的目标是:数据过多时,不会影响页面布局
解决方法:
1,在不影响布局的情况下,可以选择,数据自动换行
a.设置宽度限制:可以使用width值和max-width最大宽度值。
b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);
注意点:长串字母实现前提,必须将宽度限制直接添加到“文本内容的标签”。

2,控制数据超出一定范围,自动隐藏——通过title值来显示全部数据信息
a.设置宽度限制:可以使用width值和max-width最大宽度值。
b.超出范围隐藏:overflow:hidden;

3,控制数据超出一定范围,自动隐藏,并显示省略号...——通过title值来显示全部数据信息
a.数据不换行:white-space:nowrap;
b.超出范围隐藏:overflow:hidden;
c.显示省略号:text-overflow:ellipsis;

工作中整理出来的方法,可以提高自己的技术。
突然想起:学习知识的过程:
1,首先是学习基础知识的过程
2,其次是反复实践(没有实践,理论再好,也不能说自己学到了)
3,最后可以将自己所学,总结出来,分享给大家。(让想学的人学会)
总结一句话:学习是个长期积累,不断研究的一个过程。

自己的语言组织能力,表达能力很差,但希望自己可以提高。
缺点也很明显:自己学到的东西,表达不出来。

时间: 2025-01-20 14:52:43

网页制作技巧:数据过多时不会影响页面布局的相关文章

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

CSS网页制作技巧:隐藏网页元素的方法汇总

文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: rela

DIVCSS网页设计总结:有用的3个网页制作技巧

网页制作Webjx文章简介:DIVCSS网页设计总结:有用的3个网页制作技巧. 我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 "顶级"CSS技巧!虽然没有什么新意,但对新手而言却非常重要! 一.在一行内声明CSS h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}  h2 {  font-size:18px;  border:1px soli

巧妙运用Dreamweaver进行网页制作技巧

dreamweaver|技巧|网页 巧妙运用DW进行网页制作技巧--熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同. 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用

网页制作技巧24条

01.让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: 〈Body Background="图片文件" bgproperties="fixed"〉 02.让你的网页无法另存为 <noscript><iframe alt=网页制作技巧24条 src=*></iframe></noscript> 03.让IFRAME框架内的文档的背景透明 <iframe alt=网页

网页制作技巧:你做的网页试过“面目全非”吗?

技巧|网页 如果只是因为浏览器的设置改变,或浏览器不兼容,使自己精心制作的网页变得"面目全非",多令人沮丧!这里我们列出几个网页初学者常见的网页布局问题以及解决方法-- 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助. 一.消除任意缩放浏览器窗口对网页

Dreamweaver网页制作技巧:使用模板

dreamweaver|技巧|模板|网页 随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中.现在,拥有自己的Web网站已经成为一种潮流.虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了,因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程,希望对大家有所帮助. 通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网 页结构以及相同栏目下的导航条.各类图标就显得非常麻烦,不过我们可以借助D