![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML + CSS
文章平均质量分 61
前端必会的 HTML+CSS 常用技巧
zhuangvi
代码搬运工
展开
-
前端必会的 HTML+CSS 常用技巧(2024-06-14已更)
很多人在做项目的时候会经常碰到一些关于 HTML 或者 CSS 方面的看起来非常简单,但是实现起来就颇有难度的问题,为此特别准备了一个 前端必会的 HTML+CSS 常用技巧 分享给大家,希望能对您有所帮助前端必会的 HTML+CSS 常用技巧 1、元素居中的方式 2、边框渐变色的实现方式 3、解决父元素高度消失或最小高度不能自适应问题 4、如何实现带三角............原创 2020-04-12 22:15:50 · 210 阅读 · 1 评论 -
前端必会的 HTML+CSS 常用技巧 之 倾斜反圆角按钮的实现
相信大家在开发过程中,会偶尔碰到一些这样的ui样式,但是吧又并不是给的切图,问了一下这个按钮没有切图哦,能切一下图么?然后被对方反问,这样的按钮你不会写?吐槽归吐槽,实现还是可以实现的;无奈,问题依旧是抛给了前端……原创 2024-06-14 09:43:17 · 289 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框原创 2022-08-03 20:36:37 · 817 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式原创 2022-08-02 20:53:11 · 12104 阅读 · 1 评论 -
前端必会的 HTML+CSS 常用技巧 之 css 修改滚动条样式(附上element-ui框架的表格滚动条样式修改)
初始滚动条样式:原创 2021-11-21 21:53:02 · 2025 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 文本超出一定宽度省略号显示
日常开发中,我们常常碰到元素预留的宽度不足以显示所有的文本内容,可能是单行显示的文本也可能是多行显示的文本,这时我们考虑的是超出文本用省略号显示; <!-- 超出文本用省略号替代 --> <div class="box"> 超出文本用省略号替代超出文本用省略号替代超出文本用省略号替代 </div> 单行文本CSS代码如下: .box{ background: #cccccc; width: 200px; /*原创 2021-01-17 20:20:44 · 446 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 移动端布局封装 rem.js 文件
话不多说,步入正题; 1、封装移动端布局 rem.js 文件// 作用:重置html的font-sizefunction resetRootFZ(){ var oHtml = document.querySelector('html'); var w = oHtml.getBoundingClientRect().width; // 设置根字体的大小等于html节点的宽度的十分之一 oHtml.style.fontSize = w/10 + 'px';}resetRootF原创 2020-08-01 10:10:57 · 396 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 关于多个 input 标签不能水平对齐 并且之间存在缝隙的问题 剖析及其解决方案
相信大家在 HTML 布局的时候经常会遇到搜索框,搜索框一般都是两个或者多个input标签水平横向排列组合而成 ,就像我们非常熟悉的度娘的搜索框:想象中的布局非常简单,大家也都非常熟悉input标签的默认display的值为inline-block,inline-block的特点就是标签可以添加大小且可以横向排列,自然而然的也就以为直接把input标签 放在一起就可以实现了……然而事与愿违,得到...原创 2020-04-18 21:06:06 · 2859 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 如何利用CSS实现带三角形的聊天框
思路:利用元素的 border 属性,将其三个方向的 border-color 值设为透明色(或者和其父元素的背景色一致,形成视觉差,俗称障眼法),剩下一个方向的 border-color 的值即为你需求的三角形的颜色。然后利用定位属性把两个子元素层叠在一起,并且使两个子元素左右或者上下相差一个像素(根据实际情况看三角形出现在哪个方向),露出下面的三角形边框,形成视觉差,从而实现带三角形的聊天框。好的,能实现一个小三角形了,那么就拓展此方法实现带三角形的聊天框。一样,另外一个子元素也只留一个方向的。原创 2020-04-12 22:10:27 · 1863 阅读 · 1 评论 -
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题一、问题阐述 问题 1:高度消失 问题 2:父元素设置了最小高度但不能实现高度自适应二、解决方案 第一个方法 第二个方法 第三个方法一、问题阐述 问题 1:高度消失 先解释一下什么是高度消失(高度消失也叫高度塌陷)如下图所示: 上图的代码如下: <style> ...原创 2020-04-12 21:09:11 · 1073 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 边框渐变色的实现方式
话不多说,今天我们就来简单的聊一下关于边框渐变色的实现方式。第一种:利用border-image因为 gradient 属于 image 类型,所以它可以用于任何适用于 image 的地方。正是因为这样,radial-gradient() 能用于此。很多人在移动端注册页面的时候常常会碰到类似以下的图片:那么,在这里我们需要怎么实现上图的效果呢?介绍个相对简单的办法给大家:<head...原创 2020-03-08 17:04:37 · 1868 阅读 · 0 评论 -
HTML布局简集
关于布局的简集原创 2020-03-09 22:42:16 · 193 阅读 · 0 评论 -
CSS3中的动画属性详解
开篇一张图,内容全靠编!!!是的,这次我们讲的就是做个简单的css3小动画那么css3动画是怎么完成的呢?css3里面动画我们可以分成2D动画和3D动画。首先,我们需要了解一下css3动画都有些什么属性。2D动画的属性:变形属性transform:位移—translate()、缩放—scale()、旋转—rotate()、倾斜—skew()。transform:translate(...原创 2020-04-04 22:46:23 · 1042 阅读 · 0 评论 -
前端必会的 HTML+CSS 常用技巧 之 元素居中的方式
相信有很多小伙伴们在接触html、css时经常碰到一些元素如何居中的问题,那么在这里我们就来简单的聊一下css元素居中的那些事儿…话说,css元素居中呢分为两种:一种水平(左右)居中,再者就是垂直(上下)居中了。水平(左右)居中:元素分为两大类:块状元素block和内联元素inline(内联块元素inline-block也统归为内联元素)。1 . 对于内联元素,常见的内联元素有 a –超链...原创 2020-02-22 22:00:00 · 1505 阅读 · 0 评论