0

0

如果css足够强大了,你还会用编程的方式实现去实现css已有的功能吗?_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:39:17

|

939人浏览过

|

来源于php中文网

原创

现在css3 都出来的,但是其实我由于一些原因,有些css2中都能支持的样式,我都没有使用过。我感觉我真的有必要静下心来,去看看那些东西,看看哪些以前都被忽视掉的。 今天我主要来讲三个对于我们编程经常用到的,具体如下。

一、 有序列表序号

a、应用场景

有一个列表,需要有序号展示,方便用户知道当前列表记录数,用户可以任意删除其中一条记录,删除后,序号重新整理。

b、思考

我以前的不知道有样式的通常做法是,列表信息在展示时通过索引+1,变成当前记录的序号,这个方法很简单。但是在记录任意删除时就麻烦了,明明可以把自己通过jquery当前记录remove掉就了,序号要重新整理就是一见头痛的事。其实习惯了也不头痛,我会使用$.each(),使用其中的索引,也能达到效果。但是我们程序员,就是要用最简单的方式,实现最强大的功能。这样我们才有更多的时间去关注系统业务逻辑。

c、 学习

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

d、 注意

毕竟css是外国人的弄出来的,中文的一、二、三这种序号无法通过这种方式实现

立即学习前端免费学习笔记(深入)”;

e、 图例

二、 显示省略符号来代表被修剪的文本

a、应用场景

这个场景,我想我不用描述大家都知道,要显示的内容较多时,如果不进行修剪,页面有可能会撑变形。

b、思考

其实我们以前总是喜欢通过程序,截断字符串,然后拼接省略号来展示。通常情况下,这个方式基本达到我们想要的结果。但是我们想有没有想过,假设我们在宽度为100px的div里,字符串只能展示10个汉字,那我们实现程序的时候,通过截取9个汉字+“…”来展示,当我们实际展示的字符串没有超过10个汉字,我们还不能拼接“…”。前面这个通过程序来逻辑来处理,是不是感觉很麻烦?更麻烦的情况是,把div的宽度调整到200px,那头疼的问题来了,修改程序的截取19个汉字。瞬间是不有点烦躁了?最麻烦的情况,现在来了,英文字母,“I”与“M”,他们10个“I”和10个“M”各自所占的宽度,相差甚远。我不再描述,我相信我讲这个英文字母的用意。

Mulan AI
Mulan AI

画布式AI视频创作平台,轻松制作爆款视频

下载

c、 学习

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

d、 注意

要想达到截取的效果,当前标签的宽度必须是固定的。否则可能达不到修剪的效果。

e、 图例

三、 后台

a、应用场景

这里我就用一幅图展示,就不过多的描述了。

b、思考

这个场景我们遇到的比较少,通常汉字根本出现这种情况,但是英语就会出现了,像上面的第二行,系统把它识别成一个单词,所以不给予强制换行。但是这个就跟我们想要的美观样式,就差的很远了。

c、 学习

http://www.w3school.com.cn/cssref/pr_word-break.asp

d、 注意

在中文范围内基本不用考虑这个问题,英文单个单词超长,才会出现这样的问题。这个问题是我们测试部倒腾出来的,是希望大家能注意到有这么回事。

e、 图例

总结:这个话题,主要是出于两个目的,一是,希望大家能回头看看已经学过的知识,我是不是有些遗漏了,或者当时认识还不够深刻;二是,希望大家往前看看,有没有更好的办法代替原来笨拙的实现方式。上面写的内容,其实算是旧东西,但是很多攻城狮还是采取老的方式实现。所以这里只是起一个抛砖引玉的作用,希望大家能掌握新的知识把原来老旧的知识给替换掉,同时也要能够对过往进行回眸。

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

42

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

46

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

202

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

341

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

16

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

100

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

75

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

67

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3-瞬间提升网页逼格的利器
CSS3-瞬间提升网页逼格的利器

共56课时 | 17.1万人学习

PHP进阶篇-函数视频教程
PHP进阶篇-函数视频教程

共12课时 | 2.2万人学习

兄弟连张诚Bootstrap视频教程
兄弟连张诚Bootstrap视频教程

共21课时 | 4.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号