![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
_小郑有点困了
我的月亮永悬不落。
展开
-
scss全局变量,主题色
scss文件/*需要切换的颜色变量*/$color-theme1:red; /* 更换的颜色 */$color-theme2:orange; /* 更换的颜色 */$color-theme3:green; /* 更换的颜色 */$color-theme4:blue; /* 更换的颜色 *//*定义方法*/@mixin color_primary($color){ color:$color; /*判断匹配*/ [data-theme="primary1"] & {原创 2020-11-27 15:10:06 · 2254 阅读 · 0 评论 -
练习flex布局
联系flex布局头部样式,使用flex,两边有宽,中间flex:1,占满剩余1,效果2,html3,css宫格样式,有两种实现方式:效果:1,使用table,table-cell,外层盒子display:table;里层元素,display:table-cell,宽度百分比,左浮动1.1html1.2css2,使用flex布局,外层盒子display: flex; ...原创 2020-04-05 13:09:58 · 797 阅读 · 0 评论 -
复习bootstrap
复习bootstrap1,一个简单的媒体查询,不同屏幕宽度不同背景颜色,and前后加空格,有向上兼容、向下覆盖等特性 body{ background: #ff6767; } /* 宽度小于768 当亲屏幕最大值为768 需要小于768*/ @media screen and (max-width:7...原创 2020-04-30 21:27:12 · 196 阅读 · 0 评论 -
css图片宽高自适应盒子(宽>高就限制宽,高>宽就限制高)
效果图:宽>高就限制宽 即宽度100% ,高度自动。例如:19201088高>宽就限制高 即高度100%,宽度自动。例如:19442592很多时候图片宽高比不固定,而且作为一个前端,最好不要去写死图片的宽高。会给自己找麻烦。html:<div class="boxs"> <div class="devices-box"> <div class="image-box"> <img src="./car.原创 2021-05-27 11:51:32 · 2966 阅读 · 0 评论 -
css修改input复选框的样式
css修改input复选框的样式效果图:html:<input id="remember" checked="checked" name="rememberme" type="checkbox" value="t"/><span>记住密码</span>css:input { width: 16px; height: 16px; margin: 2px 5px 0 0; background: transparent; border:1p原创 2021-05-11 17:30:35 · 504 阅读 · 0 评论 -
点击密码input框禁止浏览器弹出已经记录的账号密码
博客搜到好多autocomplete="new-password"或者autocomplete=“off”,还有加一个display:none的input的框,根本不管用,这样才可以,type得是text,是password依然还会弹出 <input type="text" style="text-security:disc; -webkit-text-security:disc;"/>...原创 2021-02-25 10:03:38 · 6337 阅读 · 12 评论 -
css一些渐变线条以及边框
css一些渐变线条以及边框border-image有五个参数设置,依次为 图片路径,边框向内偏移,边框宽度,border-image:linear-gradient(to top right,#000718,#23b7cb) 20 50; 边框从左下到右上渐变注意问题:border-image的使用是不能实现圆角的效果,各位需要注意这个属性圆角渐变利用伪类,元素背景色透明或于背景色一体 从左到右或左下到右上background: linear-gradient(135deg,#000781,原创 2021-01-18 17:07:40 · 2815 阅读 · 0 评论 -
css优化pc滚动条样式
当pc界面出现了不该出现的滚动条的时候,不可避免,那就自定义一下自定义之前:自定义之后:代码:加在产生滚动条的盒子/deep/ .el-card__header + .el-card__body{ &::-webkit-scrollbar { width: 7px; height: 10px; } &::-webkit-scrollbar-track-piece { background-color: transpare原创 2020-12-25 14:55:46 · 384 阅读 · 0 评论 -
css文本溢出,强制换行,不换行
强制换行 word-break: break-all;不还行 word-break:keep-all;文本溢出overflow: hidden;text-overflow: ellipsis;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical原创 2020-11-27 15:34:38 · 1806 阅读 · 0 评论 -
ios input默认样式问题
input在ios上会显示有内阴影以及边框等东西解决方法:input[type=“text”], input[type=“button”], input[type=“submit”], input[type=“reset”], select, textarea,button {-webkit-appearance: none;}input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 100px white inset;}对于小程序、uniapp原创 2020-11-27 15:13:27 · 924 阅读 · 0 评论 -
css绘图(三):教你用css绘制一个qq企鹅!
教你用css绘制一个qq企鹅!效果如下:盒子身体部分代码如下:对应的样式如下:#wrap{width: 116px;height: 130px;background: white;margin: 100px auto;border: 1px solid green;position: relative;}#wrap .head{width: 76px;height:...原创 2019-07-25 19:50:56 · 309 阅读 · 0 评论 -
css绘图(二):教你用css绘制一个大白!
教你用css绘制一个大白不用ps,用css就可以绘制一个动漫形象。如图:其实很简单,就是一些盒子的堆叠,以及盒子的层级关系。(本人绘制的稍微有点简陋,见笑)盒子身体部分代码如下:对应身体的样式为:body{background: gray;}.head{width:200px;height:120px;background: white;margin:0 auto;...原创 2019-07-25 19:44:48 · 369 阅读 · 0 评论 -
css绘图(上):教你用CSS做一个吃豆人!!!
教你用CSS做一个吃豆人!!!不用ps,就用css绘制一个图形。如图:其实很简单,设置一个盒子的宽高为零,然后设置他周围的外边框的像素为合适的值,然后再用圆角让他变成一个圆,再然后设置左边框为透明属性,就可以得到如图。代码如下:...原创 2019-07-25 19:37:40 · 873 阅读 · 0 评论 -
想要设置hover悬停切换背景图片吗?
想要设置hover悬停切换背景图片吗?前提是你已经在div里面用background-image:url();设置了背景图片而后用hover悬停之后在里面再设置另外一张图片路径例如...原创 2019-04-25 16:59:56 · 2486 阅读 · 0 评论 -
你还在苦于hover悬停之后无法选中吗?
对于悬停选中的一个小符号那就是“~”很多时候你的悬停设置完hover之后无法生效吗?那你可能少了个不太起眼的小符号哦“~”原创 2019-04-25 16:54:44 · 652 阅读 · 0 评论 -
清除自带样式
清除自带样式公共的放在外面,最外层清除自带样式利用:*(margin:0;padding:0;)原创 2019-04-09 21:37:54 · 265 阅读 · 0 评论 -
父元素子元素选择
父元素子元素选择定义时:例如:父元素的class与子元素class连“.”关系“>”大于号代表的是子代;“ ”空格代表后代。原创 2019-04-09 21:41:43 · 791 阅读 · 0 评论 -
HTML的块级元素和行内元素
HTML的块级元素原创 2019-04-09 21:46:37 · 70 阅读 · 0 评论 -
HTML的块级元素和行内元素
行内样式原创 2019-04-09 21:47:17 · 74 阅读 · 0 评论 -
HTML的块级元素和行内元素
行内元素和块级元素的特点及转化原创 2019-04-09 21:48:22 · 106 阅读 · 0 评论 -
一个初学者用css做的轮播图
一个初学者用css做的轮播图如果你也像我一样,是刚刚入门前端的初学者,而且只学了css,或者说觉得js太难,想用css实现一个轮播图,那就看看我的这个吧。大致意思就是,你先设置这个图片的定位,给他一个初始位置,然后再设置动画,设置他移动的像素大小即可。代码如下...原创 2019-04-28 17:59:38 · 444 阅读 · 0 评论 -
设置一个标签的抖动
设置一个标签的抖动我设置的是一个当你悬停这个图片,他就会抖动的样式(根据需要你也可以设置其他的标签)你需要给他一个初始的位置例如然后再设置悬停调用和动画...原创 2019-04-28 18:04:54 · 199 阅读 · 0 评论 -
从零学习js之(DOM语法事件监听)
从零学习js之(DOM语法事件监听)例子:比如你设置了一张照片和一些按钮,你想点击按钮让这个图片移动;你就需要给这个图片定位一个初始位置;然后js获取按钮和图片;在script里面你还需要var两个元素储存他们的初始的位置;然后设置点击函数;位置变化和显示变化后的位置;代码如下;...原创 2019-04-28 18:17:19 · 166 阅读 · 0 评论 -
你会做“小箭头”吗
你会做“小箭头”吗不会的话我教你!这是效果图和代码有了它你可以继续做一些悬停的效果等等。原创 2019-04-24 11:36:48 · 97 阅读 · 0 评论 -
当你想要“a”标签文字居中的时候
当你想要“a”标签文字居中的时候结果可能是差强人意的比如:你只设置了text-align:center;代码如下图一结果如图二可是达不到你想要的效果所以正确写法是这样代码如图三效果如图四因为text-align:center;只是水平居中line-height:height的值;才是垂直居中...原创 2019-04-25 16:46:54 · 1409 阅读 · 0 评论 -
如果你想div设置图片背景
如果你想div设置图片背景应该使用background-image:url();用background-repeat:no-repeat;设置平铺之类的用background-position:center;设置居中原创 2019-04-25 16:50:01 · 1030 阅读 · 0 评论 -
导航栏动画过渡
导航栏的动画过渡,以及兄弟关系的悬停,悬停在兄弟盒子上触发hover本盒子的transition原创 2019-04-09 21:34:40 · 1119 阅读 · 0 评论