CSS

  • CSS3实现的侧滑菜单

    实现效果: 实现代码: <!DOCTYPE html><html class=”menu”> <html> <head> <meta charset=”utf-8″/> <meta http-equiv=”X-UA-Compatible” content==”IE=edge”/> <meta name=”google” value=”notranslate”/> <title>Side Menu</title> <link rel=”stylesheet” type=”text/c…

    2021年6月18日
    0 0 0
  • CSS 新特性 contain控制页面的重绘与重排问题

    在介绍新的 CSS 属性 contain 之前,需要读者已经知道什么是页面的重绘与重排。 发现之前已经描述过很多次了,可以看看这个提高 CSS 动画性能的正确姿势[1]。 OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。 The contain property allows an author to indicate that an element and its contents are, as much…

    2021年6月18日
    0 1 0
  • 为什么你写的height:100%不起作用

    为什么你写的height:100%不起作用? 这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制? 1.百分比宽高的设定 按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的: https://www.w3school.com.cn/cssref/pr_dim_width.asp https://www.w3school.com.cn/cssref/pr_dim_height.asp 2.width:100%; 我们写下这样一段代码,随意设置一个背景色便于观察元…

    2021年6月17日
    0 0 0
  • 面试必问:圣杯布局和双飞翼布局的区别

    前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果 这两个种三行布局效果是一样的,实现的效果如上图示所示,其特点为: header和footer的高度为整个浏览器的宽度 中间是个三行布局,left和right的宽度是固定的。 而middle的内容的宽度是自适应占满中间位置的,高度为三栏中的最大高度其实圣杯布局和双飞翼布局在前的处理是一样的,只不过是在中间处理的时候有些小差异而已啦。 前期处理 为了避免出现问题我们先给body设置一个min-width:600px; 再将header和fo…

    2021年6月17日
    0 1 0
  • css背景和边框标签实例详解

    一、css背景标签 1,设置背景颜色 back-ground-color 属性指定元素的背景色。 小实例如下图所示: 运行结果如下: 可以通过选择器给不同的标签设置不同的颜色,在这里h1,div,和p标签将拥有不同的背景色: 实例: 运行结果如下图所示: 2.设置背景图像 background-image属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。用url来引入外部图片。 具体实例如下所示: 运行结果如下图: 注意事项:使用背景图片时,要注意背景图片的样式,不要有干扰到文本的图像,以免影响效果。 css背景重复的问题 默认情况下,background-repeat属性在…

    2021年6月16日
    0 0 0
  • Css预编语言及区别详解

    一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css 预处理器便是针对上述问题的解决方案 预处理语言 扩充了 Css 语言,增加了诸如变量、混合(mixin)、函数等功能,让 Css 更易维护、方便 本质上,预处理是 Css 的超集 包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 Css 文件 二、有哪些 Css 预编…

    2021年6月16日
    0 1 0
  • 用CSS3画一个爱心

    实现效果 需求/功能: 怎么用CSS+HTMl绘画出一个爱心. 分析: 爱心可以通过一个正方形+两个圆形组合成. 先画一个正方形+圆形, 摆放位置如下: 再添加上一个圆形. 最后再将整个图形顺时针旋转45度即可. 初步实现: 先画一个正方形: <body> <div id=”heart”></div> </body> #heart{ height: 300px; width: 300px; border: 2px solid black; } 给这个正方形的左边加行一个圆形.这里使用伪类:before来实现 #heart{ height: 200…

    2021年6月15日
    0 0 0
  • CSS完成视差滚动效果

    一、是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层、内容层、悬浮层 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果 二、实现方式 使用css形式实现视觉差滚动效果的方式有: background-attachment transform:translate3D background-attachment 作用是设置背景图像是否固定或者随着页面的其余部分滚动 值分别有如下: scroll:默认值,背景图像会随着页面其余部分的滚动而移动 fixed:当页面的其余部分滚动…

    2021年6月15日
    0 0 0
  • css position fixed 左右双定位的实现代码

    CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> <style> .box{ width:…

    2021年6月14日
    0 0 0
  • background-position百分比原理详解

    今天帮别人调代码时,看到一个样式: background-position: 50% 0; background-size: 100% auto; 对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。详情可见css3 background。 对background-position很自然的以为百分比是根据父元素宽度计算的,但background-position真的不是,它有一套自己的原理。下面详细介绍。 一、等价写法 在看各类教程时有以下等价写法: top left, left top 等价于 0% 0%. top, top cente…

    2021年6月14日
    0 0 0
  • CSS的class与id常用的命名规则

    网页公共命名: #wrapper – – 页面外围控制整体布局宽度 #container或#content – – 容器,用于最外层 #layout – – 布局 #head,#header – – 页头部分 #foot,#footer – – 页脚部分 #nav – – 主导航 #subnav – – 二级导航 #menu – – 菜单 #submenu – – 子菜单 #sid…

    2021年6月13日
    0 1 0
  • CSS3实现的3D隧道效果

    实现的效果 实现代码 html <div class=”scene”> <div class=”wrapper”> <ul class=”tunnel”> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></l…

    2021年6月11日
    0 4 0
  • css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效

    首先 要使用transform-origin属性,必须使用transform 属性,其有很多属性,我们只需要用到transform的rotate属性(设置2D旋转角度),再搭配 transform-origin 设置其中心点。最后搭配css3动画属性animation。完成我们想要的效果。 先上效果图: 圆都是动态的。 步骤如下: 1、transform属性使用: 我们只需要利用这个属性设置我们需要这个点在圆上的那个位置。transform:rotate(你需要的度数deg)。另外我们需要注意一个点(如果是需要小圆分布在大圆的圆边上,我们需要给大圆设置相对属性position: relativ…

    2021年6月11日
    0 6 0
  • css display table 自适应高度、宽度问题的解决

    定义和用法 display 属性规定元素应该生成的框的类型。 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 可能的值 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会…

    2021年6月10日
    0 3 0
  • css3 实现文字闪烁效果的三种方式示例代码

    1.通过改变透明度来实现文字的渐变闪烁,效果图: <!DOCTYPE html> <html> <head> </head> <title>文字闪烁</title> <body> <div class=”blink”> 星星之火可以燎原 </div> </body> <style> .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight:bold; font-size:46px; } /* 定义ke…

    2021年6月9日
    0 3 0