随笔分类 -  CSS技能

1 2 下一页
css技能笔记
CSS0028： css中引号用 " 代替 写法 DIV颜色渐变背景样式
摘要：<div class="img" style="background: url(&quot;uploads/image/201905/5cce9c85e8b25.jpg&quot;) center center / cover; height: 257px;"></div> .ToggleConta 阅读全文
posted @ 2022-10-12 16:19 琥珀君 阅读(141) 评论(0) 推荐(0)
CSS0027： div 倒角效果
摘要：1， <div id="test"></div> #test { display: inline-block; width: 100px; height: 100px; background: linear-gradient(135deg, transparent 10px, #58a 0) top 阅读全文
posted @ 2022-09-27 14:01 琥珀君 阅读(412) 评论(0) 推荐(0)
CSS0026： div 内 多元素 水平 垂直 均匀 居中 显示 span 元素文字不超出边界
摘要：1， <div class="feature"> <div class="like-wrap"> </div> <div class="empty-wrap"></div> <div class="share-wrap"> </div> </div> 2， .feature { width: 4vh 阅读全文
posted @ 2022-03-12 16:40 琥珀君 阅读(261) 评论(0) 推荐(0)
CSS0025： div 可以滚动 但是隐藏滚动条 禁止选中文字，设置body可滚动不显示滚动条
摘要：1， <style> .cont { width: 200px; height: 200px; border: 1px solid #000000; overflow-x: hidden; } .cont::-webkit-scrollbar { display: none; } </style> 阅读全文
posted @ 2022-03-01 14:56 琥珀君 阅读(242) 评论(0) 推荐(0)
CSS0024： DIV 隐藏加 透明渐变特效
摘要：1，首先在CSS 中定义透明渐变属性。 2，再将透明度opacity属性值置为0，会自动渐变隐藏，最后去掉DIV 元素。 阅读全文
posted @ 2021-04-25 17:15 琥珀君 阅读(544) 评论(0) 推荐(0)
CSS0023： CSS 侧边栏开启关闭特效
摘要：1，html代码 <!-- 导航目录 --> <nav> <div class="nav-links"> <a href="./index.html" class="link"><span></span>首&nbsp;&nbsp;页</a> <a href="javascript:void(0);" 阅读全文
posted @ 2021-03-04 17:24 琥珀君 阅读(315) 评论(0) 推荐(0)
CSS0022： background 属性 简写 方式
摘要：1， .btnDivL .L1 { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; background-image: url('../icon/L1.png'); /* 简 阅读全文
posted @ 2021-01-15 10:16 琥珀君 阅读(123) 评论(0) 推荐(0)
CSS0021： css 根据字体的大小 ，自动适应div等其他元素的大小
摘要：1， /*手机*/ @media screen and (max-width:600px) { /* 设置字体大小 ，其余元素按字体自动调整大小*/ body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size 阅读全文
posted @ 2021-01-08 17:12 琥珀君 阅读(1626) 评论(0) 推荐(0)
CSS0020： css 根据百分比 和 vw vh 混合计算位置 宽高
摘要：1， 阅读全文
posted @ 2020-12-07 10:31 琥珀君 阅读(153) 评论(0) 推荐(0)
CSS0019： 样式中高度百分比无效时，这样写 height:calc(100%)
摘要：1， style="width:100%;height:calc(100%); position:absolute; top:0;" 阅读全文
posted @ 2020-11-26 11:53 琥珀君 阅读(756) 评论(0) 推荐(0)
CSS0018： 字体超长自动隐藏
摘要：1， .card-slogen { font-size: .24rem; color: #777; display: block; margin-left: .2rem; /* 隐藏超长字体 */ overflow: hidden; white-space: nowrap; text-overflo 阅读全文
posted @ 2020-09-17 14:42 琥珀君 阅读(157) 评论(0) 推荐(0)
CSS0017： DIV 上下左右都居中样式
摘要：1， .container { box-sizing: border-box; max-width: 1024px; padding: 20px; text-align: center; } 阅读全文
posted @ 2020-09-13 12:47 琥珀君 阅读(159) 评论(0) 推荐(0)
CSS0016： 多个DIV并排均匀分布 box-sizing
摘要：1， <!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; 阅读全文
posted @ 2020-09-13 12:42 琥珀君 阅读(846) 评论(0) 推荐(0)
CSS0015： CSS 中写表达式
摘要：1， .project-header { height: 64px; font-size: 20px; text-align: center; /* position: relative; */ background:transparent; position:absolute; z-index: 阅读全文
posted @ 2020-08-27 11:52 琥珀君 阅读(436) 评论(0) 推荐(0)
CSS0014： CSS 禁止页面拖动 选中
摘要：1，禁止拖动 2，禁止选中文字图片等 body { height: 100%; overflow: hidden; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #666; background-color: #ff 阅读全文
posted @ 2020-08-20 23:10 琥珀君 阅读(1540) 评论(0) 推荐(0)
CSS0013： CSS 通用样式
摘要：1， /* 通用样式 */ *,::after,::before { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: b 阅读全文
posted @ 2020-08-20 22:29 琥珀君 阅读(198) 评论(0) 推荐(0)
CSS0012： IOS平台下点击按钮出现一个半透明的灰色背景
摘要：1， * { /* IOS平台下点击按钮，会出现一个半透明的灰色背景，alpha值为0即为禁用 */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-touch-callout: none; -webkit-user-sele 阅读全文
posted @ 2020-08-05 16:37 琥珀君 阅读(246) 评论(0) 推荐(0)
CSS0011： DIV背景图片样式 body添加全屏背景图片
摘要：1， /* background-color: #f10a91; */ background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("public 阅读全文
posted @ 2020-07-20 10:13 琥珀君 阅读(356) 评论(0) 推荐(0)
CSS0010： DIV按钮样式
摘要：1， .btn{ color: #fff; background-color: #337ab7; border-color: #2e6da4; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; f 阅读全文
posted @ 2020-07-05 15:08 琥珀君 阅读(1142) 评论(0) 推荐(0)
CSS0009： CSS渐变背景效果
摘要：1， background-image: linear-gradient(45deg, red, yellow, blue); 阅读全文
posted @ 2020-07-04 17:28 琥珀君 阅读(113) 评论(0) 推荐(0)

1 2 下一页