首页 CSS

CSS 第3页

  • CSS3中的display:grid,网格布局介绍

    CSS3中的display:grid,网格布局介绍

    1.网格布局(grid):         它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念:         容器和项目,如图所示: <div class="content"> <div class="b">1</div> <div class="b">2</div> <div...

    CSS 2020-03-27 17 0
  • css 之空格处理的方法

    css 之空格处理的方法

    1、空格规则 HTML 代码的空格通常会被浏览器忽略。 <p> hello world </p> 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。 浏览器的输出结果如下: hello world 可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。 如果希望空格原样输出,可以使用<pre> 标签。 <pre> hello world </pre>...

    CSS 2020-03-27 13 0
  • css清除默认样式和设置公共样式的方法

    css清除默认样式和设置公共样式的方法

    CSS 清除默认样式 通常的清除默认样式: *{ margin:0; padding:0 } li{ list-style:none } img{ vertical-align:top; border:none } 设置默认字体 body, button, input, select, textarea /* for ie */ { font: 14px/1.5 tahoma, \5b8b\4f53, sans-se...

    CSS 2020-03-27 15 0
  • CSS 阴影动画优化技巧

    CSS 阴影动画优化技巧

    本技巧来自这篇文章 --How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shaodw在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子: div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }...

    CSS 2020-03-27 14 0
  • css3给背景图片加颜色遮罩的方法

    css3给背景图片加颜色遮罩的方法

    前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。 方法一:通过定位叠加(注意层级) <div class="wrap1"> <div class="inner"> </div> </div> .wrap1 { position: relative; width: 1200px; height: 400px; b...

    CSS 2020-03-27 12 0
  • CSS3实现图片抽屉式效果的示例代码

    CSS3实现图片抽屉式效果的示例代码

    老规矩,先放图片效果图: 这个效果实现原理很简单:只要你掌握css3动画和过渡相关知识就行,不用js代码; HTML代码: <div> <ul id="list"> <li > <a href="">国际美妆抢先看</a> <img src="images/1.jpg&qu...

    CSS 2020-03-27 11 0
  • 手把手教你CSS水平、垂直居中的10种方式(小结)

    手把手教你CSS水平、垂直居中的10种方式(小结)

    面试必备,工作一定会用到。emmm大家都懂的,话不多说,先直接贴一个总结和效果图。 总结 PC端有兼容性要求,子元素宽高固定,推荐absolute + 负margin PC端有兼容要求,子元素宽高不固定,推荐absolute + transform PC端无兼容性要求,推荐flex 移动端推荐使用flex 要怎么实现上面这幅图的效果呢,下面为大家总结了10中常用的方法。首先我先创建一个公共的模板样式 <template> <d...

    CSS 2020-03-27 11 0
  • css实现流程导航效果(三种方法)

    css实现流程导航效果(三种方法)

    css实现流程导航效果,具体内容如下所示: ::tip 使用纯css线上 流程导航效果。 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来 <!DOCTYPE html> <html> <head> <meta charset="ut...

    CSS 2020-03-27 14 0
  • CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)

    CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)

    效果图   在网上查阅相关资料后,发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现,而没有渐变色边框围绕内容区域进行旋转的效果,于是我做了一个这样的demo供大家参考。 实现原理   首先将内容区域嵌套进一个DIV盒子中并设置overflow:hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度,然后将内容区域居中,这样内容区域和父元素之间就有一个看似是边框的空白区域。  &em...

    CSS 2020-03-27 12 0
  • CSS ellipsis 与 padding 结合时的问题详解

    CSS ellipsis 与 padding 结合时的问题详解

    CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } 使用如下的 HTML 片段进行测试: <style> .my-div { width...

    CSS 2020-03-27 11 0
  • css 多列布局解决方案

    css 多列布局解决方案

    一. 定宽 + 自适应 期望效果: 左侧宽度固定, 右侧宽度自适应 公共代码: html: <div class="parent"> <div class="left"> <p>left menu</p> </div> <div class="right"> <li>right item1&...

    CSS 2020-03-27 11 0
  • 运用CSS methodologies去实现模块化的方法示例

    运用CSS methodologies去实现模块化的方法示例

    一、什么是 CSS methodologies CSS methodologies,可以理解成 设计模式,也可以理解成 css 规范,市面使用情况如下图: 上图来源:https://2019.stateofcss.com/technologies/ 你可能在日常开发中并不会专门花时间去注意和了解 CSS methodologies,但随着你经验的积累,你可能会自己思考,或者阅读别人的代码、参考网上成熟的框架,这里面都或多或少的蕴含了一些 css methodologies 的闪光点。而下面要介绍的几种主流...

    CSS 2020-03-27 10 0
  • scss使用mixin不生效(浏览器无法编译出来)的解决方法

    scss使用mixin不生效(浏览器无法编译出来)的解决方法

    mixin方法: 浏览器无法编译: 以前旧版sass是支持上面写法,现在新版后不支持,传入变量必须加#{}编译 浏览器编译: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。...

    CSS 2020-03-27 14 0
  • css实现旋转翻牌动画效果

    css实现旋转翻牌动画效果

    css动画之旋转翻牌效果,具体内容如下所示: 1、我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置 例子如下: <style> .box { height: 300px; width: 300px; position: relative; } .zh, .fan { hei...

    CSS 2020-03-27 11 0
  • 基于html css实现带搜索图标的搜索框功能

    基于html css实现带搜索图标的搜索框功能

    前言 给大家分享一下前端用处很多的带小图标的搜索框的制作方法。 效果展示 基本思路 1、搜索图像用绝对定位放到搜索框的上方 2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外边距 准备 只需一个搜索图标图片,类似于下图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...

    CSS 2020-03-27 10 0