随笔分类 -  前端界面开发(HTML&CSS)

渐变和背景同时存在
摘要：#### 示例图 ![](https://img2023.cnblogs.com/blog/2104219/202307/2104219-20230725195859752-249520233.png) #### 代码案例 ``` background: url(@/assets/nlzsimg/n 阅读全文
posted @ 2023-07-25 19:59 Felix_Openmind 阅读(11) 评论(0) 推荐(0) 编辑
JS默认参数传递额外参数（多文件上传, uploading)
摘要：``` = state.initIntrosSize" :disabled="index 1" style="font-size: 20px; margin-left: 10px; color: #cccccc" @click="removeDomain(intro)" /> 图片上传 视频上传 上 阅读全文
posted @ 2023-06-09 18:37 Felix_Openmind 阅读(147) 评论(0) 推荐(0) 编辑
添加垂直滚动条并去除滚动白条
摘要：.menu-box overflow-y: scroll height 100% .menu-box::-webkit-scrollbar { display: none; } 参考连接： https://www.cnblogs.com/heleiya/p/13125946.html 阅读全文
posted @ 2023-03-24 18:08 Felix_Openmind 阅读(36) 评论(0) 推荐(0) 编辑
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
摘要：参考：https://blog.csdn.net/Amnesiac666/article/details/122060057 ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 ~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥 阅读全文
posted @ 2023-03-23 09:50 Felix_Openmind 阅读(1606) 评论(0) 推荐(0) 编辑
如何一次将样式应用于多个类？
摘要：=> 要么 .abc, .xyz { margin-left:20px; width: 100px; height: 100px; } => 要么 a.abc, a.xyz { margin-left:20px; width: 100px; height: 100px; } => 要么 a { ma 阅读全文
posted @ 2023-03-21 10:31 Felix_Openmind 阅读(11) 评论(0) 推荐(0) 编辑
AntDesignVue的时间选择器a-date-picker范围格式化时间
摘要：业务效果图 核心代码 <template> <a-date-picker v-model='record.payTime' show-time autoclear placeholder='请选择付款时间' valueFormat='YYYY-MM-DD HH:mm:ss' /> </templat 阅读全文
posted @ 2023-03-08 17:18 Felix_Openmind 阅读(1071) 评论(0) 推荐(0) 编辑
AntDesign动态表格(a-table)实现新增或删除
摘要：参考： http://t.csdn.cn/g4aDZ 业务效果图 核心代码 <a-form-model-item label='付款详情' prop='rate'> <a-table :columns='current08Form.payColumns' :data-source='current0 阅读全文
posted @ 2023-03-06 11:10 Felix_Openmind 阅读(1582) 评论(0) 推荐(0) 编辑
前端在标题前面添加蓝色竖线
摘要：<br><br>.title { position: relative; padding-left: 13px; margin: 24px 0px; } .title:before { content: ''; background-color: #3796EC; width: 4px; heigh 阅读全文
posted @ 2023-03-03 13:47 Felix_Openmind 阅读(362) 评论(0) 推荐(0) 编辑
AntDesign样式穿透解决方案
摘要：业务效果 // 直接放在style标签中 不要放在<style lang="scss" scoped>标签中 <style> .ant-table.ant-table-bordered .ant-table-title { background: #f3f3f3; } </style> 上述方式会导 阅读全文
posted @ 2023-02-17 21:57 Felix_Openmind 阅读(1233) 评论(0) 推荐(0) 编辑
Date Time相关处理
摘要：给时间添加 am或pm // 'h' is an hour number const suffixAmPm = (h) => `{h % 12 0 ? 12 : h % 12}{h < 12 ? 'am' : 'pm'}`; suffixAmPm(0); // '12am' suffixAmPm 阅读全文
posted @ 2023-02-15 21:51 Felix_Openmind 阅读(20) 评论(0) 推荐(0) 编辑
Flex弹性布局实现四列网格
摘要：<head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; flex-wrap: wrap 阅读全文
posted @ 2023-02-09 14:06 Felix_Openmind 阅读(867) 评论(0) 推荐(0) 编辑
设置图片和文字垂直居中
摘要：before 调节图片垂直对齐方式，middle:居中; .user img { /* 调节图片垂直对齐方式, middle:居中 */ vertical-align: middle; } after 阅读全文
posted @ 2022-12-07 12:38 Felix_Openmind 阅读(128) 评论(0) 推荐(0) 编辑
CSS实现标题和图片混合
摘要：Result Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2022-11-23 05:02 Felix_Openmind 阅读(163) 评论(0) 推荐(0) 编辑
CSS通过Flex实现上标
摘要：效果图 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co 阅读全文
posted @ 2022-11-10 23:46 Felix_Openmind 阅读(95) 评论(0) 推荐(0) 编辑
Flex弹性盒子
摘要：![](https://img2022.cnblogs.com/blog/2104219/202211/2104219-20221110224503157-530083367.png) ![](https://img2022.cnblogs.com/blog/2104219/202211/2104219-20221110224520918-1959803385.png) ![](https://i 阅读全文
posted @ 2022-11-10 22:45 Felix_Openmind 阅读(16) 评论(0) 推荐(0) 编辑
CSS导航栏最后一个元素居右(.nav-site .nav-right{margin-left: auto;}
摘要：效果如图 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c 阅读全文
posted @ 2022-11-10 22:20 Felix_Openmind 阅读(319) 评论(0) 推荐(0) 编辑

*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示