HTML 、CSS
关注
分享
扫一扫
HTML\CSS
冷太阳a
小小前端工程师，小本本记笔记。
展开
-
关于flex布局justify-content:space-around最后一个不对齐的解决方法
问题图解决图解决 css 代码 .itemBox { width: calc((100% - 30px) / 3); margin-bottom: 5px; margin-right: 10px; cursor: pointer; text-align: center; border-radius: 6px; border: 1px solid #000; &:nth-child(3n) { margin-ri原创 2022-05-18 15:03:30 · 1087 阅读 · 2 评论 -
快速实现筛选效果
<!-- * @Description: * @Author: Ran junlin * @Date: 2021-04-29 21:21:38 * @LastEditTime: 2022-03-22 09:02:55 * @LastEditors: Ran junlin--><template> <div> <!-- <van-dropdown-menu> <van-dropdown-item title="原创 2022-03-22 09:25:14 · 486 阅读 · 0 评论 -
简易时钟倒计时（带盒子投影css）
<!-- * @Description: * @Author: Ran junlin * @Date: 2022-03-02 11:22:14 * @LastEditTime: 2022-03-02 11:22:39 * @LastEditors: Ran junlin--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2022-03-02 11:24:46 · 322 阅读 · 0 评论 -
js八股文心得体会
function ADD(x = 1, y = 0) { this.x = x this.y = y}ADD.prototype.addFn = function() { return this.x + this.y}const m = new ADD(5, 6) // console.log(m); // console.log(m.addFn()); // // 普通函数、 // function fnP(a, b, c) { /原创 2022-02-26 22:38:36 · 645 阅读 · 0 评论 -
vue中transition动画（移动端页面切换左右滑动效果）
例子一：（简单进入和离开动画）demo1<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">vue2！</h1> <h1 v-show="isShow"原创 2022-02-11 10:12:18 · 8295 阅读 · 0 评论 -
eachart toolbox图标转表格数据
toolbox: { show: true, feature: { dataZoom: { yAxisIndex: "none", }, //区域缩放，区域缩放还原 dataView: { readOnly: false, optionToContent: function (opt) { let axisData = opt.xAxis[0].dat.原创 2021-11-30 14:43:39 · 283 阅读 · 0 评论 -
flex-shrink: 0让盒子水平上出现滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-10-17 11:36:47 · 275 阅读 · 0 评论 -
纯css划上图片显示文字
<div class="animate"> <ul> <li class="box imgSc"> <img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""> <div class="text text1">This is my life</div> </li>原创 2021-04-27 14:31:37 · 334 阅读 · 1 评论 -
vant附带样式去除
用::v-deep深度选择器也未能去除样式，果断采用js去除代码如下： var classVal = document.querySelector(".van-hairline--bottom").getAttribute("class"); //删除 classVal = classVal.replace("van-hairline--bottom", ""); document.querySelector(".van-hairline--bottom").setAtt.原创 2021-04-22 17:23:32 · 2344 阅读 · 1 评论 -
vue里用原生js写吸顶功能【vue重构小米商场】
html部分js部分CSS页面效果1.未滚动页面2.滚动到scrollTOP=153时出现原创 2020-06-03 15:03:55 · 236 阅读 · 0 评论 -
css中的@media媒体查询用法总结
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> *{ margin: 0;padding: 0; } .contain原创 2021-02-03 16:53:21 · 463 阅读 · 0 评论 -
element_ui table修改表格样式
修改表格点击选中时效果 /deep/.el-table__body tr.current-row > td { background: #406bf8 !important; color: #fff; cursor: pointer;}2.修改过渡时效果/deep/.el-table--enable-row-hover .el-table__body tr:hover > td { background: #406bf8 !important; color: .原创 2020-12-14 11:53:32 · 1363 阅读 · 0 评论 -
36种漂亮的CSS3网页按钮Button样式
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="text/css"> body{ background: #f5faff; } .demo_co.原创 2020-07-22 15:52:04 · 2036 阅读 · 1 评论 -
消除flex-wrap产生的间距
先看使用flex-wrap: wrap正常出现的效果案例是在微信小程序中举例的，若用H5网页，把view 和 text换成对应的 div与span标签//html<view class="box"> <view class="chunk color1"> 用户名 <text> Tomo </text> </view> <view clas原创 2020-07-10 19:48:53 · 4020 阅读 · 1 评论 -
文字不换行显示，显示不完的用省略号
文字不换行显示，显示不完的用省略号可以先给乘文字的盒子给个宽 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;原创 2020-07-06 18:21:25 · 247 阅读 · 0 评论 -
css简单遮罩效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遮罩</title> <style> /*<!--首先确定遮罩层的大小-->原创 2020-06-11 15:08:28 · 247 阅读 · 0 评论 -
关于Position:fixed固定定位后遇到问题解决方法
关于Position:fixed固定定位后遇到的问题:首先要理解 fixed 固定定位以后会使其脱离文档流，脱离文档流以后就会漂浮在页面上不会占据空间，导致以后的元素内容会上移，会被脱离文档流的元素遮挡。解决方法一般一个网页header部分会遇到这种问题。1.这里可以给header部分设置高，然后给header一下的元素给margin-top，可以实现两个分开。另外注意position:fixed，一定要设置top：0； left：0:； 不然会引起margin-top无效。...原创 2020-05-23 14:05:10 · 7527 阅读 · 1 评论 -
前端样式重置reset.css
/* 清除内外边距 /body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, / structural elements 结构元素 /dl, dt, dd, ul, ol, li, / list elements 列表元素 /pre, / text formatting elements 文本格式元素 /fieldset, lengend, but...原创 2020-04-23 23:22:25 · 434 阅读 · 0 评论 -
优快云-markdown编辑器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2019-12-02 20:39:57 · 204 阅读 · 0 评论 -
CSS中的浮动、高度塌陷以及清除浮动.
一、浮动的原因：当元素浮动后就会脱离文档流（不占空间，不在五行之中），后面没有浮动的元素就会填补上来，这样就会产生浮动后的塌陷问题。== 解决清除浮动方法：==注意:在写浮动时，尽量要给浮动的元素用父级盒子包裹起来好做清除浮动的后顾之忧1.给浮动后的父级元素加上height；2.给父级元素加overflow：auto；3.给不受浮动影响的元素加上：.clearfix::after{c...原创 2019-11-10 15:08:42 · 215 阅读 · 0 评论 -
嵌套块级元素垂直外边距合并（塌陷）解决方案
Margin合并，相邻元素会合并没有padding,border,则相邻margin上下会合并，左右不会父元素与子元素都设置margin-top时取最大值兄弟元素margin-top与margin-bottom合并解决方法父元素添加padding-top,border取消与子元素margin合并根元素的盒的margin不合并浮动可以取消margin合并1人点赞CSS“小礼物走...原创 2019-11-10 14:51:43 · 756 阅读 · 0 评论 -
Flex 布局
Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box {display: flex;} 行内元素也可以使用 Flex 布局。.box {display: flex;} Webkit 内核的浏览器，必须加上-webkit- 前缀。.box {display...原创 2019-11-03 19:03:22 · 816 阅读 · 0 评论 -
显示与定位.
在HTML中，元素会按照标准的“文档流”布局方式进行布局，即“从左到右，从上到下”的方式进行布局，而通过CSS里面的部分定位和显示方式的设置可以使元素脱离“文档流”，采用特殊的布局方式进行布局，或者在页面中进行“隐藏”，而“隐藏”在CSS中又有两种定义方式，一种可以脱离“文档流”，一种仍然存在于“文档流”的布局中。文档流文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都...原创 2019-10-31 22:09:38 · 372 阅读 · 0 评论 -
Css盒子模型、Css样式背景、 vertical-align
一、CSS盒子模型什么是盒子模型所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。一个盒子是由四个部分组成① “内容–content”（盒子内的物件）、② “内间距–padding”（物件和盒子的距离）、③ “边框–border”（盒子壁）、④ “外间距–margin”（盒子和其它物体的距离）IE盒子模型与w3c的盒子模型(1) 由于一些“客观”的...原创 2019-10-27 15:10:50 · 454 阅读 · 0 评论 -
CSS字体样式设置、CSS文本样式设置
一、CSS字体样式设置1.字体样式设置字体样式大致有如下几种特征：字体类型（风格）、字体粗细、字体大小、字体系列(1)字体类型（风格） font-style用于设置字体风格，可设置以下值：① normal：普通字体② italic：斜体③ oblique：倾斜字体(2)字体粗细 font-weight用于设置字体粗细，可设置以下值：① normal：正常粗细② bold：粗...原创 2019-10-22 18:24:29 · 15784 阅读 · 4 评论 -
2019.10.18【CSS选择器+优先级权重】
一、CSS概述？1. 什么是Css?CSS，全称“Cascading Style Sheets”，用于设置HTML标签的样式，美化网页。2. Css的基本机构？原创 2019-10-19 16:51:11 · 214 阅读 · 0 评论 -
2019.10.15【datalist/output/ html实用标签/相对路径和绝对路径】
一.表单新增标签① datalist 标签 datalist规定输入域的选项列表，类似于select标签.注意： datalist的一定要有id属性，并且此属性还必须要和某一个文本域input的list属性值一样才能渲染出来。② output 标签output 元素用于不同类型的输出，比如计算或脚本输出...原创 2019-10-15 18:42:55 · 350 阅读 · 0 评论 -
2019.10.14【Input/form新增功能】
一.input新增的值1. input标签type属性① email 用于应该包含“e-mail"地址的输入框url 用于应该包含“URL"地址的输入框search 用于应该“搜索内容"的输入框number 用于应该包含“数值"的输入控件tel 规定显示的类型为“电话号码"的输入框range 规定显示的类型为“数值选择范围"选择控件color规定显示的类型为“颜色"选择控件日...原创 2019-10-14 17:46:41 · 299 阅读 · 0 评论 -
2019.10.12【iframe\列表标签\表单标签】
四、HTML框架标签 iframeiframe 元素会创建包含另外一个网页文档的内联框架（即行内框架），所有浏览器都支持 标签。基本使用常用属性和unescape()我们可以使用js内置的escape()和unescape();方法对中文和...原创 2019-09-29 17:45:28 · 436 阅读 · 0 评论 -
远程控制
一、远程控制方式一：windows自带的远程桌面【局域网时优先使用】被控制方设置1.打开系统属性（win+pause）–》进入远程设置–》在远程协助里勾选允许远程协助连接计算机2.选择用户-添加一个用户到远程桌面组（建议添加administrator用户，权限较高，然后请确保你选择的当前账户是设置了密码的，即电脑开机使用的密码，必须设置）–最后一定要点击确定3.确保Remot...原创 2019-09-27 17:47:01 · 334 阅读 · 0 评论 -
通用语法、设计模式基础、数据库基础复习与总结【2019.09.25】
**总结一、通用语法复习与总结说出变量代表了什么？以及如何定义？还有一些注意事项。 答：代表了现实生活中永远在变化的事物现象，定义：var 变量名=值 ； *注意1.变量名只能为英文字母，数字，下划线，构成，且变量名的开头不能为数字2.各种符号都应该写英文符号，如果逗号,点号，分号，然后单词大小写不要写错啦3.如果变量名由多个单词构成，请使用小驼峰的写法小驼峰写法：类似于...原创 2019-09-25 16:30:36 · 191 阅读 · 1 评论