前端必会的 HTML+CSS 常用技巧（2024-06-14已更）

已于 2024-06-14 10:03:26 修改
阅读量210 收藏 3
点赞数
分类专栏： HTML + CSS 文章标签： css html html5 css3 前端
于 2020-04-12 22:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhuangvi/article/details/105476581
版权

  相信很多小伙伴在做项目的时候会经常碰到一些关于 HTML 或者 CSS 方面的看起来简单，但实现起来就感觉麻烦无从下手的问题，为此特别准备了一个 前端必会的 HTML+CSS 常用技巧 分享给大家，希望能对您有所帮助：

前端必会的 HTML+CSS 常用技巧

  1. 元素居中的方式
  2. 边框渐变色的实现方式
  3. 解决父元素高度消失或最小高度不能自适应问题
  4. 如何实现带三角形的聊天框
  5. 解决多个 input 标签不能水平对齐 并且 之间存在缝隙的问题
  6. 移动端布局封装 rem.js 文件
  7. 文本超出一定宽度省略号显示
  8. 虚线的特殊实现方式
  9. 移动端 1px 边框
  10. 倾斜反圆角按钮

 
 
 
 

后续会持续更新……

 
如有不足，望大家多多指点！ 谢谢！

zhuangvi
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML+CSS项目开发经验总结(推荐)
09-28
HTML+CSS项目开发经验是前端开发者的必备技能，本文将基于标题和描述中的内容，深入讲解HTML和CSS在实际项目中的应用与技巧。 首先，公共样式的设定是提高开发效率的关键。在开始项目前，应预估各页面的样式需求，...
第6章 前端面试技能拼图4： 知识广度 - 从前端到全栈
03-13
在前端面试过程中，展现出丰富的知识广度是至关重要的，这不仅体现了个人的技术素养，也彰显了作为全栈开发者的潜力。本章将深入探讨从前端到全栈的多个关键知识点，帮助你构建全面的技能拼图，提升在职场中的竞争力...
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
热门推荐
ZhuangWei的博客
08-02 1万+
前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框
ZhuangWei的博客
08-03 817
前端必会的 HTML+CSS 常用技巧 之 移动端 1px 边框
前端必会的 HTML+CSS 常用技巧 之 如何利用CSS实现带三角形的聊天框
ZhuangWei的博客
04-12 1863
思路：利用元素的 border 属性，将其三个方向的 border-color 值设为透明色（或者和其父元素的背景色一致，形成视觉差，俗称障眼法），剩下一个方向的 border-color 的值即为你需求的三角形的颜色。然后利用定位属性把两个子元素层叠在一起，并且使两个子元素左右或者上下相差一个像素（根据实际情况看三角形出现在哪个方向），露出下面的三角形边框，形成视觉差，从而实现带三角形的聊天框。好的，能实现一个小三角形了，那么就拓展此方法实现带三角形的聊天框。一样，另外一个子元素也只留一个方向的。
前端必会的 HTML+CSS 常用技巧 之 元素居中的方式
ZhuangWei的博客
02-22 1505
相信有很多小伙伴们在接触html、css时经常碰到一些元素如何居中的问题，那么在这里我们就来简单的聊一下css元素居中的那些事儿… 话说，css元素居中呢分为两种：一种水平（左右）居中，再者就是垂直（上下）居中了。 水平（左右）居中： 元素分为两大类：块状元素block和内联元素inline（内联块元素inline-block也统归为内联元素）。 1 . 对于内联元素，常见的内联元素有 a –超链...
前端必会的 HTML+CSS 常用技巧 之 css 修改滚动条样式（附上element-ui框架的表格滚动条样式修改）
ZhuangWei的博客
11-21 2025
初始滚动条样式：
前端必会的 HTML+CSS 常用技巧 之 文本超出一定宽度省略号显示
ZhuangWei的博客
01-17 446
  日常开发中，我们常常碰到元素预留的宽度不足以显示所有的文本内容，可能是单行显示的文本也可能是多行显示的文本，这时我们考虑的是超出文本用省略号显示；   <!-- 超出文本用省略号替代 --> <div class="box"> 超出文本用省略号替代超出文本用省略号替代超出文本用省略号替代 </div>     单行文本 CSS代码如下：   .box{ background: #cccccc; width: 200px; /*
前端必会的 HTML+CSS 常用技巧 之 边框渐变色的实现方式
ZhuangWei的博客
03-08 1868
话不多说，今天我们就来简单的聊一下关于边框渐变色的实现方式。 第一种：利用border-image 因为 gradient 属于 image 类型，所以它可以用于任何适用于 image 的地方。正是因为这样，radial-gradient() 能用于此。 很多人在移动端注册页面的时候常常会碰到类似以下的图片： 那么，在这里我们需要怎么实现上图的效果呢？介绍个相对简单的办法给大家： <head...
前端必会的 HTML+CSS 常用技巧 之 移动端布局封装 rem.js 文件
ZhuangWei的博客
08-01 396
  话不多说，步入正题；   1、封装移动端布局 rem.js 文件 // 作用：重置html的font-size function resetRootFZ(){ var oHtml = document.querySelector('html'); var w = oHtml.getBoundingClientRect().width; // 设置根字体的大小等于html节点的宽度的十分之一 oHtml.style.fontSize = w/10 + 'px'; } resetRootF
2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
sheep_Code的博客
11-15 5280
Html + Css 学习 一、VSCode常用 ( 前端还在学习, 待更新… ) //1. VScode常用快捷键 * 新建文件：ctrl + N * 切换自动换行：alt + Z * 复制当前行：ctrl + C；ctrl + V； * 执行在默认浏览器 ：alt + B; * 设置vscode文件折叠属性: 打开设置 -> 搜索compact -> 勾选 * (Win10桌面上)直接打开Powershell窗口: shift+右键 * 打开终端: "ctrl+`" * vue_shop项
前端静态模板-美术-学生作业毕设实训素材.zip
04-07
在前端开发领域，静态模板是构建网页或应用程序的常用方式，尤其对于学生作业、毕设项目来说，它们提供了快速上手和实践的基础框架。"前端静态模板-美术-学生作业毕设实训素材.zip"这个压缩包文件，显然是为了帮助...
前端静态模板-手机网站红黑-学生作业毕设实训素材.zip
04-07
在这个模板中，可能会包含一些JavaScript库或框架，如jQuery、Vue.js或React.js，这些都是现代前端开发常用的工具。通过这些代码，学生可以了解如何利用JavaScript进行事件处理、DOM操作以及状态管理。 此外，如果...
前端静态模板-手机商城白背景-学生作业毕设实训素材.zip
04-07
在前端开发领域，静态模板是构建网页应用的一种常见方式，尤其适用于快速原型设计或作为学生作业和毕设项目的基础。本资源"前端静态模板-手机商城白背景-学生作业毕设实训素材.zip"提供了一个完整的前端应用源码，...
前端必会的 HTML+CSS 常用技巧 之 关于多个 input 标签不能水平对齐 并且之间存在缝隙的问题 剖析及其解决方案
ZhuangWei的博客
04-18 2859
相信大家在 HTML 布局的时候经常会遇到搜索框，搜索框一般都是两个或者多个input标签水平横向排列组合而成 ，就像我们非常熟悉的度娘的搜索框： 想象中的布局非常简单，大家也都非常熟悉input标签的默认display的值为inline-block，inline-block的特点就是标签可以添加大小且可以横向排列，自然而然的也就以为直接把input标签 放在一起就可以实现了……然而事与愿违，得到...
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题
ZhuangWei的博客
04-12 1073
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题一、问题阐述  问题 1：高度消失  问题 2：父元素设置了最小高度但不能实现高度自适应二、解决方案  第一个方法  第二个方法  第三个方法 一、问题阐述   问题 1：高度消失     先解释一下什么是高度消失（高度消失也叫高度塌陷）如下图所示：   上图的代码如下： <style> ...
CSS3中的动画属性详解
ZhuangWei的博客
04-04 1042
开篇一张图，内容全靠编！！！ 是的，这次我们讲的就是做个简单的css3小动画 那么css3动画是怎么完成的呢？ css3里面动画我们可以分成2D动画和3D动画。首先，我们需要了解一下css3动画都有些什么属性。 2D动画的属性： 变形属性transform： 位移—translate()、缩放—scale()、旋转—rotate()、倾斜—skew()。 transform:translate(...
前端必会的 HTML+CSS 常用技巧 之 倾斜反圆角按钮的实现
最新发布
ZhuangWei的博客
06-14 289
相信大家在开发过程中，会偶尔碰到一些这样的ui样式，但是吧又并不是给的切图，问了一下这个按钮没有切图哦，能切一下图么？然后被对方反问，这样的按钮你不会写？吐槽归吐槽，实现还是可以实现的；无奈，问题依旧是抛给了前端……
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhuangvi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值