zl程序教程

04-CSS

  • axure菜单展开收起_css菜单栏的隐藏和显示

    axure菜单展开收起_css菜单栏的隐藏和显示

    大家好,又见面了,我是你们的朋友全栈君。axure 9.0 版本在发布后HTML页面打开时总是在顶部弹出菜单 既不美观也影响效果本人axure小白,摸索半天后发现也不能完全关闭或者不显示(除非代码修改);菜单如下图。 解决方案就是在请求地址后面拼接 #c=1 这样可以实现菜单栏最小化,而且在你鼠标不移动到左上角时,小箭头会隐藏 ,效果就可以了。如请求地址为:https://www.csdn.

    日期 2023-06-12 10:48:40     
  • 手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离

    手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离

    前言本篇文章不会细致讲webpack生产编译方面的优化操作,主要点是为了区分开发与生产环境的区别,代码分割分离的操作,所以不建议各位使用本篇文章内配置内容去进行生产编译,生产编译其它优化细节请各位自行另加配置,当然本篇文章配置也不是不能用作生产配置,只是给各位一个建议~正文 所需环境开始之前,请各位给自己电脑安装一下Nodejs,具体安装方法这里我就不做讲解了,各位可以移步Node官网查看文档然后

    日期 2023-06-12 10:48:40     
  • 多说360度旋转css代码

    多说360度旋转css代码

    多说360度旋转css代码 作者:matrix 被围观: 2,079 次 发布时间:2014-02-06 分类:Wordpress | 16 条评论 » 这是一个创建于 3129 天前的主题,其中的信息可能已经有所发展或是发生改变。 多次看到多说评论的头像样式,鼠标悬停的时候360度旋转~css:#ds-avatar{ width:54px;height:54px; /*设置图

    日期 2023-06-12 10:48:40     
  • 添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

    添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

    添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果 作者:matrix 被围观: 4,949 次 发布时间:2013-10-13 分类:Wordpress 零零星星 | 一条评论 » 这是一个创建于 3244 天前的主题,其中的信息可能已经有所发展或是发生改变。 测试是用于NGRO主题的首页文章列表上,配合起之前的窗口小列表 不错~带8px白色边框鼠标停留后还有放大效果,如图:.Indexp

    日期 2023-06-12 10:48:40     
  • 12·灵魂前端工程师养成-CSS定位

    12·灵魂前端工程师养成-CSS定位

    CSS定位介绍层叠上下文 z-index-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstac

    日期 2023-06-12 10:48:40     
  • 13·灵魂前端工程师养成-CSS动画

    13·灵魂前端工程师养成-CSS动画

    CSS动画原理 浏览器渲染原理 transform完整介绍 跳动的心制作 transition 过渡属性 使用animation做动画 使用animation制作跳动的红心 -曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。

    日期 2023-06-12 10:48:40     
  • CSS硬件加速

    CSS硬件加速

    近些年,我们总是听到硬件加速,以及它如何帮助我们提升网页的动画性能,让网页动画变得更好,在移动端更流畅。那么什么是硬件加速?如何触发硬件加速呢?定义css大部分样式还是通过cpu来计算的,但 css中也有一些 3d的样式和动画的样式,计算这些样式同样有很多重复且大量的计算任务,可以交给gpu来跑。那么,使用gpu来渲染css的技术就是硬件加速。触发浏览器在处理下面的 css 的时候,会使用 gpu

    日期 2023-06-12 10:48:40     
  • 如何制作网页-初学者入门HTML+CSS

    如何制作网页-初学者入门HTML+CSS

    如何制作网页  如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然。比较复杂的网站就需要很多技术上面的知识咯。比如javascrpt、jquery、ajax、flash等等!这些都只是让网站的页面好看。使静态的网站变为动态的。那如何制作个简单的网页呢?那么先用Dreamweaver ,Frontpage做,然后细节用Homesite,Hotdog修改,图片用Pho

    日期 2023-06-12 10:48:40     
  • 关于CSS样式的优先级问题

    关于CSS样式的优先级问题

    关于CSS样式的优先级问题 由 Ghostzhang 发表于 2005-10-19 18:36 在CSS中,你可以为同一个标签定义多个样式,如下面的例子:#aaa{ background-color: Fuchsia; } .ab{ background-color: Black; } td{ background-color: Aqua ; }复制<table> &

    日期 2023-06-12 10:48:40     
  • 用css3制作一个精美的表盘,建议初学者观看

    用css3制作一个精美的表盘,建议初学者观看

    点击链接查看效果https://ihope_top.gitee.io/my-demo/demo/1/前言前两天翻资料,找到了刚开始学习前端的时候学习的一个小案例,用css去画一个转动的表盘,也不知道大家都写过没有,样子如下图所示今天把这个小案例分享给大家,这个效果原案例是完全用css实现的,因为表针转动都有规律可循,设置一个定时的动画就行,我为了简化代码量,并且可以获取当前的时间,所以用js优化了

    日期 2023-06-12 10:48:40     
  • 王者荣耀吕布末日机甲皮肤优化了,我们来用css3给他写一个回城特效

    王者荣耀吕布末日机甲皮肤优化了,我们来用css3给他写一个回城特效

    在线预览地址: https://ihope_top.gitee.io/my-demo/demo/3/ gitee地址:https://gitee.com/ihope_top/my-demo 推广一下我的勇闯掘金小游戏:https://juejin.cn/post/7085758458657505288 貂蝉的回城也安排上了,https://juejin.cn/post/70894737720

    日期 2023-06-12 10:48:40     
  • VUE Scss 安装

    VUE Scss 安装

    五一遇疫情 & 居家学VUE一、前言emmm,记得好多年前,写前端最苦难的并不是 html 本身,而是 css。 特别是自己命名和别人的命名。命名的不规范嵌套特别深样式被覆盖举个例子:某宝网站 h4 的标签.hotsale-item h4 { margin-top: 9px; line-height: 22px; height: 44px; font-siz

    日期 2023-06-12 10:48:40     
  • CSS-精灵图片的使用(从一张图片中截图指定位置图标)

    CSS-精灵图片的使用(从一张图片中截图指定位置图标)

    大家好,又见面了,我是你们的朋友全栈君。目录一、名词解释二、使用难点三、使用步骤四、程序源码一、名词解释 在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求–>响应–>下载,这样一来将会消耗大量的时间来下载这些小图标

    日期 2023-06-12 10:48:40     
  • CSS面试题总结[通俗易懂]

    CSS面试题总结[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。 前面的话小柒前面总结了与HTML相关的面试题,这篇文章总结CSS相关面试题。题目(1) 盒子模型的理解?盒模型分为两种:标准模式与混杂模式(IE模式)标准盒子模型 IE盒子模型 一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。(2) CSS 中哪些属性可以同父元素继承 ? 字体系列:font-fam

    日期 2023-06-12 10:48:40     
  • html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法

    html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法

    大家好,又见面了,我是你们的朋友全栈君。一、flex-direction: (元素排列方向)※ flex-direction:row (横向从左到右排列==左对齐)※ flex-direction:row-reverse (与row 相反)※ flex-direction:column (从上往下排列==顶对齐)※ flex-direction:column-reverse (与column 相反

    日期 2023-06-12 10:48:40     
  • 导航栏滚动渐变效果 html+css+js

    导航栏滚动渐变效果 html+css+js

    大家好,又见面了,我是你们的朋友全栈君。 先看效果:实现:1.定义导航栏的文字标签:<div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li>

    日期 2023-06-12 10:48:40     
  • CSS十问之元素居中

    CSS十问之元素居中

    前言大家好,我是柒八九。从今天起,我们又重新开辟了一个新的领域:CSS串讲。(毕竟在Web 领域,CSS也是有举足轻重的作用)在该系列文章中,我们会一起学习 「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。而今天,我们就从 「元素居中」:这个让无论是前端"萌新"还是"老油条" 抓耳挠腮的问题。不是因为它难,是因为它太

    日期 2023-06-12 10:48:40     
  • HTML和CSS面试题及答案总结一

    HTML和CSS面试题及答案总结一

    大家好,又见面了,我是你们的朋友全栈君。 对于html的语义化标签的理解,结构化标签的理解,同时写出简洁的html结构,如何进行SEO优化? 答: 对于html的语义化标签,用正确的标签做正确的事情。html语义化,让页面的内容结构化,便于对浏览器和搜索引擎的解析,在没有css样式的情况下,以文档的形式同样易于阅读,符合文档语义的标签。标签本身所代表的语义,每一个标签所带有的语义,根据语义

    日期 2023-06-12 10:48:40     
  • css鼠标禁用[通俗易懂]

    css鼠标禁用[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。 #1.鼠标的悬浮样式:cursor div:hover{ cursor:not-allowed; /* 光标是一个红色的圈加一个斜杠)*/ }复制 1、default 默认光标(通常是一个箭头) 2、auto默认。浏览器设置的光标。 3、crosshair 光标呈现为十字线。 4、pointer 光标呈现为指示链接

    日期 2023-06-12 10:48:40     
  • CSS @media 规则

    CSS @media 规则

    @media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。实例如果浏览器窗口的宽度为 768px 或更小时,把 <body> 元素的背景颜色更改为“浅蓝色”:@media only screen and (max-width: 768px) { body { background-color: lightblue; }}复制宽度大于768px 背景色为绿色宽度大

    日期 2023-06-12 10:48:40     
  • css gray rgb数值,CSS3 调色板 颜色值对照表

    css gray rgb数值,CSS3 调色板 颜色值对照表

    大家好,又见面了,我是你们的朋友全栈君。HTML导入代码模板:Color Palette Ruby #D8334A rgb(216,51,74) Grapefruit #ED5565 rgb(237,85,101) Bittersweet #FC6E51 rgb(252,110,81) Sunflower #FFCE54 rgb(255,206,84)

    日期 2023-06-12 10:48:40     
  • CSS 选择器参考手册

    CSS 选择器参考手册

    本文最后更新于2022年04月03日,已超过71天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢! CSS3 选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)选择器例子例子描述CSS.class.intro选择 class="in

    日期 2023-06-12 10:48:40     
  • HTML+CSS实现导航条及下拉菜单[通俗易懂]

    HTML+CSS实现导航条及下拉菜单[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。效果代码中的图片可以自己换的 下拉菜单HTML代码下拉菜单CSS代码复制在写完上述代码的同时须加上css的重置代码,代码如下:* { margin: 0; padding: 0 } em,i { font-style: normal } li { list-style: none } a{

    日期 2023-06-12 10:48:40     
  • css3 媒体类型(Media Type)[通俗易懂]

    css3 媒体类型(Media Type)[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="st

    日期 2023-06-12 10:48:40     
  • CSS设置背景颜色透明

    CSS设置背景颜色透明

    大家好,又见面了,我是你们的朋友全栈君。 CSS设置背景颜色透明将背景颜色设置为透明,两种方法: 方法一:通过background-color和opacity来设置 opacity属性参数的不透明度是以数字表示的,从0.0到1.0,完全透明是0.0,完全不透明是1.0,数字越大代表元素越不透明。 <div class="box01"> <p&

    日期 2023-06-12 10:48:40     
  • html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]

    html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。我做了一个CSS导航栏,但是在每个“navbar-item”之间,都有一点空间。我不希望那里有任何变化!有没有办法做到这一点,而不改变每个navbar-item的余裕?HTML CSS导航栏间距Home – UnhandyFir9 #wrapper { box-shadow: 0px 0px 20px 10px black;left: 0px;top: 0

    日期 2023-06-12 10:48:40     
  • 前端基础:100道CSS面试题总结

    前端基础:100道CSS面试题总结

    大家好,又见面了,我是你们的朋友全栈君。 前言 CSS 是层叠样式表(Cascading Style Sheets)的简称。CSS 主要作用是美化网页、布局页面。CSS 规则主要由两个主要部分构成:选择器及一条或多条声明。在前端基础面试中,CSS 是不会缺席的,下面就给大家分享下 CSS 的常见面试题。 CSS面试题:介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?

    日期 2023-06-12 10:48:40     
  • html+css网页开发 之 头部导航条(logo、导航栏、搜索框)

    html+css网页开发 之 头部导航条(logo、导航栏、搜索框)

    大家好,又见面了,我是你们的朋友全栈君。页面布局整体思路:确定页面的版心(可视区),测量可知。分析页面中的行模块,以及每个行模块中的列模块。一行中列模块常用浮动布局,先确定每个列的大小,之后确定列的位置。制作HTML结构。遵循先有结构,后有样式的原则。 效果图如下:1号是版心盒子header 1200*42的盒子水平居中对齐版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav文字导航栏版心

    日期 2023-06-12 10:48:40     
  • CSS中的媒体类型media type[通俗易懂]

    CSS中的媒体类型media type[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。madia type作用首先要明白一点,我们平时写的HTML页面,可能在不同的媒体类型中显示,如可能显示在屏幕sreen上,也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时,需要的样式可能是不一样的。比如,一般在screen上显示时,页面字体要大一些,在纸质媒体显示时,页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢?这就要

    日期 2023-06-12 10:48:40     
  • html鼠标点击后变换样式,css鼠标样式(css鼠标点击切换样式)

    html鼠标点击后变换样式,css鼠标样式(css鼠标点击切换样式)

    大家好,又见面了,我是你们的朋友全栈君。css鼠标样式新浪博客代码个性化CSS鼠标样式网址完整问题:新浪博客代码个性化CSS鼠标样式网址好评回答:进入控制面版→维护首页内容→自定义空白面版→输入方框内代码,有的人给出的代码还要打字,我的不需要,其实在代码里加入一个就可以了,因为这个东西是HTML代码里的空格,相当于有内容了.—- a:hover {cursor:url(‘http://放在连接上的

    日期 2023-06-12 10:48:40     
  • 纯CSS实现自定义单选框和复选框

    纯CSS实现自定义单选框和复选框

    大家好,又见面了,我是你们的朋友全栈君。目录1 实现效果 2 知识点讲解2.1 标签2.2 CSS3 box-shadow 属性2.3 CSS3 transition 属性2.4 CSS3 :checked 选择器2.5 CSS element+element 选择器3 代码实现 1 实现效果 演示地址: https://www.albertyy.com/2020/7/check1.html 另一

    日期 2023-06-12 10:48:40