css
关注
分享
扫一扫
dae bal
随记
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
防止图片变形以及让video宽度全屏的属性
object-fit: cover;原创 2022-05-07 17:43:06 · 753 阅读 · 0 评论 -
整理css（三）动态效果样式
方式一：html<figure> <h6 class="hr demo-hr"><span>标题水平线</span></h6> <div class="hr align-center demo-hr"><span>分隔水平线</span></div> </figure>css.hr { margin: 1em 0 1.5em 0; backg.原创 2022-04-11 17:54:47 · 639 阅读 · 0 评论 -
自适应表格(标签更规范)
图示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="/templates/Tpl/js/pintuer/pintuer.css">原创 2021-08-02 15:23:28 · 177 阅读 · 0 评论 -
登录注册页面
图示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录系统</title> <script src="/LinkPHP/Tpl/Home/Default/Public/pintuer原创 2021-08-02 15:16:15 · 1146 阅读 · 0 评论 -
在任意网站复制内容，粘贴到这个网站，会给出所复制内容的 CSS 样式代码
网址：https://renzhezhilu.gitee.io/kakacss/原创 2021-07-21 14:15:38 · 269 阅读 · 0 评论 -
HTML技巧
参考网址：https://markodenic.com/html-tips/原创 2021-06-22 16:25:53 · 136 阅读 · 0 评论 -
transition transform属性造成文字抖动及模糊的解决方法
百度说这样做：在该动画的transform里加上translateZ(0)值, 能解决文字抖动的问题，但是没解决文字模糊的问题。在发生文字模糊的地方加上transform: translate3d(0,0,0)，解决文字模糊以及的问题。最后，我还是用定位实现了原本的效果：替换成了：.new14 .ui_mid3{position: absolute;top: 0;height: 100%;transition: all .5s ease;}.new14 .ui_mid3:hover {to原创 2021-06-22 16:09:24 · 2176 阅读 · 0 评论 -
用iframe嵌入另外一个页面
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #anli{position: absolute;top:0;}原创 2021-05-18 17:12:15 · 1126 阅读 · 0 评论 -
给auto的图片用伪元素设置一个遮罩层
主要：给img标签用div包裹住，div转成行内块元素，最后使用伪元素定位加一个遮罩层；代码：<style type="text/css"> .basictext4 img{width: auto;display: block;margin: 0 auto;} .basictext4 .wrap{text-align: center;} .basictext4 .wrap .pic_img{display: inline-block;} .basictext4 .wrap .pic_原创 2021-04-21 15:06:23 · 333 阅读 · 1 评论 -
swiper轮播的双向绑定实例
一对一类型：<style> .index-product13 .swiper-container{position: relative;} .index-product13 .swiper-button-next,.index-product13 .swiper-button-prev{background-image: none;position: absolute;top: 50%;transform: translateY(-50%);-webkit-transfo...原创 2021-04-01 16:20:28 · 988 阅读 · 2 评论 -
css3@keyframes的使用
样式一：.news-demo13 .mlist .item_img:hover img{position:relative;animation: fls 0.5s;-webkit-animation: fls 0.5s;} @keyframes fls {0% {bottom: 0px;}50% {bottom: 10px;}100% {bottom: 0px;}} @-moz-keyframes fls {0% {bottom: 0px;}50% {bottom: 10px;}100% {b原创 2021-01-23 17:54:21 · 282 阅读 · 0 评论 -
css——文字竖行排列的样式
竖向排列：writing-mode: vertical-rl;竖向里面设置数字横向排列：text-combine-upright: all;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></t.原创 2020-12-11 10:37:25 · 1078 阅读 · 0 评论 -
CSS3中transition和transform的区别
属性 含义 animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属性 transition（过渡） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” translate（移动） translate只是transform的一个属性值，即移动。 ...原创 2020-12-08 09:30:07 · 1288 阅读 · 0 评论 -
图片弹出放大
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片弹窗</title> <style> /* 触发弹窗图片的样式 */ #myImg ..原创 2020-12-04 16:59:59 · 350 阅读 · 0 评论 -
遮罩层随鼠标方向移动的效果
写法一：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>遮罩层随鼠标方向移动</title> <script src="./jquery-3.2.1.min.js"></.原创 2020-12-04 14:24:00 · 439 阅读 · 0 评论 -
整理css（二）动态效果样式
样式一：触摸，线朝两端拉长#newslist .newstitem .newsbody .date:after { content: ''; display: block; width: 10%; height: 2px; background: #4a4a4a; position: absolute; left: 0; top: -16px; transition: all 0.6s cubic-bezier(0.215, 0.原创 2020-11-23 14:19:23 · 2977 阅读 · 0 评论 -
grid布局
默认情况下，容器元素都是块级元素(display: grid;)，但也可以设成行内元素(display: inline-grid;)。grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;上面定义了三行三列，列宽和行高都是100px。还可以使用百分比来写。grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33转载 2020-11-04 17:29:02 · 310 阅读 · 0 评论 -
图片加载异常占位处理实例页面
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> img { width: 128px; heig.原创 2020-11-04 11:20:35 · 495 阅读 · 0 评论 -
KakaCSS——快速生成Css样式
网址：https://renzhezhilu.gitee.io/kakacss/原创 2020-10-23 17:40:26 · 766 阅读 · 0 评论 -
CSS——触摸图片翻转
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><style>.CICmenuBox{width: 1100px;display: flex;align-items: center;justify-content: center;transform: translate3d(.原创 2020-10-12 10:00:43 · 406 阅读 · 0 评论 -
css美化半个字符的示例
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> .halfStyle { position:relative; d.原创 2020-09-29 18:09:24 · 132 阅读 · 0 评论 -
设置单行省略的时候在搜狗浏览器里面导致页面布局紊乱
产品排不上去换成 这样就好了：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;原创 2020-09-25 17:07:18 · 207 阅读 · 0 评论 -
css不常见的伪类
::first-line| 选择文本的第一行；::first-letter | 选择这一行的第一字；:root| 根元素；:only-child| 只有一个子元素才有作用；原创 2020-09-16 15:46:14 · 135 阅读 · 0 评论 -
整理css（一）：背景图可滚动样式等
一：背景可滚动样式html<div class="intro-box" style="background-image: url(图片地址);"> <h2>标题</h2> <p>内容</p> <a href="" class="btn-info">VIEW ALL</a></div>css.intro-box{background-size: cover;background-att.原创 2020-09-15 17:09:29 · 999 阅读 · 0 评论 -
css模糊背景
.mh { -webkit-backface-visibility: hidden; -webkit-filter: blur(5px); filter: blur(5px); opacity: 0.9; -webkit-animation: nvfadeInDown 1s .1s ease both; -moz-animation: nvfadeInDown .3s .1s ease both;}原创 2020-09-14 10:49:25 · 140 阅读 · 0 评论 -
搜索框样式
样式一：<!DOCTYPE html><html style="font-size: 62.5%;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> .clearfix{dis原创 2020-09-14 10:39:36 · 2159 阅读 · 1 评论 -
好用的css函数
attr：函数用于获取所选元素的属性值，它接受三个参数，属性名称，类型和默认值。语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )示例：<p data-text="you see" data-tooltip="cute!" class="attr">hover试一试：</p>p::after { content: ' ' attr(data-text);}.原创 2020-09-08 10:39:12 · 552 阅读 · 0 评论 -
css字体大小换算
浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。...原创 2020-09-03 17:02:41 · 799 阅读 · 0 评论 -
CSS滤镜：drop-shadow和裁剪元素clip-path
drop-shadowimg { filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));}box-shadow为我们提供了一个矩形阴影，即使元素没有背景，而drop-shadow则为图像的非透明部分创建阴影。clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。clip-path: polygon(0 0, 50% 0, 100% 50%, 50%...原创 2020-08-28 16:49:31 · 1363 阅读 · 0 评论 -
a标签和span标签里的文字不对齐
像这样给它加上块级标签并浮动它就可以了原创 2020-08-20 14:05:21 · 1380 阅读 · 0 评论 -
边框效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #draw-border { display: flex; align-i.原创 2020-08-17 16:10:28 · 214 阅读 · 0 评论 -
关于margin-top作用到父元素上的问题
css中第一个子元素节点的margin-top会作用到父元素上，加了 文字（文字属于文本节点）div就不是第一个子元素节点了或者给父元素加overflow。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <...原创 2020-08-05 13:50:25 · 472 阅读 · 0 评论 -
justify-content: space-between；没有两端对齐
看看父元素是不是右伪元素，伪元素会阻碍flex属性的生效。原创 2020-07-31 11:23:39 · 2362 阅读 · 1 评论 -
好用的uI调试技巧
第一种：给网页的所有元素加上outline,这样就可以很直观的看到元素的位置信息了html * { outline: 1px solid red ;/* 不要用border,border会增加元素的大小，outline不会 */}第二种：借助chrome的书签功能1、打开书签管理页2、右上角三个点【添加新书签】3、名称随意，把下面的代码复制到网址里面javas...原创 2019-09-29 14:47:34 · 191 阅读 · 0 评论 -
去掉浏览器右侧动滚条宽度对页面的影响
js$("body").css("width", $(window).width());csshtml,body{ overflow-x: hidden;}原创 2020-07-28 15:04:42 · 320 阅读 · 0 评论 -
设置letter-spacing 后文字不能居中的解决方法
text-align: center;letter-spacing: 1em;text-indent: 1em;这样还是不行就看看是不是设置了display: inline;（因为我就是这样）把display: inline;改成display: inline-block;就可以了原创 2020-07-23 18:47:26 · 1535 阅读 · 0 评论 -
css渐变色
background: linear-gradient(to bottom, #c21515 80%, #403f3f);原创 2020-07-23 11:36:05 · 197 阅读 · 0 评论 -
滚动条样式修改
/*滚动条样式*/*::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height:4px;}*::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); background:rgba(0,0,0,0.15);}*::-webkit-scr..原创 2020-07-18 18:17:15 · 661 阅读 · 0 评论 -
css偶尔实用的技巧
选择指定范围的元素:nth-of-type(2n) 等同于 :nth-child(odd):nth-of-type(2n+1) 等同于 :nth-child(even)文字两端对齐text-align-last: justify; 等同于 justify-content: space-between;排除一些没必要的元素，比如面包屑的分隔符/* 我爱死链式调用了,什么,这不是js? */ ul > li:not(:last-child)::after { cont原创 2020-07-16 13:39:03 · 100 阅读 · 0 评论 -
ul的几种列表样式
原创 2020-07-07 11:07:27 · 5328 阅读 · 0 评论