HTML.CSS专区
围绕常用HTML CSS内容
Kingsaj
这个作者很懒,什么都没留下…
展开
-
CSS 的 radial-gradient() 径向渐变函数
参考文章原创 2023-05-29 17:35:13 · 174 阅读 · 0 评论 -
el-input-number 输入框添加单位
/ 针对带有 data-unit 属性且 class 包含了 "el-input-number--small" 的 el-input-number 元素的样式修改,目的是使该元素的样式与普通的 el-input-number 元素相同。// 针对带有 data-unit 属性的 el-input-number 元素的样式修改。// 是在 el-input-number 元素后面添加一个带有单位文本的伪元素,该伪元素显示 data-unit 属性的值,并通过 CSS 设置该伪元素的位置、颜色和样式等。原创 2023-04-26 18:08:32 · 4294 阅读 · 0 评论 -
css - border-radius 圆角效果
css - border-radius 圆角效果原创 2022-07-01 18:26:57 · 163 阅读 · 0 评论 -
css -- 阴影 box-shadow
效果1:box-shadow: 1px 1px 10px #8e8e8e效果2:box-shadow: 0px 2px 4px 0px rgb(117 131 147 / 33%);原创 2021-12-12 21:45:17 · 133 阅读 · 0 评论 -
探究 position-sticky 失效问题
详细实用原创 2021-11-23 15:35:41 · 481 阅读 · 0 评论 -
a标签锚点的问题
a便签作为锚点定位页面的位置还是很常见的,基本实现如下:<a href="#person_card" >个人</a><a href="#company_card" >企业</a><div id="person_card">个人内容</div><div id="company_card">企业内容</div>但是,点击锚点,会使相应内容直接滚动到页面最顶部,如果有一个固顶的导航栏,页面内容就会被覆盖原创 2021-11-21 21:49:48 · 1207 阅读 · 0 评论 -
css -- 小手 cursor: default;
cursor: pointer; // 常用小手 cursor 属性原创 2021-08-30 10:46:56 · 1198 阅读 · 0 评论 -
css -- font 简写属性
/* font: 字体粗细 字体尺寸/行号 字体系列, 默认的sans-serif字体 */ font: 700 3.5rem/4rem "Montserrat", sans-serif;原创 2021-07-04 21:32:32 · 167 阅读 · 0 评论 -
网站添加头部Meta property=og协议的使用方法详解教程
Meta Property=og怎么使用?如何调用og:type?怎么在文章中调用og:title?如何使用调取文章og:image?本文将介绍什么是Meta Property=og协议以及该协议的用法!什么是Meta Property=og协议?og是一种新的HTTP头部标记(Open Graph协议)这种协议可以让网页成为一个“富媒体对象”(被其他网站引用等)。目前主流百度,360等等搜索引擎已经支持og富媒体协议!Meta Property=og协议的作用?1、能够正确被蜘蛛抓取您的内容到原创 2021-07-02 17:22:07 · 4554 阅读 · 4 评论 -
css -- 获取从第n个开始之后的li
/* 获取第8个之后li */.news_list li:nth-of-type(n+9) { display: none;}原创 2021-06-22 17:25:46 · 449 阅读 · 0 评论 -
PC门户项目复盘
PC门户项目复盘 1: 尽量仅使用单个css文件,使用 @import url(路径) 同一进行引入.减少http请求 2: 网站上所有小图标,务必使用字体图标,便于后期维护调整,杜绝使用小图片,减少服务器压力 3: PC项目尽量少使用flex,grid布局,多使用 float(浮动)布局, display: inline-block; 4: 页面能点击的地方,要有悬浮状态,点击状态 5: 包裹文字的元素,宽高尽量使用padding进行撑起. 如必须设置固定宽高,一定要要考虑到文字溢出情况,前.原创 2021-06-18 09:37:42 · 108 阅读 · 0 评论 -
css -- filter(滤镜) 属性
【代码】css -- filter(滤镜) 属性。原创 2021-06-10 13:52:03 · 193 阅读 · 0 评论 -
css -- 实现跑马灯
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>跑马灯</title> <style> .partner_wrap { background: #F2F2FA; } .partner_wrap .trends_container {.原创 2021-05-31 15:53:45 · 605 阅读 · 2 评论 -
scss -- 常用语法
原创 2021-05-31 11:53:22 · 134 阅读 · 0 评论 -
a标签跳转,打开一个最新页面
a 默认的是刷新当前为最新页面, 添加 target="_blank 属性.即可 <li><a href="https://www.baidu.com/" target="_blank"> 测试</a></li>原创 2021-05-17 15:02:18 · 2226 阅读 · 0 评论 -
css -- 首行缩进两个空格
// 目前发现该属性只对 p 标签生效P { text-indent: 2em; }原创 2021-05-06 11:29:47 · 486 阅读 · 0 评论 -
采坑记录--父元素flex:1,子元素 height:100% 无效问题!
父级元素flex:1子元素:height:100%父元素:添加height:0; 即可实现效果原创 2021-04-29 16:34:09 · 4618 阅读 · 5 评论 -
css - 实现tab切换
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS3外观漂亮淡入淡出Tab菜单演示</title> <style> @charset "utf-8"; body { font-family: Cambria, Arial; backgr.原创 2021-04-26 18:21:55 · 170 阅读 · 0 评论 -
css - 新闻列表结构布局,img hover效果
.tab-content .tab-item a.picture:hover span { /* 定义2D缩放比例 */ transform: scale(3.05); /* 元素当过渡效果 */ transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .replace-img { /* 渐变 */ ...原创 2021-04-26 17:40:28 · 553 阅读 · 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> * { ma原创 2021-04-25 17:54:20 · 133 阅读 · 0 评论 -
pc- 顶部布局结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KingSaj</title> <style> * { b.原创 2021-04-24 23:02:51 · 173 阅读 · 0 评论 -
css -- table
<!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> .table-bordered&.原创 2021-04-22 15:50:55 · 93 阅读 · 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> .box {原创 2021-04-21 14:10:12 · 175 阅读 · 0 评论 -
响应式和自适应的区别
自适应: 同一张网页适应不同设备分辨率及屏幕大小响应式: 根据设备大小显示不同的页面原创 2021-04-15 10:16:18 · 138 阅读 · 0 评论 -
css --文字一行显示.多出隐藏
// span 必须要有宽度 .news_list>li>a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }转载 2021-04-14 09:50:54 · 253 阅读 · 0 评论 -
css-- 背景渐变
实现背景渐变.self_assessment button { padding: 10px 20px; line-height: 1.6; /* 如果不支持渐变的,默认值 */ background-color: var(--secondary); /* 背景渐变,自左向右 */ background-image: linear-gradient(to right, #74B4FE, var(--car..原创 2021-04-13 13:47:50 · 140 阅读 · 0 评论 -
css-字体相关
<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./css/normalize.css"> .原创 2021-04-11 16:56:07 · 71 阅读 · 0 评论 -
css - 绝对定位,相对定位
<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./css/normalize.css"> .原创 2021-04-11 15:04:51 · 209 阅读 · 0 评论 -
css - 实现loading效果(八卦图)
<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./css/normalize.css"> .原创 2021-04-11 12:43:14 · 194 阅读 · 1 评论 -
css-布局-负margin 使用
上图效果: 按照我以前的思路:这种情况我会选择使用定位解决上面的需求. 现在想换一种思路,完成上面的需求. 使用float + (负)margin 实现<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink..原创 2021-04-11 10:44:54 · 72 阅读 · 0 评论 -
css 清除浮动高度塌陷,外边距重叠问题
1:外边距重叠问题2: 浮动的影响–高度塌陷 /* 1: 解决外边距重叠 2: 清除浮动高度塌陷 在高度塌陷的父元素身上加上clearfix 类,即可清除影响 */ .clearfix::before, .clearfix::after { content: ''; display: table; .原创 2021-04-11 09:32:32 · 241 阅读 · 1 评论 -
css 使用 border-radius 实现 叶子效果
代码<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./css/normalize.css">..原创 2021-04-10 21:47:00 · 633 阅读 · 1 评论 -
css 初始化样式
normalize.css (推荐)一个现代的,支持html5的CSS重置选项/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all .原创 2021-04-10 19:12:53 · 613 阅读 · 1 评论 -
css a标签
a 标签: 需要跳转的标签可以使用a标签a 标签默认设置宽高属性,是无效的如要设置宽高,1: display: flex;2: display: inline-block;原创 2021-03-28 00:35:39 · 681 阅读 · 0 评论 -
pc页面展示 适配手机端
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">原创 2021-03-18 22:18:24 · 264 阅读 · 0 评论 -
关于input框和button的对齐
button { // 解决对齐方式 vertical-align: top; }原创 2021-03-16 22:14:34 · 429 阅读 · 0 评论 -
添加 网站favicon图标
// 直接引入<link rel="shortcut icon" href="static/images/favicon.png" type="image/x-icon">原创 2021-03-16 16:54:37 · 174 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{width: 4px;background-color: #ccc;border-radius: 5px;}/*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{border-radius: 5px;}/*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb{border-radius: 5px;background-color:原创 2021-02-05 09:56:08 · 256 阅读 · 0 评论 -
css 伪类
/* 伪类 a:link {color: #FF0000} 未访问的链接 *//* 伪类 a:visited {color: #00FF00} 已访问的链接 */.btn-redborder:link,.btn-redborder:visited { color: #e41d1d}/* :active 选择器用于选择活动链接。 *//* :focus 选择器用于选取获得焦点的元素。 */.btn-redborder:hover,.btn-redborder:active原创 2021-01-28 16:46:50 · 73 阅读 · 0 评论 -
CSS3 @media 查询
注意书写顺序: 我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面@media (min-width: 1200){ //>=1200的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 768px){ //>=768的设备 }@media (max-width: 1199){ //<=1199的设备 }@media (max-width:原创 2021-01-28 16:06:06 · 280 阅读 · 0 评论