CSS
文章平均质量分 67
laoyouzhazi
这个作者很懒,什么都没留下…
展开
-
HTML + CSS: 实现Tab导航栏(一)
前几天想写个Tab导航栏,在搜索引擎搜到C站一位bz的文章(注1)。代码虽短小,觉得有些意思,稍微修葺完成一个简单的Tab导航栏。基本原理是使用radio类型的input标签的属性选择器来修改不同状态tab标签的style样式和内容模块的z-index属性,从而实现tab标签的状态转换和内容显示。不得不说,CSS选择器2真的很强大。适当的使用就可以精简很多不必要的代码。当然配合使用Javascript提升用户体验也是不错的选择。为了简化说明,这里没有提及Javascript代码。......原创 2022-07-29 08:00:00 · 2413 阅读 · 0 评论 -
CSS span单行长标题省略显示示例代码
span的CSS代码:.item .item-title{ width: 166px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;}将代码中的display属性修改为:inline-block:.item .item-title{ width: 166px; font-s..原创 2021-05-14 12:46:25 · 482 阅读 · 0 评论 -
一起来种菜吧(一)
最近心血来潮弄了个蔬菜(瓜果)采收管理应用。 在Windows操作系统上,采用Django搭建Web服务器中间件。前端使用VUE的示例部分CSS。命令行窗口输入以下命令创建web站点,生成基本的Django配置文件:>django-admin startproject mysitemysite/ manage.py mysite/ __init__.py settings.py urls.py asgi.原创 2021-03-20 22:16:10 · 184 阅读 · 0 评论 -
HTML + CSS 如何使图片居中(Webkit)
手动设置标签的尺寸,可以较轻松实现目标的位置定位。比如通过width、height、margin和padding的具体数值限定或绝对定位。在不确切知道图片大小的情况下,使图片自适应完全居中是一个难点。完全居中是指水平和垂直同时居中。一、设置标签的margin属性为auto这是最简单的一种方法。将img标签的的style设置为: margin:auto;<html><head><meta name="viewport" content="width=device-原创 2020-10-30 21:50:55 · 9054 阅读 · 0 评论 -
Bug:Javascript调整HTML CSS引起“可怕”的页面抖动
曾经浏览过某在线视频网站,发现某页面下拉后出现明显的“上下抖动”的现象。使用工具查看HTML DOM元素和源码,发现了一些端倪。HTML变化前:变化前HTML变化后:变化后稍微检查元素后,发现是一个header标签发生改变:class属性不断循环在两个固定值之间切换。很明显,这应该是某些Javascript脚本引起的。查看网页源代码,查找该id的标签没有找到相关脚本。又逐个查阅远程javascript脚本源码。最终发现问题的关联。相关id标签关联的javascript脚本.原创 2020-07-04 21:18:43 · 740 阅读 · 0 评论