随笔分类 - CSS
1
阿里巴巴矢量图标库使用 iconfont
摘要：网址：https://www.iconfont.cn/1.搜索想要的图标2.鼠标悬浮 点击按钮：添加入库3.点击购物车，添加到项目，选择/新建自己的图标项目4.我的项目》下载至本地，解压，其中demo_index.html就是使用方法。5.我的做法：把全部文件(也可以挑选需要的文件排除demo文件)
阅读全文
CSS设置div高度自动全屏
摘要：对body和html都设置高度100% html,body { height: 100%; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; position: relative; } 然后再对div设置100% #app { height: 100%;
阅读全文
CSS隐藏滚动条
摘要：code <style> /* 隐藏标准的滚动条 */ html::-webkit-scrollbar { width: 0; } body::-webkit-scrollbar { width: 0; } /* 隐藏 IE 和 Edge 浏览器的滚动条 */ ::-ms-scrollbar { w
阅读全文
CSS 自定义checkbox样式
摘要：小星星 /**checkbox 样式 begin*/ .chkAuto { width: 10px; height: 10px; } .auto_check input[type="checkbox"] + label::before { content: " "; display: inline-
阅读全文
CSS radio自定样式
摘要：出来是彩色的 radio button .rdo_enabled { vertical-align: middle; margin-top: 5px; font-size: 25px; transform: scale(2); line-height: 60px; background-color:
阅读全文
CSS flex布局
摘要：来源：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a容器属性，设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐方式。flex-dire
阅读全文
CSS文本溢出显示三个小圆点
摘要：溢出显示三个小圆点：必须用的属性1、给元素一个固定的宽度2、让文本不折行显示3、溢出隐藏4、溢出文本变成三个圆点//添加一个固定的宽度 width:300px;//让文本不折行 white-space: nowrap;//溢出的文本隐藏overflow: hidden;//溢出文本的显示效果clip
阅读全文
table非常细边框，文本框细边框
摘要：小星星 /**细灰边框*/ .TextBoxThin { width: 100px; line-height: 45px; height: 45px; font-size: 18px; padding-left: 5px; padding-right: 5px; vertical-align: mi
阅读全文
css外层透明，内层不透明
摘要：外层div透明使用：background: rgba(0, 0, 0, 0.5); 内层div透明使用：opacity:1; 这么样就可以了。不要外层使用opacity，会影响内层也透明的。主要是rgba这个。
阅读全文
css让内层div自动撑开外层div
摘要：.clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} 就是在外层div的最后处，插入一个<div class="clear"></div>就可以了。
阅读全文
响应式网站怎么搞？
摘要：1.在页面头部加入如下的声明： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> viewport = 视口（设备屏幕）conten
阅读全文
css设置滚动条样式
摘要：.leftbar{ height:100%; overflow:scroll; } /*滚动条样式*/ .leftbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .leftbar::
阅读全文
css背景图充满屏幕
摘要：代码： body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repeat; /* 背景图垂直、水平均居中 */ background-position: center c
阅读全文
CSS居中
摘要：内容居中：text-align:center;这种用法需要定义在父级元素上面。然后他的子元素的内容就全部居中了。 div居中1：margin:0 auto; div居中2：left: 50%;margin-left: -60px;这种用法需要父级元素的position:relative; 然后子元素
阅读全文
CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
摘要：一个好网站：http://www.jqhtml.com/ 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 Internet Explore
阅读全文
CSS之transform属性
摘要：transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。 transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表
阅读全文
css position说明
摘要：生成绝对定位的元素，选择第一个position不等于 static 定位的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "ri
阅读全文
文字超出显示省略号
摘要：style="overflow:hidden;text-overflow: ellipsis;white-space:nowrap;word-break:keep-all;"
阅读全文
1
