随笔分类 - css
摘要：先来看看效果 一个简单的效果实现，本例使用vue实现： <template> <div class="menu" :class="{ 'menu-select': isMenu }" @click="setMenu"></div> </template> <script> import { reac
阅读全文
摘要：我们在项目开发中，可能会遇到图片服务器宕机，图片显示异常，页面相当不雅严重影响客户体验。下面记录一下在项目中的解决方案： 在书写HTML页面的时候，给图片添加一个错误类： <img src="xxx.png" alt="图片显示错误" onerror="this.classList.add('err
阅读全文
摘要：在实际开发中都是通过border来设置边框，但是会发现就算是最小的边框也还是有点宽，因此通过一下两个方法可以实现细边框 。 细边框： border设置的边框 1.在标签中实现 .light-line { width:200%; height:1rpx; transform-origin:0 0; t
阅读全文
摘要：简单写下样式： <div class="subject-cont"> <div class="subject-block"> <div v-for='(item, index) in ["语文", "数学", "英语", "物理", "化学", "生物", "体育"]' :key="index">{
阅读全文
摘要：a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
阅读全文
摘要：实现效果图如下： 通过css3样式实现（部分代码）： 在实际中会遇到list列表对3取余剩2的情况，页面就不是我们想要的了 我们想实现的是最后的一个靠左，这时候需要借助一个盒子，内容为空，边框颜色为背景色，代码如下： 需要注意的是，在list对3取余剩1和0的时候是不需要的，因此需要添加判断 结果如
阅读全文
摘要：思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式； 2. 然后把真正的单选按钮隐藏起来； 3. 最后把生成内容美化一下。 解决方法： 1. 一段简单的结构代码： 2. 生成一个伪元素，作为美化版的单选按钮，先给伪元素添加一些样式： 注：可以通过mar
阅读全文
摘要：使用很简单，一个普通的block元素上加个contenteditable="true"就ok了，如下： <div contenteditable="true"></div> true外面的引号甚至去掉都没关系。 contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签
阅读全文
摘要：H5提供了一个属性 contenteditable ，使得div充当文本输入不再是梦想 以下是div实现文本输入的简单demo css样式 在vue中如何获取div中的内容 然后在 methods 中获取就好啦
阅读全文
摘要：最近要开发一个类似星河的效果，需要小圆绕着一定的轨迹运动，这个时候我首先想到的是使用canvas来实现，在实现过程中发现这个实现起来不是很灵活，然后想到css3有动画也可以实现，下面是效果 注：图2是多个的效果，没有代码 html css
阅读全文
摘要：<div class="top"></div> css实现上箭头 .top { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom:
阅读全文
摘要：产品需求：想在鼠标移动到“移除”的时候，“1.产品匹配测试”添加下划线和更改字体颜色 需求分析：从需求可以看出使用 :hover 就可以解决的问题，但是在实践中发现兄弟选择器（+）不好使，（+）只能是之后的，那如果想要访问当前元素（假设为a）的前一个节点（假设为b）就不能了 解决思路：对于相邻节点少
阅读全文
摘要：1. 强制一行的情况很简单 2. 如果要强制两行的话，得用到css3的知识 在实际项目中，我们会发现-webkit-box-orient没有生效，需要加入如下注释 最终代码： 3.扩展：小程序使用textarea，弹窗使用cover-view，在cover-view中使用文字超出一行显示省略号，会出
阅读全文
摘要：1.毛玻璃效果：背景图 + 伪类 + flite:blur(3px) 2.半透明效果：背景图 + 定位 + background:rgba(255,255,255,0.3) 原文链接：https://blog.csdn.net/hj7jay/article/details/73480609
阅读全文
摘要：高度坍塌情况： 当父元素没有设置高度，且子元素块都向左（右）浮动起来，那么父元素就会出现坍塌的现象。 解决办法： 在父元素包含块中加一个div： 优点：兼容性强，适合初学者。 缺点：不利于优化。 方法二：overflow＋room 优点：兼容性强。 缺点：对margin属性有影响，不能设负值，设负值
阅读全文