• Web前端:CSS的主要用途是什么

      CSS(层叠样式表)是web设计的核心语言,不是HTML的高级版本。它更像是把一切联系在一起的胶水。这是你的网站与众不同的地方。  CSS的基础知识  当技术人员想让一些东西看起来很花哨时,他们会使用CSS。CSS代码定义页面的样式和外观。  样式表包含颜色、字体和数字,它们告诉计算机如何显示内 2024-11-27 10:18:25
  • 使用CSS3的新特性完成一个翻书的动画效果,来学习一下吧

    前言在CSS3中新增了很多的新特性,其中使用频率比较高的应该是动画效果了,它可以帮助我们实现以前使用Javascript才能实现的效果,极大的提高网页的性能。今天这篇文章我们就来一起看一个使用CSS3新特性完成的翻书效果吧。本文的源码已经放在了Github上,感兴趣的可以clone到本地试试,地址如 2024-11-27 10:03:20
  • CSS样式更改——2D转换

    前言上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。2D转换1).元素位移translate(左边,顶边)div{transform: translate(50px,100px);-ms-trans 2024-11-27 09:48:38
  • 如何写一份不错的CSS代码?

    背景介绍:当我们在从事大项目或团队开发工作时,我们经常会发现我们写的代码,凌乱、难以阅读并且难以扩展。尤其是当一段时候后我们回头再看自己的代码,必须回想起当初自己写的时候的思路才能看懂。 因此,人们尝试在代码风格上保持统一,然而,最大的困难是:修改一个较小的问题,都可能创建更多丑陋的 hack,也可 2024-11-27 09:33:17
  • CSS正常加载却不生效原因排查

    调试一个小的WEB项目,启动正常,但是样式却不能正常加载,刚开始以为是css文件的路径不对导致的,于是使用浏览器的开发者工具调试跟踪,结果发现样式的路径也正常。换了几个浏览器,微软的edge,IE,谷歌的Chrome都试了下,都是同样的问题。于是又各种排查JSP页面,一个不经意间把页面上的<! 2024-11-27 09:17:41
  • CSS3实现鼠标滑动图片缩放效果

    浏览网页时往往会遇到类鼠标滑过图片时图片会进行缩放的效果,简单来说就是利用CSS3 中的2D转换的缩放加上一些简单的属性设置实现的,img:hover+scale实现鼠标到图片时的图片缩放,transition添加过渡效果,使图片的缩放更加自然,设置overflow:hidden,使图片放大后超出部 2024-11-27 09:03:06
  • 浏览器分辨率自适应之CSS媒体查询Media详解

    CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。通过查询视口宽度,我们可以实现如下功能:站点默认为两列式布局,如果屏幕(适口)宽度超过40em,则变成三列式布局。1、媒体查询操作方式实际操作为:对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询 2024-11-27 08:48:13
  • CSS中的绘制顺序,chrome和firefox在使用3d转换时的不同点

    一般规则浏览器如何确定绘画内容的顺序?猜测可能是浏览器将按照DOM中指定的顺序来绘制内容,就是它在页面的源代码中出现的顺序。我们可以构造一个简单的示例,显示两个div。我们通过给两个div之一赋予负的margin-top来使他们重叠。<style> .box { 2024-11-27 08:33:40
  • CSS多重背景和背景图像定位属性绘制太极图

    很多时候不是技术做不到,而是我们缺乏思考和对技术的熟练应用。CSS的多重背景功能可以让用户使用多个背景(可以是图片,也可以是色彩)来填充元素,利用背景定位background-position属性可以对背景图片定位。本人将利用CSS的多重背景和渐变方法来制作一个太极图。先上一个太极图的拆分图:设计思 2024-11-27 08:18:49
  • CSS属性:一个隐居于表格中十多年的属性empty-cells

    今天给大家讲一个在表格中隐藏了十多年的属性,empty-cells。用来干嘛的?用来隐藏表格中空单元格上的边框和背景。举个例子就一目了然了。看一个例子:这两个table中都有一个空的td。然后就是在table上设置属性能控制这个空td如何显示。如上面设置empty-cells之后,我们来看一下最终效 2024-11-27 08:03:43