正文 

当前位置： 首页 > 知识 > java教程

css小技巧(代码片段)

banbaibanzi banbaibanzi     2022-12-07     723

关键词：

1.用css伪元素勾勒出关闭按钮

.box 
  position: relative;
  padding: 10px;
  width: 200px;
  height: 100px;
  border: 1px solid #e1e1e1;
  &:after 
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  
  .close 
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    float: right;
    width: 26px;
    height: 26px;
    cursor: pointer;
    &::before,
    &::after 
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      height: 20px;
      margin-left: -1px;
      margin-top: -10px;
      border-left: 2px solid #999c9f;
    
    &::before 
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    
    &::after 
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);

2.mixin用法

　　引用示例： @include webkit(transition, all 0.3s ease 0s); 

/* 属性前缀 */
@mixin webkit($type, $value) 
  -webkit-#$type: $value;
  -moz-#$type: $value;
  -ms-#$type: $value;
  -o-#$type: $value;
  #$type: $value;


/* 属性后缀 */
@mixin webkitA($type, $value) 
  #$type: -webkit-#$value;
  #$type: -moz-#$value;
  #$type: -ms-#$value;
  #$type: -o-#$value;
  #$type: $value;

3.extend用法

　　类似mixin，引用示例： @extend %clearfix; 

/* 清除浮动 */
%clearfix 
  &:after 
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  
  *height: 1%;

css小技巧(代码片段)

一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul&g 查看详情

css小技巧(代码片段)

一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul>&l 查看详情

css高频实用小技巧(代码片段)

利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round 查看详情

css高频实用小技巧(代码片段)

利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round - 查看详情

css的几个小技巧(代码片段)

本文收录css设置样式的一些小技巧1.设置文字在块级标签居中（包括水平居中和垂直居中）水平居中方法一：使用text-aligntext-align:center方法二：目标标签的父级标签设置position:relative，目标标签设置margin:auto.parentposition:relative.targe... 查看详情

css设置背景小技巧(代码片段)

代码：　　背景色background:green;　　背景图background-image:url(../../1111.png);　　图片大小background-size:20%50%;　　使图在任何大小的屏幕都不会显示重复(图像不平铺)background-repeat:no-repeat;<spanstyle="background:green;background-image:url(../../1111.... 查看详情

前端之css（宽高）设置小技巧(代码片段)

一、css宽高自适应： 1.宽度自适应： 元素宽度设为100%（块状元素的默认宽度为100%） 注：应用在通栏效果中 2.高度自适应： height:auto;或者不设置高度 3.最小，最大高度，最小，最大宽度： a)最小高度mi... 查看详情

必须掌握的css书写小技巧(代码片段)

一、元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是displayvisibility和overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类... 查看详情

你不知道的css---position小技巧(代码片段)

众所周时"position:sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、f... 查看详情

github小技巧-定义项目语言(代码片段)

GitHub是根据项目里文件数目最多的文件类型,识别项目类型。后端项目难免会包含前端的资源，有时候就会被标记成前端语言，因为项目里css等文件比较多,被误识别成css项目。GitHub不提供指定项目语言的功能，感觉挺傻的。不过... 查看详情

css黑魔法小技巧，让你少写不必要的js，代码更优雅(代码片段)

...家的欢迎，有人希望能博主还能整理个CSS的一些黑魔法小技巧，无奈我CSS一直很渣，没什么干货，最近写了一个Chrome插件GayHub，算是把GitHub的样式审查了个变，在写的过程中，也收获了很多关于CSS的小技巧，尤其是开始的第一个... 查看详情

css高阶小技巧(代码片段)

本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用CSS绘制如下图形：在之前，类似的图案，其实我们有尝试过，在单标签实现复杂的棋盘布局一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么... 查看详情

小技巧-css三角的做法(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>Document</title><style>/*宽和高设置为0（貌似可以省... 查看详情

第八天，scrapy的几个小技巧(代码片段)

 一.微博模拟登陆1.百度搜微博开放平台可满足爬取量不大的情况2.微博模拟登陆和下拉鼠标应对ajax加载fromseleniumimportwebdriverimporttimebrowser=webdriver.Chrome()browser.get(‘https://www.weibo.com‘)time.sleep(10)browser.find_element_by_css_se 查看详情

小技巧(代码片段)

## 小技巧 ### vscode 自动生成.vue 文件三组标签结构的用法 1. 选择 `文件 -> 首选项 -> 用户代码片段`，在弹出的搜索框中输入 vue，选择 vue 后，编辑会自动打开一个名为&... 查看详情

26个常用易忘css小技巧(代码片段)

收集于平时常用但易忘的CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrapdisplay:inline-block;overflow:hiddenvertical-align:bottom复制代码超出部分显示省略号//单行文本.wrapove... 查看详情

markdown实用小技巧(代码片段)

查看详情

关于写手机密码锁页面的css技巧(代码片段)

昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和大家一起分享，如果有不成熟的地方希望大家指出来，大家有更好的方法我也很乐意倾听哦~好啦，不说那么多啦，先附上一张页面截图... 查看详情