随笔分类 -  css

css 设置版本号
摘要:.el-row::before { content: ""; width:0; height: 0; border:60px solid transparent; border-right:60px solid #e3e3e3; transform: rotate(135deg); position 阅读全文

posted @ 2024-02-27 16:55 zyp_java_net 阅读(47) 评论(0) 推荐(0) 编辑

css 右上角三角形标签样式
摘要:<style> .box{ position: relative; height: 100px; width: 300px; border: 1px solid gray; box-sizing: border-box; } .sanjiao{ position: absolute; top: 0; 阅读全文

posted @ 2023-08-21 13:57 zyp_java_net 阅读(529) 评论(0) 推荐(0) 编辑

css 右上角标的效果
摘要:右上角 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作角标的方法</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/j 阅读全文

posted @ 2023-08-21 13:54 zyp_java_net 阅读(568) 评论(0) 推荐(0) 编辑

span做成按钮时,文字不被选中样式
摘要:今天用span做成按钮,但是每次双击都会选中span内容,很不和谐。怎么办呢? 添加下面样式即可,亲测ie和谷歌浏览器没问题: .button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webki 阅读全文

posted @ 2022-09-03 14:41 zyp_java_net 阅读(102) 评论(0) 推荐(0) 编辑

我的后台布局一
摘要:<div class="main-layout"> <div class="header"> <h1>头部</h1> </div> <div class="content"> <div class="left"> <h1>左</h1> </div> <div class="middle"> <h1> 阅读全文

posted @ 2022-08-24 18:24 zyp_java_net 阅读(29) 评论(0) 推荐(0) 编辑

css的五种定位方式
摘要:CSS 中的 position 属性用来设置元素在页面中的位置,通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值,分别对应 5 种不同的定位方式,如下所示: 取值说明 static 默认值,静态定位,表示没有定位,元素会按照正常的位置显示,此时 top、b 阅读全文

posted @ 2022-08-19 11:49 zyp_java_net 阅读(254) 评论(0) 推荐(0) 编辑

css div的水平、垂直同时居中
摘要:创建页面布局的时候,会遇到只是用纯粹的css控制div的垂直和水平居中。有很多种方法可以实现这种效果,这里列出我喜欢的。 首先是最基本的, css控制div水平居中创建一个div的水平居中很简单,只需要设定宽度和左右margin值自动。这种方法可以用在block级元素上(div、图片、h1等)。如果 阅读全文

posted @ 2022-08-19 11:43 zyp_java_net 阅读(266) 评论(0) 推荐(0) 编辑

CSS表格边框的问题
摘要:可以直接利用单元格之间的间距(border-spacing)设置table与td、tr的背景色,来达到视觉上边框的效果。 <!DOCTYPE html <html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> 阅读全文

posted @ 2022-07-20 21:18 zyp_java_net 阅读(63) 评论(0) 推荐(0) 编辑

css3 @page
摘要:<!doctype html> <html> <head> <meta charset="utf-8"> <title>print Geovin Du</title> <style type="text/css" media="screen"> /* https://www.w3.org/TR/cs 阅读全文

posted @ 2022-07-14 08:13 zyp_java_net 阅读(76) 评论(0) 推荐(0) 编辑

input输入框自动填充样式丢失 - 解决方法
摘要:解决方法: 可以修改:-webkit-autofill中box-shadow的属性去改变输入框自动填充的颜色 input:-webkit-autofill { box-shadow: 0 0 0 1000px #f8f8f8 inset !important;} 阅读全文

posted @ 2022-06-09 21:57 zyp_java_net 阅读(177) 评论(0) 推荐(0) 编辑

css 选择器 获取同名class 第一个元素
摘要://第一个 .tags-view-item:first-of-type{ border-left: 1px solid #ddd; } //最后一个 .tags-view-item:last-of-type{ border-left: 1px solid #ddd; } 阅读全文

posted @ 2022-05-22 20:00 zyp_java_net 阅读(1846) 评论(0) 推荐(0) 编辑

sass(dart sass)和node-sass 的区别以及 /deep/、::v-deep的支持
摘要:sass 有6个实现,他们都是用来将sass编译成css的工具。 下边我们来专门说一下 sass、dart-sass 和 node-sass: sass 是由 ts调用 dart-sass实现的工具类,来编译 sass(以前是由单纯的 ts实现的)dart-sass 是由 dart 实现的,通过 d 阅读全文

posted @ 2022-05-22 14:24 zyp_java_net 阅读(2642) 评论(0) 推荐(1) 编辑

使用calc不管用时,需要注意的坑
摘要:先说问题: 在使用calc时,使用的格式如下:width:calc(100%-100px); 结果不管用,改成 width:calc(100% - 100px); 即可管用(减号左右要有空格才行); + 和 - 运算符的两边必须要有空白字符。比如,calc(50% -8px) 会被解析成为一个无效的 阅读全文

posted @ 2022-05-19 08:18 zyp_java_net 阅读(337) 评论(0) 推荐(0) 编辑

html让同一行的文字和图片居中对齐显示
摘要:<div class="satisDiv span12 borderB pad10px h44"> <span class="fs028rem ">满意度:</span> <span class="ml030rem fs028rem">十分满意</span> <img class="ml020rem 阅读全文

posted @ 2022-04-28 18:07 zyp_java_net 阅读(594) 评论(0) 推荐(0) 编辑

四个好看的CSS样式表格
摘要:1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: 2. 带背景图的CSS样式表格 和上面差不多,不过每个格子里多了背景图。 cell-blue.jpg cell-grey.jpg 1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg 2. 拷贝下面的代码 阅读全文

posted @ 2014-09-28 10:03 zyp_java_net 阅读(234) 评论(0) 推荐(0) 编辑

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示