cswan~~-CSDN博客

原创 css-响应式布局

一、响应式布局概念定义：响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。核心思想：响应式布局的目的不是让一个网页的布局比例在任何设备都显示得完全一样，而是让网页在各个设备中都能正常且比较舒服地显示，不影响用户的阅读体验。换言之，首要的任务是不影响用户的正常阅读和正常操作，而一些比较次要的诸如内容两边的留白，大面积的背景图，导航键之间的间距比例

2022-01-24 17:21:15 965

原创 css- 纯css画正圆、胶囊按钮、三角形

正圆a、盒子必须是正方形b、设置边框圆角为盒子宽高的一半->border-radius: 50%代码示例：html： <div class="circle"/> css： .circle{ width: 200px; height: 200px; border: 1px solid red; border-radius: 50%; }胶囊按钮a、盒子要求是长方形b、设置->border-radius: 盒子高度的一半代码示..

2022-01-10 14:59:03 1063

原创 css-弹窗遮罩层

弹窗遮罩层width: 100%;height: 100%;background: rgba(0, 0, 0, .9);position: fixed;left: 0;top: 0;z-index: 999;display: block;

2022-01-08 17:05:18 1153

原创 css-水平垂直居中方法

水平垂直居中方法水平居中text-align：center；使用注意： a.文本 b.行内元素：span、a c.行内块元素：input、img d.如果需要让以上元素水平居中，此时直接在以上元素的父元素设置即可margin：0 auto；使用注意： a.块级元素 d.直接给当前元素设置left：50%；transform：translateX（-50%）使用注意： a.定位：子绝父相 d.给子元素设置垂直居中line-height使用注意： a

2022-01-08 17:01:49 279

原创 css-自定义滚动条

自定义滚动条/*滚动条整体样式*/::-webkit-scrollbar{ width: 10px; height: 10px;}/*滚动条里面小方块*/::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #606266;}/*滚动条里面轨道*/::-webkit

2022-01-08 16:29:59 509

原创 css-单行与多行文本超出处理

自动换行word-wrap:break-word;word-break:normal;强制不换行white-space:nowrap;强制英文单词换行word-break:break-all;单行文本不换行多余文本显示省略号width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;多行溢出隐藏，显示省略号（IE浏览器不支持）word-break:break-all;..

2022-01-08 16:25:55 392

原创 css-样式权重等级

样式权重等级1.！important 权重值为100002. 内联样式，如： style=“”，权重值为10003. ID选择器，如：#content，权重值为1004. 类、伪类和属性选择器，如：.content、：hover权重值为105. 标签选择器和伪元素选择器，如：div、p、：before权重值为1...

2020-06-11 15:44:11 790

原创 js-ES6 扩展

一.字符串扩展1.模板字符串语法： ${`this.name`}2.部分新方法1）padStart padEnd 用于头部补全和尾部补全'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.padEnd(4, 'ab') // 'xaba'...

2020-04-02 13:58:16 144

原创 js-ES6 解构

一. 数组的结构赋值const arr = [1, 2, 3, 4];let [a, b, c, d] = arr;console.log('a',a); // a 1console.log('b',b); // b 2console.log('c',c); // c 3复杂的匹配规则const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']...

2020-03-23 16:42:38 112

Cswan的博客