HTML+CSS
关注
分享
扫一扫
北岭有燕
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
给el-table的某列设置样式
<el-table :data="tableData" > <el-table-column v-for="item in column" :key="item" :prop="item.prop" :label="item.label" :width="item.width" > <template slot-scope="scope">原创 2022-03-02 19:13:34 · 1833 阅读 · 0 评论 -
css顺序 使用background问题
旧代码：background-position: center center;background-size: 100% 100%;background: url('https://xxx.png') no-repeat; //这一句会覆盖之前的其它background属性问题：background-position和background-size不生效。解决办法：background: url('https://xxx.png') no-repeat;background-positio原创 2022-02-11 17:00:27 · 502 阅读 · 0 评论 -
切割字符串超出规定长度显示省略号，但是中文和英文显示长度不一样
可以使用css样式来解决，如果没有显示省略号，看看是否是行内元素，加上 display: block!important;即可。 display: block!important; width:60px; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; overf原创 2021-11-10 11:30:02 · 611 阅读 · 0 评论 -
div盒子垂直居中
比较推荐的办法：1.display:flex。如果想正常纵向排列，加上flex-direction:column;.parent{display:flex;justify-content:center;align-items:center;}2.定位+transform定位中心点是盒子的左上顶点，所以定位之后我们需要回退盒子一半的距离。.parent{position:relative;}.child{position:absolute;top原创 2021-01-08 14:35:18 · 373 阅读 · 0 评论 -
vue中点击导航/元素改变颜色
1.我使用的是nuxt，导航是nuxt-link形成的，点击后审查元素会发现它的class多了一个nuxt-link-exact-active，所以我们只需要直接在css样式里.nuxt-link-exact-active { color: red;}vue同理，是router-link形成的导航栏的话.router-link-active{ color: red;}2.如果它是几个相同的元素，在切换的时候改变颜色。在传递参数的时候不能穿this，传递进入的this指..原创 2020-11-27 17:52:29 · 2219 阅读 · 1 评论 -
CSS实现顶部三角形矩形
效果如图：思路：首先知道如何创建一个三角形，然后利用伪元素让大三角形覆盖小三角形即可<html> <head> <style> /* 三角形的实现： div { width: 0; height: 0; border: 20px solid; 这个是显示下面的三角形 border-color: tra原创 2020-11-27 11:13:59 · 1188 阅读 · 0 评论 -
CSS实现矩形两边挖半圆
效果如图：思路：子绝父相，通过伪元素把一个白色的圆（和背景色相同）放在矩形中心两边。<html> <head> <style> /* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 */ /* transform:translate(-50%,-50%); 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */ .semi-circle {原创 2020-11-27 10:25:10 · 2814 阅读 · 0 评论 -
CSS精灵技术与字体图标
CSS精灵技术（sprite）精灵技术产生的背景当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪...原创 2019-09-18 18:25:59 · 365 阅读 · 0 评论 -
滑动门、伪元素和过渡
滑动门滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用...原创 2019-09-18 18:28:50 · 436 阅读 · 0 评论 -
CSS3之2D、3D变形
2D变形(CSS3)转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform移动 translate(x, y)translate(50px,50px);使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。...原创 2019-09-20 01:10:00 · 353 阅读 · 0 评论 -
CSS3之动画与Flex
动画(CSS3)动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称 动画时间 运动曲线（linear 匀速动画） 何时开始 播放次数 是否反方向;/*动画名称是自己定义的 go google*//*一般情况下，我们就用前2个 animation: go 2s*/ /*@keyfram...原创 2019-09-20 01:11:18 · 780 阅读 · 0 评论 -
BFC
BFC(块级格式化上下文)那些元素会具有BFC的条件display 属性为 block, list-item, table 的元素，会产生BFC.什么情况下可以让元素产生BFC以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？同样，要给这些元素添加如下一种属性就可以触发BFC。-float属性不为none-position为absolut...原创 2019-09-20 18:21:45 · 430 阅读 · 0 评论 -
CSS浏览器前缀，压缩等
浏览器前缀浏览器前缀浏览器-webkit-Google Chrome, Safari, Android Browser-moz-Firefox-o-Opera-ms-Internet Explorer, Edge-khtml-Konqueror后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。背景渐变在线性渐...原创 2019-09-20 20:23:50 · 274 阅读 · 0 评论 -
CSS高级技巧
CSS高级技巧CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。<ul> <li style="cursor:default">我是小白<...原创 2019-09-18 18:23:33 · 245 阅读 · 0 评论 -
元素的显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！display 显示（常用）display : none 隐藏对象 与它相反的是 di...原创 2019-09-18 18:22:13 · 277 阅读 · 0 评论 -
css实现做一条线，控制文字自动换行，美化单选框
1.用div做出一条线<div style="width:800px;height:2px;margin:0px 0px 0px 40px;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>2.css控制文字自动换行https://www.cnblogs.com/good10000/p/5943...转载 2019-03-29 16:43:14 · 967 阅读 · 0 评论 -
Markdown基本语法
1、标题# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题 2、列表- 文本1- 文本2- 文本3或者1. 文本12. 文本23. 文本33、图片和链接4、引用> 大前端时代来临。5、粗体和斜体**粗体***斜体*6、代...转载 2019-04-22 00:10:11 · 225 阅读 · 0 评论 -
浏览器内核
查看浏览器占有的市场份额http://tongji.baidu.com/data/browser浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页...转载 2019-04-22 00:12:57 · 326 阅读 · 0 评论 -
html基础知识点
字符集：<meta charset="UTF-8">utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。gb2312 简单中文包括6763个汉字BIG5繁体中文 港澳台等用GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312UTF-8则包含全世界所有国家需要用到的字符单标签：br hr img ...转载 2019-04-22 00:23:20 · 1367 阅读 · 0 评论 -
CSS基础知识点font字体
style里：属性和属性值之间用英文“:”连接。多个“键值对”之间用英文“;”进行区分。css里面的注释是/* */html里面的注释是<!-- -->字体样式属性:各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$...转载 2019-04-22 22:16:05 · 539 阅读 · 0 评论 -
CSS基础知识点之 外观属性,引入CSS样式表（书写位置），标签显示模式转换，复合选择器
CSS外观属性color:文本颜色1.预定义的颜色值，如red，green，blue等。2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。text...转载 2019-04-22 22:41:57 · 769 阅读 · 0 评论 -
CSS背景
CSS 背景(background)background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性）background:背景颜色 背景图片地址 背景平铺 ...转载 2019-04-23 23:20:08 · 288 阅读 · 0 评论 -
CSS三大特性
CSS 三大特性CSS层叠性所谓层叠性是指多种CSS样式的叠加。比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。（就近原则）CSS继承性子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。...转载 2019-04-23 23:22:38 · 386 阅读 · 0 评论 -
盒子模型（CSS重点）
盒子模型（CSS重点）其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。盒子边框总结表border-top-style:样式; bor...转载 2019-04-23 23:30:57 · 489 阅读 · 0 评论 -
word表格转换成html常用知识点
1.自身电脑1366x768 1cm=37.5px 小二（h2）24px 小四（h4）16px 四号（h3）19px 五号(14px)2.一行或一列中有字体被撑开或被缩小，其他的单元格也会受到影响。3.文字居上style="vertical-align: text-top;"4.合并两列rowspan="2" 合并两行（两列变成一列）colspan="2" colu...原创 2019-04-20 15:07:15 · 1582 阅读 · 0 评论 -
CSS浮动
浮动普通流CSS的定位机制有3种：普通流（标准流）、浮动和定位。html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。什么是浮动？浮动的目的就是为了让多个块级元素同一行上显示...转载 2019-07-22 12:09:10 · 901 阅读 · 0 评论 -
CSS定位总结大全
定位(position)如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。定位模式 + 边偏移 = 完整定位1、边偏移比如 top: 100px; left: 30px; 等等2、定位模式选择器{position:属性值;}position属性的常用值值描述...原创 2019-08-11 16:08:52 · 477 阅读 · 0 评论 -
HTML知识点大全 + CSS
看到一段觉得比较励志的话：“当年我是个很普通的屌丝，一事无成，同学都很优秀，各种奖学金拿到天上去。终于发现一件可以做得来的事情，于是有了兴趣，然后在”follow your heart”这句话的激励下，披荆斩棘在前端这天路上走了出来。”现在的你，还不算晚，加油吧！HTML：新增：以http开头的链接都是绝对路径以"/"开头：代表根目录。 "./"：代表目前所在的目录。 "../"：代...原创 2019-01-10 19:53:43 · 374 阅读 · 0 评论