css
文章平均质量分 61
前端大斗师
精通JavaScript、TypeScript、PHP、Python、Node、Vue、React、Angular等单词拼写
展开
-
Element组件el-scrollbar滚动条包裹el-table表格不显示横线滚动条以及滚动条重叠问题
Element组件el-scrollbar滚动条包裹el-tbale表格不显示横线滚动条以及滚动条重叠问题原创 2022-04-01 10:29:18 · 4551 阅读 · 0 评论 -
Element UI中的table组件添加横向滚动条
如何给Element UI中的table组件添加横向滚动条并非是浏览器自带滚动条样式,而是类似于Element滚动条样式话不多说直接上代码 .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /*原创 2021-08-27 16:29:46 · 15279 阅读 · 4 评论 -
web前端开发之CSS基础
一、CSS基础层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力二、核心概念以及知识点2.1 css语法CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键原创 2021-03-22 09:53:22 · 2391 阅读 · 2 评论 -
web前端开发面试题(六)
前端面试题第六天一、 HTML 部分1.1 label都有哪些作用label 元素不会向用户呈bai现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。代码示例:<body> <label for="title">标题:</label> <input id="title" type="text"><原创 2021-01-20 14:59:47 · 1621 阅读 · 1 评论 -
web前端开发面试题(五)
前端面试题第五天一、HTML 部分1.1 target属性的取值和作用使用框架内的文档时,a标签的target属性确保被引用的URL能够加载到正确的框架中。关于target的取值,html中保留了四个目标名称用作特殊的文档重定向操作:blank:点击一次打开一个新窗口self:默认值,本页面打开链接parent:在父级窗口打开top:在当前的整个浏览器中打开所链接文档,即在顶级窗口打开new:始终在一个新窗口中打开二、CSS 部分2.1 CSS3新增伪类有哪些:root 选择原创 2021-01-18 15:21:12 · 1702 阅读 · 0 评论 -
web前端开发面试题(四)
前端面试题第四天一、HTML部分1.1 HTML5的文件离线储存怎么使用,工作原理是什么已废弃该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。它正在处于从Web平台中被删除的过程。请改用Service Workers 代替。事实上,在Firefox 44中,当AppCache用于为页面提供离线支持时,控制台中现在显示一条警告消息,建议开发人员改用 Service workers 代替参考文档:https://develope原创 2021-01-18 14:47:02 · 1669 阅读 · 0 评论 -
iOS屏幕尺寸适配
原创 2021-01-15 14:12:36 · 1864 阅读 · 0 评论 -
web前端开发面试题(二)
前端面试题第二天一、html部分html的元素(包含H5)块元素:div p h1-h6 ol ul li table tbody td tr thead dl dt dd行内块元素:img input行内元素:span button br a i emH5新增元素section article audio video hearder nav footer small二、 css部分CSS3新增特性transform -- 2D 3D 变换rotat原创 2021-01-14 15:08:58 · 1928 阅读 · 2 评论 -
web前端开发之rem布局
1.rem布局1.1 em和remrem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em:em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDNem可以让页面更灵活,比起写死的px值,em更有张力,改动父元素的字体大小,子元素会等比例变化,但其复杂的计算让人诟病,甚至有人专门做了个px和em的计算器,不同节点像素值对应的em值em做弹性布局的缺点还在于牵原创 2021-01-14 14:25:46 · 6058 阅读 · 3 评论 -
web前端开发面试题(一)
一、html部分1.1 link和@import区别如下:1.1.1从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2.加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼原创 2021-01-12 17:20:47 · 2101 阅读 · 2 评论 -
HTML5新属性+CSS3动画
HTML5一、什么是HTML51.1 HTML5 的概念与定义定义: HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指: HTML5 、 CSS3 、javascript , 这也是广义上的 HTML51.1.1 HTML5拓展内容语义化标签本地存储兼容特性2D 、 3D动画、过渡CSS3 特性性能与集成绝对多数新原创 2021-01-06 16:40:44 · 2122 阅读 · 0 评论 -
【HTML+CSS】实现小盒子水平垂直居中大盒子
小div在大div中如何水平垂直居中关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种。首先看一下要实现的效果图及对应的html代码:// 大盒子嵌套小盒子 小盒子水平垂直居中<div class="big"> <div class="small"></div> </div>1.使用定位实现* { margin: 0; paddi原创 2020-12-22 19:07:40 · 7750 阅读 · 3 评论 -
Bootstrap引包
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/lib原创 2020-12-16 10:58:19 · 1887 阅读 · 0 评论 -
Web前端入门 HTML+CSS基础
HTML+CSS基础知识总结1.web标准 结构上来说html页面分为head和body两部分 head里面包含meta标签(UTF8字符集)、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。 web页面标准分为结构(html)+样式(css)+行为(js) 2.HTML基本标签2.1基本标签<html> &原创 2020-09-17 10:10:49 · 7202 阅读 · 6 评论 -
css中使用伪类将鼠标移入li空白处时将a标签颜色改变
css中使用伪类将li中的a标签颜色改变最近在写项目的时候由于li标签下嵌套着a标签给li加hover达不到鼠标悬浮到空白处的时候使a标签变色话不多说上代码:* { margin: 0; padding: 0; } ul { list-style-type: none; } a { text-decoration: none;原创 2020-09-15 19:50:53 · 5833 阅读 · 5 评论 -
纯css实现轮播图banner自动轮换效果
纯css实现轮播图效果话不多说 直接上代码* { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px; overflow: hidden; } /* .wrap */原创 2020-09-14 11:27:41 · 3684 阅读 · 0 评论 -
css布局的三种机制
css布局的三种机制网页布局的核心——就是用CSS来摆放盒子。CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)块级元素会独占一行,从上向下顺序排列;■常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;■常用元素:span、a、i、em等浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。定位让盒子从普通流中浮起来,主要作用让多个块级盒原创 2020-09-14 10:50:07 · 2739 阅读 · 0 评论 -
css中表格的细线边框
css中表格的细线边框通过表格的cellspacing=“O”,将单元格与单元格之间的距离设置为0,可以看到小明的有边框和男的做边框出现了重叠 从而使边框变粗通过css属性:table {border-co1lapse:co1lapse; }collapse单词是合并的意思border-collapse:collapse;表示相邻边框合并在一起。运行图如下:...原创 2020-09-14 10:41:38 · 2742 阅读 · 0 评论 -
CSS盒子边框(border)样式综合样式
CSS盒子边框(border)语法:border : border-width ll border-style ll border-color边框的样式: none:没有边框即忽略所有边框的宽度(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 dotted:边框为点线例如:border: 1px solid red;没有顺序盒子边框写法总结表很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。原创 2020-09-14 10:35:45 · 5150 阅读 · 0 评论 -
加padding之后盒子会被撑大的解决办法
加padding之后盒子会被撑大的解决办法盒子代码: div{ margin:0 auto; margin-top:400px; width:100px; height:100px; text-align: center; border:2px solid black; } </style></head&g原创 2020-09-13 10:43:19 · 7204 阅读 · 3 评论 -
CSS中如何去掉li标签前面的小圆点
CSS去掉li标签前面的小圆点ul li 代码示例<ul> <li>西瓜</li> <li>冬瓜</li> <li>南瓜</li> <li>北瓜</li> </ul>运行示例图:我们可以清楚地看到每个li前边都有一个小圆点如何利用css去除小圆点 只需一行代码 list-style: none;原创 2020-09-10 14:36:38 · 15452 阅读 · 0 评论 -
css中a标签超链接在新窗口中打开以及超链接去除/添加下划线
css中a标签超链接属性设置超链接基本语法:<a href="http://www.baidu.com">点击我会跳转到百度</a>a标签默认颜色为蓝色并且自带下划线下面我们看下浏览器运行界面图片 超链接在新窗口中打开不写的话默认是target="_self" 不加就是在本窗口打开<a href="http://www.baidu.com" target="_self">点击我会跳转到百度</a>超链接在新窗口中打开只需要添加代码tar原创 2020-09-10 14:13:46 · 5754 阅读 · 1 评论 -
表白代码使用无限的动画计数制作 CSS 心跳
使用无限的动画计数制作 CSS 心跳源码:<style> .back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-it原创 2020-09-10 10:28:25 · 3630 阅读 · 0 评论 -
如何使用css绘制三角形
css绘制三角形代码:<style> .test { width: 0px; height: 0px; border:10px solid transparent; border-top-color: #00BCD4; } </style><body> <div class="test"></div>原创 2020-09-09 17:09:20 · 3269 阅读 · 0 评论 -
CSS三大特征 重叠性 继承性 优先级/权重(重点)
CSS三大特征 重叠性 继承性 优先级(重点)1.css层叠性代码示例:<style> div{ width:100px; height:100px; color:green; background-color: green; } div{ width:100px; height:100px;原创 2020-09-09 16:33:46 · 3750 阅读 · 0 评论 -
CSS背景颜色设置背景附着背景平铺背景位置背景简写背景透明
CSS背景设置方法及背景附着1.背景颜色(color)语法:background-color:颜色值; 默认值是 transparent 透明的2.背景图片(image)语法:background-image:url("图片路径")小技巧:提倡背景图片后边的地址,url不要加引号。3.背景平铺(repeat)语法:background-repeat:repeat : repeat | no-repeat | repeat-x | repeat-y4背景位置(posi原创 2020-09-09 16:00:02 · 3949 阅读 · 1 评论 -
CSS伪类选择器 a超链接标签
CSS伪类选择器作用:用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器。a:link 未访问的链接a:visited 已访问的链接a:hover 鼠标移动到链接上a:active 定的链接注意:写的时候顺序最好不要颠覆 否则容易出现错误举例说明: a { font-size: 14px;原创 2020-09-09 15:25:20 · 3845 阅读 · 0 评论 -
HTML5中块级元素、行内元素和行内块元素都有什么如何转换、有何特点
块级元素、行内元素和行内块元素都有什么如何转换、有何特点块级元素常用的块级元素有:div , p , h1~h6 , ol , ul , dl , form , table , address …特点:每个块级元素都独占一行。元素的宽度、高度、行高及顶部和底部边距可以设置。元素宽度在不设置的情况下,和它父元素的宽度一致行内元素常用的行内元素有:span , br , a , em , b , i , strong …特点:和其它元素都在一行上。元素的宽度、高度及顶部和顶部边距都不能设置原创 2020-09-08 14:40:46 · 4093 阅读 · 1 评论 -
HTML5中CSS外观属性
CSS外观属性1.color:文本颜色作用:color属性用于定义文本的颜色取值方式:注意:我们实际工作中,用16进制的写法是最多的,而且我们更喜欢简写方式比如#f00代表红色2.text-align:文本水平对齐方式作用:text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性属性值如下:注意:是让盒子里边的内容水平居中,而不是让盒子居中对齐3.line-height:行间距作用:line-height属性用于设置行间距,就是行与行之间的距离,即字原创 2020-09-08 14:00:08 · 3669 阅读 · 2 评论 -
CSS字体样式属性调试
CSS字体样式属性调试1.font-sizefont-size属性用于设置字号p {font-size:20px;2.font-familyfont-family用于设置字体p {font-family:"Mirsoft YaHei";}网页中常用字体有宋体,微软雅黑,黑体等可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体,如果都没有,则以我们电脑默认的字体为准。p {font-family:"Mirsoft YaHei"原创 2020-09-08 13:48:21 · 7617 阅读 · 0 评论 -
CSS3中常用的几种选择器
css中几种常用的选择器1.通配符*{ margin:0; padding:0; }因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前2.id选择器#first{ color:red; }<div id="first">我是id选择器</div>id选择器 调用css样式时需要用#不推荐使用i原创 2020-09-08 11:12:36 · 8950 阅读 · 0 评论 -
HTML5中input输入框默认提示文字向左向右移动
HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码<style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200p原创 2020-09-08 10:51:00 · 16195 阅读 · 0 评论