CSS
林间风雨
一名积极前进的软件工程师
展开
-
网站浮动栏
<!-- 客服 --><div class="custCare"> <ul> <li> <div class="cus-service"> <img src="<?php bloginfo('template_directory'); ?>/img/cus-service.jpg" /> <div class="addWx">扫码添加客服微信&原创 2022-05-05 17:35:45 · 335 阅读 · 0 评论 -
css 圆点背面两层背景并能动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .normal_dot { position : relative; width : 6px; height : 6px;原创 2022-03-04 11:03:25 · 239 阅读 · 0 评论 -
label(table) 标签的使用
<h3>label(table) 标签的使用 </h3> <label> 输入账号: <input type="text" /> </label> <br /> <label for="two"> 输入账号: <input type="text" /> <input type="text" id="two"/></label> <hr />原创 2022-02-18 13:11:04 · 560 阅读 · 0 评论 -
PC端响应式媒体断点。屏幕使用占比。操作系统使用占比。浏览器使用占比。
@media (min-width: 1024px){ body{font-size: 18px} } /*>=1024的设备*/ @media (min-width: 1100px) { body{font-size: 20px} } /*>=1100的设备*/ @media (min-width: 1280px) { body{font-size: 22px;} } /*>=1280的设备*/ @media (min-width原创 2022-02-10 11:46:00 · 722 阅读 · 0 评论 -
css 样式图 - 对话框
对话框 .alertDialog { /* 对话框:一个圆角矩形和一个小三角形 */ width: 150px; height: 100px; background: #f00; border-radius: 10px; position: relative; } .alertDialog:before { content: ""; width: 0; height: 0; position: absolut原创 2021-11-17 17:33:46 · 547 阅读 · 0 评论 -
CSS实现图片底部弧度效果
还有一种就是使用border-radius的八个值 <!-- x轴 上1 右2 下3 左4/ y轴 上5 右6 下7 左8 --> <div style="width: 400px;height: 200px;background:red;margin: 0 auto; border-radius: 50% 50% 0 0 / 20% 20% 0 0;"> 八个值 </div> <div style="wi.原创 2021-11-16 15:13:11 · 1908 阅读 · 1 评论 -
点击父级触发子级变色
<li><button/></li> html 结构li { &:active { button { background: red; } }原创 2021-10-14 17:14:00 · 221 阅读 · 0 评论 -
css3按钮动画
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF;原创 2021-10-09 14:16:23 · 368 阅读 · 0 评论 -
html 模板, flex宽度自适应, 消除html中body上面的空白
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html-demo</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> </script> &l原创 2021-07-10 11:38:17 · 280 阅读 · 0 评论 -
img 图片处理
.img { transition: all 0.6s; object-fit: contain;}#managementAdd .certificateImg:hover{ transform: scale(4.5); position: relative; z-index: 2;}原创 2021-05-08 10:18:45 · 125 阅读 · 0 评论 -
scss 入门
Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。Sass 文件后缀为.scss。1、变量/* 定义变量与值 */$bgcolor:lightblue;$textcolor:darkblue;$fontsize:18p...原创 2021-04-22 11:30:42 · 147 阅读 · 0 评论 -
css 滚动条 局部
// 滚动条.scroll-area::-webkit-scrollbar { /*滚动条整体样式*/ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 3px;}.scroll-area::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 3px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: .原创 2021-04-08 16:18:25 · 685 阅读 · 0 评论 -
scss background: url()路径无效问题
@import "../style/lines.scss" 导致background: url()路径无效问题解决方案是在webpack中的vue.config.js中配置configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/assets/img', } }; return obj}然后在lines.scss中...原创 2021-04-08 09:39:44 · 4790 阅读 · 0 评论 -
uniapp 总计 涵盖(html vue css js)
uniapp 总计 涵盖(html vue css js)原创 2021-03-04 09:30:53 · 1651 阅读 · 1 评论 -
table 例1、左侧固定,右侧滑动 例2、固定顶部第一行,左边第一行,例3,可固定左侧和顶侧
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>模拟表格</title></head><body><styletype="text/css"rel="stylesheet">.tableOut{width:200px;...原创 2021-02-23 13:02:01 · 1193 阅读 · 0 评论 -
轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lunbotu02</title> <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <link href="style.原创 2021-01-29 16:55:49 · 99 阅读 · 0 评论 -
icomoon 下载及使用
https://icomoon.io/app/#/select原创 2021-01-22 00:44:40 · 988 阅读 · 2 评论 -
css 为什么清除浮动
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .box1 { /* height: 200px; 很多情况下,我们父级盒子,不方便给高度 考虑孩子高度会变 */ width: 600px; background-color: pink; } .box2 { width: 60.原创 2021-01-09 23:03:47 · 73 阅读 · 0 评论 -
css圆角边框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><style>div{width:200px;height:200px;border:1pxsolidred;}div:f...原创 2021-01-01 23:11:10 · 140 阅读 · 0 评论 -
span与img在同一行
例子1:同1个div里面,span标签里的文字和img标签里的图片,怎么样做到水平中心线重合?span设置line-height和图片高度一样 ;img里面设置样式 vertical-align:middle例子2:<div class="navbar-header" style="margin-right: 5%; margin-left: 5%;"> <a href="#" class="navbar-brand">...原创 2020-12-30 16:29:52 · 2776 阅读 · 0 评论 -
CSS绘制三角形和箭头,不用再用图片了
前言还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。先来看看这段代码:/**css*/.d1{ width: 0; height: 0; border: 100px solid #339933;}/**html*/<div class="d1"></div>/**css*/.d2{ width: 0; height: 0; border-width: 100px;原创 2020-12-30 14:46:21 · 157 阅读 · 0 评论 -
css 优先级
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="关键词1,.原创 2020-12-28 13:19:34 · 62 阅读 · 0 评论 -
进度条插件 NProgress
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>NProgress</title> <script src='https://unpkg.com/nprogres...原创 2020-12-24 08:39:57 · 740 阅读 · 0 评论 -
css 不同分辨率,兼容性处理
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { m.原创 2020-12-23 15:11:44 · 620 阅读 · 1 评论 -
css hover时顶部的内容遮住底部的内容
<div class="secondFloor"> <div class="publish"> 大家今天都提前到公司,并且服装整齐,每个人都说出自己的想法。大家今天都提前到公司,并且服装整齐,每个人都说出自己的想法。 </div></div><div class="thirdFloor">浮在这个内容上</div>-----------------------------------------.原创 2020-12-23 10:10:24 · 906 阅读 · 0 评论 -
CSS 实现必填项前/后添加红色星号
1 . 常规写法<label><span style="color:red;">* </span>用户名 : </label><input type="text" value=""/>2 . CSS写法(更简洁方便 , 而且便于统一调整样式)<style> label.xrequired:before { content: '* '; color: red; }&.原创 2020-12-17 22:28:55 · 1733 阅读 · 0 评论 -
css样式 插入地图插件
<div id="mapContainer" style={{ position: "absolute", top: "0", bottom: "0", width: "100%", zIndex: 1 }}></div>原创 2020-12-16 13:07:53 · 442 阅读 · 0 评论 -
iconfont使用简易教程 svg
因为自己的项目中需要使用图标,而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易,通用的使用图标方式以便参考。一、 寻找适用的图标官方网址:http://www.iconfont.cn/找到需要的icon以为例,添加入库。二、 生成代码:点击右上角购物车图标 点击下载代码,得到zip包,解压即可获得需要的文件。 ...原创 2020-12-11 10:56:09 · 1081 阅读 · 0 评论 -
CSS把圆分八等份
简介对于CSS的练习介绍如何绘制八等分的圆。问题1 主要思路这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。1 注意:每个半圆最后要用外面的外包矩形切一下 详见#lfet #right2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对,要么使用z-index问题2 重点代码1 半圆和圆 .circle-left{ width: 100px;height: 200px; border原创 2020-12-03 18:08:29 · 2828 阅读 · 0 评论 -
父opacity影响子解决方案
background:rgba(153,153,153,0.5);父用这个,子就不会继承父的opacity原创 2020-11-28 20:32:29 · 107 阅读 · 0 评论 -
css背景图片不占满问题
.login_bg {background: url(/static/media/drawBoard.20961413.png);height: 100vh;overflow: auto;display: flex;align-items: center;justify-content: center;}原创 2020-11-26 14:33:45 · 1165 阅读 · 0 评论 -
CSS实现鼠标移动到图片,更换图片,两种方
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS实现鼠标移动到图片,更换图片,两种方式</title><style>.img-1a:link{display:block;width:200px;...原创 2020-11-20 15:18:30 · 3164 阅读 · 0 评论 -
CSS ul li:nth-child的详细实例
下面我将用几个典型的实例来给大家讲解:nth-child的实际用途:Tips:还用低版本的IE浏览器的哥们请绕过!1、取ul li 第一条 ul li:first-child 和 最后一条ul li:last-child2、指定取某条,ul li:nth-child(n),改变n的数字3、ul li:nth-child(n+3) 从大于等于3开始取值4、ul li:nth-child(n+3) 从小于等于3开始取值5、:nth-child(2n)选取偶数......原创 2020-10-30 16:26:49 · 4955 阅读 · 1 评论 -
flex计算。flex: 2 1 0%;flex: 2 1 auto;flex: 1 1 200px; z(-index: 1; position: sticky; )
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis,默认值为0 1 auto。1.flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。2.flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。3.flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。<div class="parent"> <div class="item-...原创 2020-10-22 11:02:21 · 2007 阅读 · 0 评论 -
css 积累 笔记 发过开程遇到的问题
6、 /*css初始化*/*{margin:0;padding:0;/*清除内外边距*/font-size:20px;}.normalfont{font-size:.75rem;}ul{list-style:none;/*去掉列表样式小点*/}a{col...原创 2020-10-11 14:50:18 · 141 阅读 · 0 评论 -
js jqurey css 鼠标移动到父级显示子级
1、鼠标移动到父级显示子级<style type="text/css"> .father .child{ display:none; } .father:hover .child{ display:block; z-index: 6; }</style><body> <div class="father">鼠标移进来有惊喜哦 <p class="child"&...原创 2020-09-29 01:10:01 · 947 阅读 · 0 评论 -
web网站css,js更新后客户浏览器缓存问题
解决办法方法1更新文件后更改css/js文件名。其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>1改一下css文件名:<link rel="stylesheet" href="styleV2.css" t.原创 2020-08-11 15:14:30 · 605 阅读 · 0 评论 -
element vue demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <...原创 2020-08-04 18:43:57 · 164 阅读 · 0 评论 -
通知图标右上角数字提示
通知图标右上角数字提示<img src="${ctx}/images/layout/notice.svg" class="noticeSvg"/><div class="redBackgroup"> <span>9998</span></div>.redBackgroup { height: 18px; text-align: center; vertical-align: middle; ba.原创 2020-07-10 16:24:21 · 615 阅读 · 0 评论 -
css 控制文字
1、控制一行white-space: nowrap;overflow: hidden;text-overflow: ellipsis;2、控制第几行overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2...原创 2020-04-23 16:20:36 · 256 阅读 · 0 评论