![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
嘿是我呀
一只前端打字员——风雨多经志弥坚,关山初度路尤长。
展开
-
css常用样式
设置超过宽度省略号: text-overflow: ellipsis; white-space:nowrap; overflow:hidden;下划线: content: ""; width: 94%; height: 1px; border-bottom: 1px solid #ccc; position: absolute; transform: scaleY(0.5); left: 3%;原创 2020-08-22 09:41:34 · 167 阅读 · 0 评论 -
animation + text-shadow + box-shadow
@keyframes myfirst{ from {background: red;} to {background: yellow;}}div{ animation: myfirst .5s 1 ease 0s;}text-shadow: 0 0 5px #000;四周阴影原创 2020-08-27 11:07:07 · 152 阅读 · 1 评论 -
css实现三角形
.sanjiao { position: absolute; right: 0px; top: 0px; width: 0px; height: 0px; border-top:35px solid #d32f27; border-left: 35px solid transparent;}<div class="sanjiao"></div>原创 2020-08-22 09:42:18 · 724 阅读 · 1 评论 -
flex布局
原创 2020-08-23 22:17:04 · 61 阅读 · 0 评论 -
滚动条样式
ScrollBars用来设置滚动条模式, 有四种选择:ScrollBars.None (无滚动条),ScrollBars.Horizontal(水平滚动条),ScrollBars.Vertical(垂直滚动条),ScrollBars.Both(水平和垂直滚动条)注意:只有当MultiLine属性为true时,该属性值才有效。在WordWrap属性值为true时, 水平滚动条将不起作用大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,这里和大家分享一原创 2020-08-23 22:14:17 · 11901 阅读 · 0 评论 -
rem适配
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) retu原创 2020-08-23 22:14:37 · 183 阅读 · 1 评论 -
uview-ui项目暗黑模式(笔记)
1、main.jsimport mixin from '@/common/js/setTheme.js'Vue.use(mixin)// import {getTheme} from '@/common/js/setTheme.js';// Vue.prototype.$theme = getTheme;2、App.vue//监听系统主题变化onThemeChange(e){ this.getTheme()},3、setTheme.jsimport { isEmpty} fro原创 2021-03-02 17:36:21 · 1681 阅读 · 0 评论 -
html+css 实现 熊猫样式
样式实现原创 2023-03-06 16:17:00 · 4078 阅读 · 0 评论 -
网站颜色整体变灰
网站变灰原创 2023-02-13 11:52:14 · 157 阅读 · 0 评论 -
vue项目设置多套主题色
公司移动端项目需要设置多套主题色,后端配置使用哪套移动端显示对应主题色,实现思路为:写对应套数的样式文件,根据接口返回的设置值选用对应样式主题。1、App文件中进行判断引入主题文件,App.vue:<script> export default { data() { return {} }, onLaunch: function() { console.log('App Launch') }, onShow: function() { //接口原创 2021-06-30 10:34:14 · 2362 阅读 · 0 评论 -
高度塌陷解决方法
如果父元素只包含浮动元素,且父元素未设置高度和宽度,那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”。如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”问题的方法:1.浮动父级元素,父级元素的高度就会扩大,直到完全包含它里面的浮动元素。如果使用这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。2.使用overflow:hidden,zoom:1 。overflow:hidden属性会强制父级元素扩大到包含浮动元素,zo转载 2020-08-20 12:21:19 · 126 阅读 · 0 评论 -
表单title文字两端对齐(2、3、4个字都对齐)
表单title文字两端对齐(2、3、4个字都对齐) <style type="text/css"> .word1{ letter-spacing:2em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */ margin-right:-2em; /*同上*/ } .word2{ letter-spacing:0.5em; /原创 2020-08-19 09:36:55 · 1261 阅读 · 1 评论