CSS - 分享生活和学习中的点点滴滴

前端技术 2023/09/05 CSS

学习过程中经常遇到要居中的问题，水平居中问题比较好解决，而垂直居中问题因为vertical-align经常失效，所以不容易实现，今天将自己总结的一些方法归纳于这边。 1.div中单行文字垂直水平居中。条件：外层div高度已经给定。代码如下：复制代码代码如下: ...

CSS3中currentColor关键字的妙用

前端技术 2023/09/05 CSS

初识它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。下面是来自MDN的解释： currentColor代表了当前元素被应用上的color颜色值。使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。你这可以这么理解，CSS里你可以在任何需要写...

前端技术 2023/09/05 CSS

马上要到元旦了，小菜献上一款剽窃的box样式，祝大家端午快乐！此box样式以绿色为主要色调，清新自然，适合大多数设计场景。此box算是比较高级的了，box中的列表是图文列表，可以显示一张小图片，然后加上一个醒目的标题，再来一段简明的介绍，最后还有一个详情按钮，需求不是特别挑...

前端技术 2023/09/05 CSS

人生苦逼如我，上网找了老长时间的图片怎么全屏。就是不好使，最好发现原因：别人的图片都是够大，然后全屏，我的是图片大小太小，不能全屏。就上百度上搜：图片拉伸全屏。找到如下代码：背景图片自适应分辨率浏览器大小自动拉伸全屏代码复制代码代码如下: <!-- ...

前端技术 2023/09/05 CSS

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方...

前端技术 2023/09/05 CSS

今天要设计一个定位在图片上的标签，标签的背景要有一定的透明度，使用到了opacity的属性，过去没太注意这个属性的兼容性问题，结果采坑了。。。 1.完成后的效果完成前后的效果应该是这样的：　背景透明前 ...

用CSS3来实现社交分享按钮

前端技术 2023/09/05 CSS

以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons html代码如下复制代码代码如下:<div><ul><li> <a href=...

css截取字符串简单实例

前端技术 2023/09/05 CSS

复制代码代码如下: <html> <head> <meta charset=\"utf-8\"/> <title>css截取字符串</title> <style type=\"text/css\"> li ...

前端技术 2023/09/05 CSS

text-shadow 语法 CSS Code复制内容到剪贴板 text-shadow: h-shadow v-shadow blur color; 实例基础的文本阴影效果： CSS Code复制内容到剪贴板 { text-shadow: ...

前端技术 2023/09/05 CSS

由于不同浏览器所遵循的标准也有所不同，再加上不可避免的程序bug、经济利益等因素的干扰。同样的网页代码(HTML + CSS)，在不同浏览器上的显示效果却略有不同，甚至大有不同。即使是同一个浏览器，其不同版本的显示效果也有所不同，尤其是IE。这就给网页前端设计人员带来了很大的困...

关闭

我的博客