前端

网页前端与用户交互密切相关,熟练html/css对网站优化有着至关重要的作用,本栏目分享一些关于html/css修改优化的教程和技巧

右侧固定宽度,左侧自适应两栏布局

1年前 (2023-02-18) 91浏览

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是...

js实现内容超出一定高度后折叠 点击展开收起

1年前 (2022-11-14) 273浏览

200px以外的部分内容被隐藏,底部显示蒙版图层和查看全文按钮。类似的效果请见csdn的博客内容页。#渐变{宽度:100%;高度:50px位置:绝对;底部:0;左:0;背景:-moz-linear-gradient;背景:-WebKit-gradie...

css3怎么实现文字闪烁效果

1年前 (2022-11-09) 208浏览

如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。

JavaScript实现选项卡切换效果

1年前 (2022-11-04) 176浏览

我一直比较喜欢可以切换的标签页,也就是说在同一个位置可以容纳多个容器,也就是可以容纳更多的内容,没有冗余。我认为这是一个不影响用户体验的可扩展SEO项。网上看如何实现,转载参考。//指定DOM元素类名的方法。单击它以添加活动的

纯css实现轮播和点击切换效果(无JS)

1年前 (2022-11-04) 176浏览

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的...

@media先后顺序错误导致效果被覆盖

2年前 (2022-09-24) 217浏览

自己博客“推荐阅读”板块在前面添加了一个小背景图的样式,仿造的是原主题“与本文相关的文章”。同时也想让样式在移动端也保持一致,即使用媒体查询@media设置样式。但是却一直没有生效。一起来看看是怎么回事吧 原因 @media是对条件才查询,但是它也遵...

CSS实现聊天对话框样式

CSS实现聊天对话框样式

2年前 (2022-09-24) 376浏览

最近打算折腾一下网站的问答分类,所以在网上找了一个css实现对话框的效果,具体效果如下图: CSS代码 #talk { margin-left: 50px; width: 220px; height: 60px; background: #9EEA6...

CSS选择器排除某些指定的class

2年前 (2022-09-20) 323浏览

昨天给网站引入了JS目录,但是工具中的图标和原本网站的有冲突,需要[class^="icon-"], [class*=" icon-"] {}对个别图标进行排除,那么该怎么做呢? 实现 使用:not() 选择器 [class*="icon-"]:no...

AutocJs:生成文章目录JavaScript脚本工具

2年前 (2022-09-20) 297浏览

AutocJs 是一个专门用来生成文章导读(Table of Contents)导航的 JavaScript 工具(原 autocjs 的重构版本)。AutocJs 采用原生 JavaScript 编写,不依赖任何第三方 JavaScript 库。A...