HTML+CSS
关注
分享
扫一扫
尔嵘
愿你阳光下像个孩子，风雨里像个大人。
展开
-
基于css+html+js实现女神节表白完整代码
这段代码会在页面中显示一个红色的心形图案，并且每隔一段时间会有一个跳动的效果。当用户点击红心时，屏幕中央会出现“Happy Women's Day!原创 2023-03-15 09:57:07 · 628 阅读 · 0 评论 -
div中所有元素上下居中对齐（父级高度有限制，子元素不限制）
div内有多行内容，且内容大致是按照左中右结构排列的情况，且父级高度有限制，子元素不限制。<div style="width: 100%; height: 175px;display: flex; justify-content: space-around;color: #c7fffb;font-size: 24px;"> <div style="display: flex; justify-content: center; flex-direction:原创 2022-03-17 09:46:42 · 1880 阅读 · 1 评论 -
css实现右上角飘带效果
效果：完成代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } .wrap { /* 设置宽高 */ width: 350px;原创 2022-03-14 14:57:46 · 1356 阅读 · 0 评论 -
css实现盒子的四个角高亮边框显示
效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } html,body { line-.原创 2022-01-14 17:47:11 · 2616 阅读 · 1 评论 -
iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用
写这篇文章的目的：我想在html中使用iconfont图标元素，选择好的图标下载到本地后，引入iconfont.css文件无法直接使用iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用如下：使用在线转换工具 Transfonter注意： 1、原来下载的iconfont.css文件中有三种类型的：woff2、woff、truetype，这里我选择woff作为转换源，即：//at.alicdn.co...原创 2021-12-23 16:46:28 · 3186 阅读 · 1 评论 -
当我们谈论颜色时，我们在谈论什么 - 基础知识篇
谈到颜色，前端工程师首先想起的便是基于 RGB 的 16 进制颜色代码，这也是我们工作中最常用到的数值表示方式。但是当我们的谈话再深入一些，话题远不止这些：前端：「我在 hackathon 时做了个网站，配色怎么看都丑，你帮我看看？」设计：「这俩颜色不搭，光晕现象都出来了，还有把这里的饱和度调低一点，亮度调高一点。」前端：「……」（你™在说什么！）这时你应该去向设计小伙伴要最熟悉的 16 进制颜色代码了，但被抱怨缺乏设计感的挫折还是有一点的。想要和小伙伴愉快的交流下去，我们...转载 2021-11-02 14:18:15 · 233 阅读 · 1 评论 -
web网站整体变灰色仅仅需要两行代码
html{ /* 网页全部设置灰色 */ -webkit-filter: grayscale(100%); filter: grayscale(100%);}原创 2021-05-26 14:04:20 · 1439 阅读 · 4 评论 -
span标签有汉字字符不能同行问题、icon和字符串不能垂直居中问题
1.span标签中汉字、数组、字母不能同行的解决办法：white-space:nowrap;2.vue中icon和字符串垂直居中： <a-row> <a-col :span="24" style="display: flex;align-items: center;color: #fff;"> <a-icon type="left-square" style="font-size: 16px;display原创 2021-03-03 13:09:27 · 1059 阅读 · 0 评论 -
css中隐藏的两种方式
第一种方式：display:none第二种方式：visibility:hiddendisplay 隐藏不占据原来的文档，即会让出空间 ；visibility 隐藏占据原来的文档，不会让出原来所占的空间。...原创 2019-10-23 13:05:42 · 350 阅读 · 0 评论 -
CSS中如何快速生成雪碧图
最近遇到了导入雪碧图的项目，因为雪碧图更加好写，然后发现了一款比较好用的可以在线生成雪碧图的网页：https://www.toptal.com/developers/css/sprite-generator可以选择导入图片，改变图片的大小，还可以控制雪碧图的生成方向（垂直，水平。。。）...原创 2019-10-23 09:38:25 · 774 阅读 · 0 评论 -
页面中文本多行省略号点击展开的方法
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <style> .example { overflow: hidden; text-overflow:...原创 2019-07-18 14:24:25 · 800 阅读 · 0 评论 -
原生JS中点击切换不同内容
效果如下：163邮箱切换练习代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>offHight思路</title> <style type="text/css"> *{ margin: ...原创 2019-07-06 17:03:42 · 1626 阅读 · 1 评论 -
原生JS中的实现开关逻辑的四种方法
当你随着对前端学习的深入和做更多的项目时，会发现原生JS中开关逻辑是非常重要的.注意:在运行的时候去掉注释，下面的代码仅保留第一种方式。效果如下：（开关图片建议自己找两张，实现点击切换）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><...原创 2019-07-06 16:54:42 · 5117 阅读 · 0 评论 -
css实现加入购物车动画（水平抛物线）
在做Vue的练习项目中，遇到了一个动画问题，在做加入购物车时，有个从左上往下抛的动画，当时没有思绪，后来得强哥指导。<!DOCTYPE html><html lang="en" style="width:100%;height:100%;"><head> <meta charset="UTF-8"> <meta ...原创 2019-06-28 21:23:58 · 5089 阅读 · 6 评论 -
基于原生JS的运动版实时时钟的设计
图片img：本来想着压缩一下上传的，但是不允许，如果你们有既省空间有方便上传图片视频的方法，欢迎留言分享给我。效果图：HTML代码部分：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title><...原创 2019-06-03 21:38:56 · 3205 阅读 · 3 评论 -
基于原生JavaScript的选字练习游戏
实现的效果图（GIF）：为了层次清晰，我将HTML、CSS、JS三个部分分开来写：Html代码部分:<div id="wrap"> <div id="time">剩余时间:0</div> <div id="count">数量:0</div> <div id=...原创 2019-06-01 16:15:06 · 596 阅读 · 1 评论 -
VUE中的路由router
首先，需要下载去Vue.js官网或者Vue.js菜鸟教程下载vue-router.js插件。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的...原创 2019-06-12 21:57:57 · 786 阅读 · 0 评论