CSS
张子溪
前端工程师
展开
-
关于 a 标签 hover 状态样式不生效的问题
今天在做页面的时候,需要做一个默认 a 标签文字的颜色,然后当 hover 的时候,a 标签文字的颜色进行一个变化。举例来说,默认的样式写的时候,用的是 a:link { color: blue };当 hover 的时候,写的样式是 a:hover { color: red };后来发现,hover 的时候样式没有生效。之后去搜网页查找了没有生效的原因,大部分的都是描述的是因为 a 标签的 4 种状态写的顺序不对引起的,即 LOVE HATE 原则:a:link ...原创 2021-04-02 14:29:30 · 3356 阅读 · 0 评论 -
解决实现伪元素的 hover 效果的问题:
例如,当有一个元素上面有一个伪元素时,像给这个伪元素设置一个 hover 效果,当该伪元素 hover 时,才显示该伪元素。元素:li { background: red;}li:after { border: 1px solid blue; }这个时候,先在该伪元素所在的元素上加上 hover,然后在 hover 后面加上 :after 即可。例如,接着上面例子中的代码,继续写如下代码:li:hover:after { ...原创 2021-03-30 16:30:55 · 2930 阅读 · 0 评论 -
解决在 CSS 中,如何实现动态吸顶的样式/效果 ?
解决方法:使用 position: sticky 做了一个动态吸顶的效果:举例如下:1 未向上滚动页面之前:2 向上滚动页面之后:这样, “This is tab main”部分的元素,可以一直保持在页面窗口的顶部。3 具体代码:这个使用的代码其实就是 position: sticky, top: xx (阀值)来实现的:给想要实现吸顶效果的元素加上这两个属性即可。参考:http://www.ruanyife...原创 2021-03-09 14:39:12 · 787 阅读 · 0 评论 -
解决 input 元素点击有蓝色边框的问题
** 问题描述 **:使用 input 标签画了一个搜索框的元素,但是点击的时候有蓝色边框出现。** 分析 **:应该使用边框相关的样式来解决。** 解决 **:使用 outline: none 的样式解决问题。outline,即元素轮廓。...原创 2021-01-12 21:20:14 · 1233 阅读 · 0 评论 -
关于CSS中,引入背景图片和border的一点总结
1. CSS中,引入背景图片要使用url();方法,括号里面是图片的相对路径或者绝对路径。 2. 使用border属性时,不能只是设置border的宽度,而是要连样式一起设置。border属性的值一共有三个:宽度、样式、颜色,如果只是设置了宽度,那么边框是看不到的。例如:原创 2016-12-30 21:47:06 · 3683 阅读 · 0 评论 -
CSS布局小结
在制作页面的过程中,给页面进行排版是一项非常重要的工作,通常也是制作页面的第一步。那么,排版的时候首先要考虑的就是页面的大致布局是什么样子,做到胸有成竹,这样制作起来也就很快了。页面的布局通常有哪几种呢?从大方向来说,可以看作是三类:单列布局,两列布局和三列布局。下面说说大概的思路,会设计到一些主要的代码,但是不会特别详细,本文主要强调思路以及思维框架。非常细节和完整的代码请看结尾参考资料。...原创 2019-08-28 21:21:10 · 141 阅读 · 0 评论