![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Html、Css
Html、Css
SwJieJie
越努力,越幸运 good lucky
展开
-
css实现图片hover的时候改变颜色
做项目开发过程的时候,会遇到不少图标/图片在hover的时候展示出活跃色表示能够点击。切换图源是个方案,实现起来要JS,还增加图片资源,没必要。可以用CSS来实现。使用活跃色的图片素材,给它一个灰色的滤镜。hover的时候取消这个滤镜,还原活跃色。效果:...原创 2022-07-14 17:50:19 · 1827 阅读 · 0 评论 -
前端Table小技巧—基本用法和样式
描述:写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的,每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头tbody表格的身体tfoot表格的脚)TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。TBody与原创 2022-06-10 15:50:42 · 2413 阅读 · 0 评论 -
HTML+CSS的5种布局方式
已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为300px,中间自适应。浮动布局的兼容性比较好,但是浮动带来的影响比较多,页面宽度不够的时候会影响布局,会导致盒子塌陷绝对定位布局快捷,但是有效性比较差,因为脱离了文档流。自适应好,高度能够自动撑开兼容性好,但是有时候不能固定高度,因为会被内容撑高。比较新的一种布局方式,兼容性没那么好。原创 2022-06-02 16:19:54 · 1079 阅读 · 0 评论 -
CSS 中使用flex布局解决最后一行不能左对齐
问题描述:我们开发使用flex布局时候, 同时使用属性 justify-content: sapce-between 会出现最后一行布局错乱注意:这种情况只适用于使用justify-content:space-between<div class="detail-list"> <div class="list-box"> <image class="list-image" src="{{listItem.img}}"/> <span cla原创 2022-02-11 18:28:50 · 434 阅读 · 0 评论 -
HTML基础复习
1,什么是 html?我们说的html全名是:Hyper Text Markup Language 超文本标记语言用来描述网页的一种标记语言(简称:比喻是相当于人的身体,骨架)超文本:指的是超链接标记:指的是标签标记语言里面包含了一套标记标签( 提示:文件扩展名以 .html 或 .htm 为标识。包含了 html 的标记和纯文本。)下载编辑器 Vscode - Download (softonic.com)2,浏览器内核(1),定义: 也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如原创 2022-01-20 16:33:08 · 942 阅读 · 0 评论 -
web前端开发必备基础单词整理
class 命名参考#导航类导航:nav标题:title摘要:summary菜单:menu子菜单:submenu主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar#页面结构布局容器:container页头:header内容:content/container页尾:footer导航:nav侧栏:sidebar栏目:column页面主体:main左右中:left righ原创 2022-01-20 14:49:36 · 1795 阅读 · 0 评论 -
elementui 输入框里面禁止浏览器自动填充用户名密码
问题1浏览器这功能在登录的时候挺好用的,但是在注册和管理的时候就很难受了所以在普通的input上直接off就行了<input type="password" autoComplete="off"/>而在elementui上使用autoComplete="off"是没用的 得使用new-password<el-input v-model="form.password" show-password auto-complete="new-password"></el-原创 2022-01-13 12:04:29 · 4459 阅读 · 3 评论 -
js修改数组对象的Key和指定的值
1,修改数组对象的Key /**/ var Arrydata = [{name:'Lily',age:18},{name:'BKqq',age:22}] //旧key到新key的映射 var keyMap = { // id: "value", name: "label", age: "value" }; for (var i = 0; i < Arrydata.length; i++) { var obj =原创 2020-05-09 14:50:42 · 13156 阅读 · 2 评论 -
自定义滚动条样式
滚动条组成部分::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。:...原创 2020-04-28 13:20:24 · 460 阅读 · 0 评论 -
页面去除滚动条
页面去除滚动条html,body { margin:0; padding:0; overflow-x: hidden; // 去除横向滚动条 overflow-y: hidden; // 去除纵向滚动条}原创 2020-04-17 15:14:36 · 782 阅读 · 0 评论 -
css强制不换行,自动换行
css强制不换行,自动换行1- 强制不换行 white-space:nowrap;2- 自动换行 word-wrap:break-word;3- 强制英文单词断行 word-break:break-all;*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。...原创 2020-04-17 11:58:47 · 736 阅读 · 0 评论