关注
分享
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
美奇开发工作室
后端开发工程师，做一个喜欢分享技术的领域开发者！
展开
-
CSS美化div滚动条样式
【代码】CSS美化div滚动条样式。原创 2023-04-25 21:32:49 · 373 阅读 · 0 评论 -
css让图片在a标签里垂直居中
css让图片在a标签里垂直居中原创 2022-12-15 23:07:29 · 579 阅读 · 0 评论 -
css文本内容过长时就自动换行
wc，后面的按钮都看不到！原创 2022-09-06 13:26:01 · 8288 阅读 · 0 评论 -
CSS通用样式
1、新建一个reset.css文件，代码如下：@charset "utf-8";/* CSS Document *//*Reset*/*{box-sizing:content-box;}body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting el.原创 2020-12-31 13:16:36 · 1108 阅读 · 4 评论 -
CSS实现table表格鼠标滑过（悬浮）改变颜色
效果图：其实很简单，就一行css代码：tbody tr:hover{ cursor:pointer; background-color: rgba(35,198,200,0.3);}前面添加了tbody表示只作用到表格主体部分，标题不会改变颜色。原创 2020-10-15 16:48:07 · 4298 阅读 · 0 评论 -
CSS自定义美化单选按钮样式
直接上效果图：HTML代码：<div style="display:flex;"> <div class="omgui-radio"> <input type="radio" value="1" id="showon" name="isshow" checked="checked" /> <label for="showon">显示</label> </div> <div class="omgui-ra原创 2020-10-14 22:09:31 · 854 阅读 · 1 评论 -
解决sidenav菜单插件在手机浏览器上侧边栏不能关闭问题
问题场景：该侧边栏插件在电脑浏览器和安卓手机上都能触发关闭fadeOut事件，但是在苹果ios上隐藏事件却完全没有反应。分析原因：div在苹果ios上没有click事件，所以触发不了$(document).click()解决办法：给div添加cursor:pointer光标属性，从而可以触发click事件，只需要简单修改css代码，如下：.sidenav { background: #212121; box-shadow: 2px 2px 6px rgba(0, 0, 0, .原创 2020-07-24 11:33:11 · 410 阅读 · 0 评论 -
css让文字垂直居中
使用vertical-align:middle设置在父元素中的位置：html+css代码：<!DOCTYPE html><html><head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>商品管理后台首页</title> &l.原创 2020-07-23 21:07:33 · 340 阅读 · 0 评论 -
全国哀悼日，让网站全站变成灰色的CSS代码
在CSS文件里添加如下代码即可：<style>body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*oper...原创 2020-04-04 16:32:35 · 492 阅读 · 0 评论 -
css让div盒子高度占完整个屏幕高（盒子的高度自适应屏幕剩余的部分）
先来看一下场景需求：解决方法：给div盒子添加min-height:100vh样式即可，CSS代码如下：body { width: 100%; height: 100%; font-family: "Microsoft YaHei"; font-size: 0.7rem; color: #333; line-height: 0.7rem; background: ...原创 2020-03-10 14:06:09 · 5586 阅读 · 1 评论 -
使用css3的@media多媒体查询，实现Html5网页自适应
第1步、在页面<head></head>标签之间添加下面的代码，来兼容移动设备的展示效果：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码的几个参数解释： width = ...原创 2020-01-11 12:40:58 · 1279 阅读 · 0 评论 -
解决安卓版UC浏览器中，text-align:center文字不能居中问题
1、先来看一下具体案例：这是安卓UC浏览器版本中的bug，其他浏览器是正常的。2、解决方案：在父窗口中添加text-align-last: center;<style> .desc{ clear:both; width:100%; padding-top:50px; padding-bottom:20px; text-align:center;...原创 2019-11-25 12:25:04 · 979 阅读 · 0 评论 -
wap手机端background不让背景图片自动放大
前言：wap手机端为了实现自适应，会添加让页面自动缩放的代码，如下：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />那么问题来了，当我们设置全局页面背景图片时，会发现背景图片也被放大...原创 2019-11-18 11:09:52 · 484 阅读 · 0 评论 -
CSS去掉搜狗浏览器在input type="password" 上自动添加的搜狗键盘图标
案例：当使用搜狗浏览器时，会在密码输入框右侧自动添加一个键盘图标，一般情况下确实挺人性化，没多少影响，但如果想在输入框右侧增加删除或显示密码按钮时，就会被挡住，影响了视觉美感，如下图：解决方法：input::-webkit-input-safebox-button{ display: none;/*去掉搜狗浏览器密码软盘*/}...原创 2019-11-16 14:09:55 · 1118 阅读 · 0 评论 -
css实现div盒子内显示两行或三行，超出部分用省略号显示
1、div盒子内显示一行，超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;2、div盒子显示两行或三行，超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-cl...原创 2019-10-24 15:07:25 · 1943 阅读 · 0 评论 -
CSS常用代码
目录1、边框border2、背景background3、圆角border-radius4、position定位5、阴影box-shadow6、display属性7、text-decoration：文本的修饰（下划线、上划线、删除线等）8、透明度opacity9、文本的对齐方式text-align10、浮动Float11、clear清除浮动12、光标...原创 2019-10-23 11:06:01 · 9400 阅读 · 0 评论 -
CSS3背景颜色渐变（gradients），适用于微信小程序wxss
CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义目录1、线性渐变：从上到下（默认情况下）2、线性渐变： 从左到右3、线性渐变： 对角...原创 2019-10-21 14:01:21 · 889 阅读 · 0 评论 -
css设置字体小于12px的样式
遇到问题：我们都知道html默认的最小字体是：12px，但在开发需求中，有时需要设置更小的字体，例如10px。那么应该怎么办呢？解决方案：span{ font-size: 12px; white-space: nowrap; -webkit-transform-origin-x: 0; /*缩小后文字居左*/ -webkit-transform: sc...原创 2019-10-17 10:12:32 · 1678 阅读 · 0 评论 -
CSS3实现3D立体旋转动画特效
效果图：源代码下载地址：https://download.csdn.net/download/qq15577969/11869377html+css3代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3实现3D魔方动画...原创 2019-10-16 13:45:29 · 2760 阅读 · 0 评论 -
HTML使用CSS美化表格
效果图：示例代码：<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> /*表格样式*/ table { width: 90%; background: #ccc; mar...原创 2018-03-11 12:53:25 · 31599 阅读 · 5 评论 -
css实现超出长度文字自动隐藏或用省略号表示
HTML <span id="nick">名字刚好</span>CSS样式 span{width:50px; display:inline-block;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}样式解析 overflow: hidden ov...原创 2018-03-11 12:53:57 · 10874 阅读 · 0 评论 -
CSS三种漂亮的＜hr＞水平线样式
hr.style-one {/*内嵌水平线*/width:80%;margin:0 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}hr.style-two {/*透明渐变水平线*/width:80%;margin...原创 2018-03-11 12:54:27 · 41981 阅读 · 2 评论 -
CSS设置背景透明度
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法：css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)IE专属滤镜filter:Alpha(opacity=x)，x 的取值从 0 到 100，如fil...原创 2018-04-16 09:05:53 · 87845 阅读 · 2 评论 -
layui按钮css代码（css自定义按钮封装）
CSS代码fieldset{border: 1px solid #ccc;color: #666;padding: 10px;margin: 10px;}/*默认*/.oy-btn{ display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; backgrou...原创 2019-05-28 10:15:40 · 7081 阅读 · 0 评论 -
css使用百分比(%)减去固定宽度的写法
<style type="text/css"> .box{ /*实现了宽度为父容器宽度减去固定的100像素*/ width:-webkit-calc(100% - 100px); width:-moz-calc(100% - 100px); width:calc(100% - 100px);}</style>...原创 2019-09-26 15:39:00 · 601 阅读 · 0 评论 -
滚动条添加颜色的CSS样式
<style type="text/css">body { padding-right: 0px; padding-left: 0px; scrollbar-face-color: #59d6ff; padding-bottom: 0px; scrollbar-highlight-color: #ffffff...原创 2018-03-11 12:52:35 · 692 阅读 · 0 评论