前端重学之路---CSS
以基础知识和书写代码为主,将基础打扎实
YLSkye
一枚准备转向前端的程序媛
展开
-
左上三角标和导航文字右上方图标定位
具有相对特性的无依赖absolute绝对定位——各类图标定位1.左上角小三角标2.导航文字右上方 1.左上角小三角标 1.1 实现效果图: 1.2 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-07-21 16:17:14 · 335 阅读 · 0 评论 -
overflow与锚点定位--选项卡切换效果(高度固定)
利用overflow与锚点定位实现选项卡切换效果补充知识锚点定位行为的触发条件锚点定位作用的本质实现选型卡切换效果 补充知识 锚点定位行为的触发条件 URL地址中的锚链与锚点元素对应并有交互行为 可focus的锚点元素处于focus状态 focus锚点定位是类似链接或按钮、输入框等可以被focus的元素在被focus时发生的页面重定位现象。 例:一个可读写的input,执行类似下面的js代码时: document.querySelector('input').focus(); 两种定位方式的行为表现差原创 2020-07-20 21:43:02 · 637 阅读 · 0 评论 -
文字溢出用省略号效果
文字溢出用省略号显示实现方法单行文字多行文字 单行文字 核心的3个声明: .ell{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 多行文字 .ellM{ height: 40px; width: 200px; overflow: hidden; /*超出文本隐藏*/ text-overflow:ellipsis; /*超出部原创 2020-07-20 18:31:38 · 154 阅读 · 0 评论 -
基于vertical-align属性的水平垂直居中弹框
基于vertical-align属性的水平垂直居中弹框关于使用css方法的优点:实现效果图:CSS核心代码: 关于使用css方法的优点: 1. 节省了许多无谓的定位JS代码,不需要浏览器resize事件之类的处理,当弹框内容动态变化的时候,也无须重新定位 2. 性能更改、渲染速度更快 3. 可以非常灵活的控制垂直居中的比例 4. 容器设置overflow:auto可以实现弹框高度超过一屏时依然可以看见屏幕外内容 实现效果图: CSS核心代码: .container{ positi原创 2020-07-19 16:19:57 · 118 阅读 · 0 评论 -
CSS绘制常用小图形
CSS 常用图形总结(不定时,边学边更新)2020/7/17总结三道杠(移动端常见)双层圆点绘制三角形和梯形的绘制 2020/7/17总结 三道杠(移动端常见) 利用padding和background-clip实现 .icon-menu{ display: inline-block; width: 140px; height: 10px; padding: 35px 0; borde原创 2020-07-17 16:21:49 · 232 阅读 · 0 评论