CSS
CSS
1234Wu
日常写bug
展开
-
css模拟手机iphone14Pro
【代码】css模拟手机iphone14Pro。原创 2023-06-17 22:34:11 · 1239 阅读 · 0 评论 -
input输入框自动填充后默认样式修改
修改input自动填充样式原创 2022-06-01 09:48:28 · 588 阅读 · 0 评论 -
利用svg错落显示文本
错落显示文本:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用SVG错落显示文本中的每个文字</title> <style type="text/css"> text{ font-family:SimHei; /*定义字体*/ font-size:36px; /原创 2022-05-31 14:32:47 · 230 阅读 · 0 评论 -
css3动画--位移加阴影
animation: name duration timing-function delay iteration-count direction;值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间,以秒或毫秒计。animation-...原创 2019-04-02 11:47:00 · 314 阅读 · 0 评论 -
CSS文本超出2行就隐藏并且显示省略号
超出一行隐藏:overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?超出两行隐藏:css3解决了这个问题,解决方法如下:display:-webkit-box; //将对象...原创 2019-04-01 11:39:00 · 354 阅读 · 0 评论 -
offsetLeft 解析
前言:先看下w3c与之相关的介绍:element.offsetHeight返回元素的高度。element.offsetWidth返回元素的宽度。element.offsetLeft返回元素的水平偏移位置。element.offsetParent返回元素的偏移容器。element.offsetTop返回元素...原创 2019-04-08 19:27:00 · 301 阅读 · 0 评论 -
移动端布局那些事
1,移动端的常见开发方式: 响应式: 一套代码可以兼容移动端,pc端,pad端。所以说代码不会特别复杂,内容也不会特别的多,尤其是动画自适应:根据不同的设备去加载不同的代码,pad一套,pc一套,phone一套。最常见一种媒体查询: 百分比,写自适应的时候就不需要考虑太多,想要做的更细腻,就必须把媒体查询写的更细化.2,移动端的滑动事件(touc...原创 2019-04-09 00:27:00 · 101 阅读 · 0 评论 -
Bootstrap方法之--排版、代码
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c...原创 2019-01-06 20:31:00 · 178 阅读 · 0 评论 -
css炫酷动画收藏
1.按钮、hover、input动画(cssfx)https://cssfx.dev/2.svg 矢量定制icon(ikonate)https://www.ikonate.com/#content3.图片滤镜(Instagram.css) https://picturepan2.github.io/instagram....原创 2019-05-16 19:29:00 · 660 阅读 · 0 评论 -
jq手风琴效果
基本思路: 手风琴的效果主要取决于html文档的结构,不同的结构用到的jq方法可能是不同的。<div id="box"> <div class="navv">标题 <div>内容</div> </div> <div class="navv">标题 <di...原创 2018-12-26 16:39:00 · 224 阅读 · 0 评论 -
弹性盒子
Flex 布局教程:语法篇作者:阮一峰日期:2015年7月10日http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2019-08-13 15:50:00 · 104 阅读 · 0 评论 -
normalize.css
normalize.css收藏目前GitHub上比较火的一个样式重置的css原创 2019-09-30 16:33:05 · 148 阅读 · 0 评论 -
css渐变色兼容性写法
1 background: -webkit-linear-gradient(left, #0f0f0f, #0c0c0c, #272727);2 /* Safari 5.1 - 6.0 */3 background: -o-linear-gradient(left, #0f0f0f, #0c0c0c, #272727);4 ...原创 2019-08-28 20:17:00 · 515 阅读 · 0 评论 -
vue中搜索关键词,使文本标红
UserHead.vue中搜索框:<!-- 搜索 --> <el-col :span="6" :offset="8" class="search"> <el-input placeholder="请输入内容" v-model="inputvalue" class="input-with-select"> ...原创 2019-06-19 21:21:00 · 4440 阅读 · 0 评论 -
浅谈网页中的字体的设置
首先,我们应该明确,并不是你设置了这种字体,用户电脑便会以这种字体显示。如果用户电脑没有安装这种字体,那么它便会以你设置的第二种字体来渲染。而且由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?一、选...原创 2019-12-20 17:27:13 · 1332 阅读 · 1 评论 -
vue&vant移动端h5底部留白问题
不知道是,vue的原因还是vant的原因,html底部多了一截。每个页面背景不一样也不能给统一的background,给内容div负margin都盖不住这个html的空白。最后试了很多方法,曲线救国,在html最后加了个div就挡住空白了。虽然解决了,我也没搞清楚是什么原因,很奇葩。.bottom_bg { height: 3rem; width: 100%; backgrou...原创 2020-02-14 16:32:30 · 5249 阅读 · 1 评论 -
CSS3自定义滚动条样式
效果图:HTML:<div class="box"> <div class="transcrided_text"></div></div>CSS:.transcrided_text { margin: 0 0.5rem; font-size: 0.14rem; padding-bottom: 0.2rem; height: 1.62rem; overflow-y: scroll;}/*主要部分 -- 自定义样式*原创 2020-06-28 17:02:31 · 235 阅读 · 0 评论 -
web页面--前端明水印
采用canvas绘制图片,observe监听页面元素改变重新添加。<template> <div id="water_mater" ref="Watermakr"></div></template><script>export default { data() { return {} }, methods: { createWaterMark() { const { loginIp = '',原创 2022-04-07 00:41:11 · 566 阅读 · 0 评论 -
如何清除浮动(float)所带来的影响
清除浮动(float)1.定义和用法 在w3c中给了浮动这样的定义。 "float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素"。 如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。 注释:假如在一行之上只有极少的空间可供浮动元素...原创 2018-12-11 20:21:00 · 259 阅读 · 0 评论