cswan~~-CSDN博客

原创 css-响应式布局

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

2022-01-24 17:21:15 988

原创 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 1125

原创 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 1181

原创 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 309

原创 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 522

原创 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 406

原创 css-样式权重等级

样式权重等级 1.！important 权重值为10000 2. 内联样式，如： style=“”，权重值为1000 3. ID选择器，如：#content，权重值为100 4. 类、伪类和属性选择器，如：.content、：hover权重值为10 5. 标签选择器和伪元素选择器，如：div、p、：before权重值为1 ...

2020-06-11 15:44:11 804

原创 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 174

原创 js-ES6 解构

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

2020-03-23 16:42:38 124

Cswan的博客