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

现在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”各自所占的宽度,相差甚远。我不再描述,我相信我讲这个英文字母的用意。

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、 图例

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

时间: 2024-10-25 20:01:30

如果css足够强大了,你还会用编程的方式实现去实现css已有的功能吗?的相关文章

年龄大了还可以学习编程吗

在编程的道路上,总是能遇到那些很有天分并异常努力的程序员.他们不仅编程能力强,而且总是在他们的访谈或者博客里看到,从小就开始学习编程,在非常年轻的时候就已经成绩斐然.这让在大学才开始学习编程的我压力非常大,时常假设如果自己小时候就开始学习编程,想必现在也是走上了人生巅峰.可人生没有假设,现实也不会欺骗你,你还是你,没有丝毫改变.     当我认清现实,认为自己这辈子也不可能超越那些比你先学习编程,并且异常努力的家伙时候.一些疯狂的家伙又重重的敲醒了我.人生为啥非要和别人比个高低,自己去做喜欢的事

年龄大了还能够学习编程吗

在编程的道路上,总是能遇到那些很有天分并异常努力的程序猿.他们不仅编程能力强,并且总是在他们的訪谈或者博客里看到,从小就開始学习编程,在很年轻的时候就已经成绩斐然.这让在大学才開始学习编程的我压力很大,时常如果如果自己小时候就開始学习编程,想必如今也是走上了人生巅峰.可人生没有如果,现实也不会欺骗你,你还是你,没有丝毫改变.     当我认清现实,觉得自己这辈子也不可能超越那些比你先学习编程,并且异常努力的家伙时候.一些疯狂的家伙又重重的敲醒了我.人生为啥非要和别人比个高低,自己去做喜欢的事情,

华为海思不畏风浪!因为我们已经足够强!!

在当地时间15日,美国总统特朗普签署行政命令要求美国进入紧急状态,紧接着在16日晚上,超级大国不留情地中断全球合作的技术与产业体系,做出了疯狂的决定.在毫无理由的情况下,华为被列入了美国商务部工业和安全局的实体名单. 面对美国的封杀和打压,华为海思总裁就华为被列入美国商务部工业和安全局(BIS)的实体名单一事,致信员工:多年备胎一夜转"正",今后要科技自立! 美国商务部工业与安全局(BIS)将华为列入所谓"实体清单"的决定,是美国政府出于政治目的持续打压华为的最新一

web前端入门到实战:CSS不定宽高的垂直水平居中,9 种方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及.所以,今天我们就来聊聊 9 种不同的居中方法. 有常见的 flex.transform.absolute 等等.也有 CSS3 的网格布局.还有伪元素的方法,是的,你没有看错,::after 和 ::before 也可以实现居中. 1.flex 大家的第一反应,可能就是 flex 了.因为它的写法够简单直观,兼容性也没什么问题.是手机端居中方式的首选. <div class="wrapper flex-center&q

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

到了50岁你还愿意做编程工作吗

你真的愿意到了50岁还要做编程吗? “大规模.高强度的编程?我必须承认,这是年轻人的游戏.” http://www.aqee.net/yes-i-still-want-to-be-doing-this-at-56/不,这是傻子们的游戏(大部分都是男性,但不是100%).我今年55岁,从1981年开始就从事编程这个行业,如果从学校里算起,那是开始于1973年.我真真切切的认识到的一件事是,编程到死是值得的. 若问我到了55岁还要做编程吗?我的回答是:Yes.我仍然会喜欢编程中的各种挑战,解决复杂的

零基础学编程:零基础学HTML+CSS (第3版) 完整pdf扫描版

零基础学编程:零基础学HTML+CSS(第3版)站在零基础学习的角度,以通俗易懂的语言,结合丰富多彩的实例,来帮助初学者学习和掌握HTML语言和CSS样式设计.本书列举了大量的小型实例.综合实例,并包含3个项目案例,内容详尽.实例丰富.叙述清晰.本书主要分为四篇:第一篇为第1-9章,讲解了网页文字.字体.表格.段落.超级链接.图像.表单.框架.多媒体等技术:第二篇为第10-11章,对DIV+CSS的语法和相关属性进行了详细的解释和说明:第三篇为第12~20章,详细介绍了CSS的字体.文本.背景.

2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用

原文:2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用 title author date CreateTime categories 加强版在国内分发 UWP 应用正确方式 通过win32安装UWP应用 lindexi 2019-11-25 08:57:35 +0800 2019-11-25 08:57:35 +0800 UWP 几乎所有国内的 UWP 开发者都知道,在国内开发 UWP 应用最大的问题不在于那么多系统的适配和不断修改的 API 接口,而

国珍竹珍沐浴露14大神奇功能,太强大了,必看!

润滑拉链 假如某天你穿裤子突然觉得拉链拉不上去,卡卡的,这时你老婆直接在你拉链上挤点沐浴露,请不要误会,好么?这只是因为拉链卡住了,滴一滴竹珍沐浴露到卡住的位置再拉,问题就解决了. 润滑剃须刀 如果剃须膏突然没了,可以用洗发水,只要加点水,摇出泡沫就可以用了.竹珍沐浴露的泡沫不仅比肥皂多,而且还不像肥皂那么干哦.同样,姐妹们在剃腿毛的时候,也可以这样试试. 润滑胶带 身上的胶带或贴在墙上的胶带扯不下来了,强行扯,一疼二容易留痕迹,这时滴几滴竹珍沐浴露到胶带上,等它渗下去,再轻轻一拉,胶带就撕下来