关注
分享
文章平均质量分 66
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
泽哥ins
Java开发工程师:田根旺️
展开
-
（52）CSS hack
开发人员书写一份代码上传到服务器，一份代码提供所有用户下载，用户的浏览器不同，会出现渲染效果不同。为了保证所有用户浏览器加载效果相同，需要在同一份代码中书写不同的结构给不同的浏览器，这种方法叫做hack方法（Hacker黑客）。hack方法就是在同一份代码中给不同的浏览器书写不同的css，保证最终加载效果一致。示例：...原创 2021-12-28 16:18:06 · 196 阅读 · 0 评论 -
（51）蓝湖团队协作开发平台
一、Adobe Photoshop二、Adobe Fireworks三、Sketch（Mac版本电脑前端程序员最喜欢的切图工具）四、插件：Cutterman（早期程序员最爱用的插件）蓝湖（现在企业最流行的插件）蓝湖地址：https://lanhuapp.com/首先我们访问蓝湖协作网站，初次使用我们需要注册一个账号，并登录。蓝湖是一个团队写作工具，我们可以再注册的时候看到如下提示框，选择您的岗位角色。可以邀请公司团队员工加入到该项目中来，还能对加入的员工设置权限，比.原创 2021-12-28 11:36:09 · 2676 阅读 · 0 评论 -
（50）流式布局—京东移动端首页制作案例
一、访问地址http://m.jd.com二、技术选型方案：我们采取单独制作移动页面方案 技术：布局采取流式布局三、搭建相关文件夹结构四、设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"><!-- 引入移动端初始化css文件 --><link rel="原创 2021-12-24 16:37:26 · 868 阅读 · 1 评论 -
（49）移动端开发之流式布局（百分比布局）
一、流式布局（百分比布局）介绍流式布局，就是百分比布局，也称非固定像素布局。 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制， 内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。<!-- * @Author: 田根旺 * @Date: 2021-12-24 11:11:30 * @LastEditTime: 2021-12-24 11:29:53 * @LastEditors: Please set LastEditors原创 2021-12-24 11:35:26 · 486 阅读 · 0 评论 -
（48）移动WEB开发基础
一、浏览器现状1.1PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。1.2移动端常见浏览器UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移云端主流浏览器，处理Webkit内核浏览器即可。原创 2021-12-22 14:25:04 · 1357 阅读 · 0 评论 -
（47）网页布局常用工具
一、vscode代码编辑器用于编写前端代码，微软公司使用electron前端客户端技术做出的vscode软件，功能虽然比不上webstrom编辑器强大，但是它使用起来启动速度更快，功能强大度达到webstrom的90%，自从vscode的出现，大部分企业的前端工程师都在使用vscode编辑器，因为它开发效率不仅高，启动速度还快。二、Fireworks量取设计图软件该工具可以测量整个页面版心的px像素值，以及可以使用标尺工具，按shift键可以查看到margin或者padding的距离，切片工具可原创 2021-12-22 12:10:28 · 3801 阅读 · 0 评论 -
（46）HTML网页开发流程
一、网页开发流程二、软件开发流程由软件定义、开发、使用、维护到报废的过程。一般包括问题定义、可行性分析、需求分析、总体设计、详细设计、编码、测试和维护。软件开发涉及到的部门有：运营人员—产品经理—开发人员—测试人员—运维人员软件开发过程：问题定义：确定开发任务到底“要解决的问题是什么”可行性分析：分析上一个阶段所确定的问题到底是否可行需求分析：对用户要求进行具体分析，明确“目标系统要做什么”，把用户对软件系统的全部要求以需求说明书的形式表达出来。（产品经理）总体设计.原创 2021-12-21 21:01:43 · 6651 阅读 · 0 评论 -
（45）css面试题集锦二
31.怎么让Chrome支持小于12px 的文字？ 1、用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。2、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。3、继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-...原创 2021-12-21 08:37:25 · 207 阅读 · 0 评论 -
（44）css面试题集锦一
1.box-sizing box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + conten原创 2021-12-20 20:08:59 · 601 阅读 · 0 评论 -
（43）css单位
一、CSS 单位CSS 有几种表示长度的不同单位。许多 CSS 属性接受“长度”值，诸如width、margin、padding、font-size等。长度是一个后面跟着长度单位的数字，诸如10px、2em等。二、示例<style>h1 { font-size: 60px;}p { font-size: 25px; line-height: 50px;}</style>数字和单位之间不能出现空格。但是，如果值为 0，则可以省略...原创 2021-12-20 20:03:08 · 158 阅读 · 0 评论 -
（42）css特异性
一、什么是特异性？如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。二、特异性层次每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：行内样式- 行内（内联原创 2021-12-20 19:46:08 · 166 阅读 · 0 评论 -
（41）css 三大隐藏属性
持续更新。。。visibility属性：规定元素是否可见。取值：hidden：隐藏 visible：显示联想到：display属性: none隐藏 block显示区别？display属性：隐藏的元素不再占据空间。visibility属性：隐藏的元素仍然占据空间。还有一个属性也可以设置隐藏。就是opacity属性，不透明度，将该属性设置为0表示全透明，也是占据空间的。原创 2021-12-19 20:09:31 · 270 阅读 · 0 评论 -
（40）css渐变
一、线性渐变background-image:linear-gradient（angle，color1，color2)angle：指定渐变方向，可以是角度值，也可以是关键字。to top (0deg/bottom）从下向上渐变to right（90deg/left）从左向右渐变to bottom（180deg/top） 从上向下渐变to left（270deg/right） 从右向左渐变color：表示颜色的起点，中间点或者结束点。取值为颜色或者颜色和位置的组合。原创 2021-12-19 20:08:13 · 181 阅读 · 0 评论 -
（39）css3实现轮播图效果
css3的轮播图和js的轮播图的区别？css3：没有一些js的逻辑，优点，过渡动画比较漂亮，缺点：兼容问题。无法实现自动轮播和点击轮播一起同时出现的效果。js轮播图：js逻辑很多，可以做的很复杂，可以实现点击轮播和自动轮播同时生效的轮播图，缺点：过渡效果不好看。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C原创 2021-12-17 16:59:20 · 542 阅读 · 0 评论 -
（38）重构和重绘
解析：我们的HTML元素在加载前会生成一个DOM tree（DOM树），CSS呢会在加载前生成一个Style Rules（样式规则），让我们这两个都生成后会和并在一起然后生成一个Render Tree（渲染树），最后通过渲染树进行渲染展示到页面上。一、回流回流（Reflow）：render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏...原创 2021-12-17 15:51:38 · 282 阅读 · 0 评论 -
(37) BFC IFC GFC FFC概念
一、什么是FC？Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。二、BFC块级格式化上下文1.BFC布局规则内部的盒子会在垂直方向，一个个地放置。 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。 BFC的区域不会与float重叠。原创 2021-12-17 10:50:20 · 385 阅读 · 0 评论 -
（33）css轮廓
一、什么是css轮廓轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。二、CSS轮廓的属性outline-style outline-color outline-width outline-offset outline注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。三、css轮廓样式dotted- 定义点状的轮廓。 dashed- 定义虚线的轮廓。 ..原创 2021-12-16 20:39:15 · 694 阅读 · 0 评论 -
(32) css—opcity属性
属性值:0-1之间的数字，0表示元素完全透明，1表示元素完全显示，0.5表示半透明。注意：半透明效果是连着内部所有的子元素内容一起半透明的。透明悬停效果opacity属性通常与:hover选择器一同使用，这样就可以在鼠标悬停时更改不透明度：...原创 2021-12-16 16:58:00 · 1161 阅读 · 0 评论 -
（31）css常用属性兼容问题—需要加前缀的属性总结
一、boder-radius边框圆角属性InternetExplorer8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。二、transition过渡属性Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。三、@keyframes和animation属性原创 2021-12-16 15:55:20 · 982 阅读 · 0 评论 -
(36) css企业代码书写规范
css书写规范1：元素尽量使用class选择器匹配，对于特殊功能可以考虑使用 ID选择器。2：明确各选择器的优先级，作用范围。3：CSS写完之后必须使用“;”号结尾，虽然浏览器支持不用分 号结尾，但是不建议这么做。4：除非编写HTML5页面，否则不允许使用CSS3伪类，如：:nth-child(1)等伪类，禁止使用。5：编写CSS样式时，不允许换行，样式必须一行写完，自动换行 除外。6：对于子元素样式采用链选择器进行选择，如：:btn-save div7：元素选择器只能在原创 2021-12-16 20:46:40 · 342 阅读 · 0 评论 -
(35) css企业命名规范
一、企业命名规范网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻：原创 2021-12-16 20:39:03 · 143 阅读 · 0 评论 -
（34）css光标属性cursor
一、cursor光标属性介绍cursor属性规定要显示的光标类型。取值：default：默认光标(通常是一个箭头)pointer：小手（常用光标）move：移动crosshair：光标呈现为十字线wait：等待help：帮助text：文本二、cursor光标属性示例光标直接设置给需要改变光标样式的元素即可。...原创 2021-12-16 20:34:03 · 320 阅读 · 0 评论 -
（30）css3动画
一、CSS3动画介绍css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。二、CSS3动画制作方式css3 动画制作分为两步：1.创建动画、2.绑定动画（调用动画）。1.创建动画@keyframes 规则@keyframes 规则用于创建动画。单词是关键帧的意思，在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。 需要使用百分比来规定变化发原创 2021-12-16 12:09:50 · 674 阅读 · 0 评论 -
(29) CSS3 3D 正方体案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3—3D转换正.原创 2021-12-16 12:01:57 · 258 阅读 · 0 评论 -
（28）css3 3D转换
transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成的平面效果多了一条 z 轴，如下图：一、透视电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。 透视特点：近大远小。 例如：当我们站在山的脚下看山，山会给我们的视觉效果看起来特别大，当我哦我们站在山的远处观看山，山给我们的视觉效果看起来特别小，这就是所谓的近大远小。.原创 2021-12-16 10:01:24 · 393 阅读 · 0 评论 -
（27）css3 2D转换综合案例—卡包效果
卡包效果实现思路如下：1.将盒子的尺寸和图片的尺寸宽高度相同。2.给图片设置绝对定位让他堆叠在盒子里面，相对于父亲，所以父亲设置相对定位，父相子绝。3.给盒子添加鼠标hover事件，当鼠标移入的时候，让盒子内部的图片进行旋转。我们使用伪类选择器选中每一张图片，因为每一张图片旋转的度数不一样，一共是360度，这里有6张图片，那么每一个图片的旋转度数应该是60，最后一张是360度。4.这样我们看到它的基准点默认是center center中心点，我们要给所有的图片通过transform-ori.原创 2021-12-15 21:01:04 · 262 阅读 · 0 评论 -
(26) CSS3 2D转换transform
一、transform转换属性作用作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 属性值：多种转换方法的属性值，可以实现不同的转换效果。二、位移 translate()transform的属性值为 translate() 时，可以实现位移效果。书写语法：示例：...原创 2021-12-14 12:10:13 · 478 阅读 · 0 评论 -
（25）css3过渡属性transition
一、动画效果CSS3 出现之前，前端一般使用Flash 动画或 JavaScript 制作动画。帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。例如，photoshop（简称：ps）软件的时间轴中的帧动画制作。二、过渡属性transition作用作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过原创 2021-12-14 10:45:36 · 1025 阅读 · 0 评论 -
（24）css3盒子阴影
1.边框阴影在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。2.边框阴影语法box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。盒子阴影顺序: 水平位置 垂直位置 模糊距离 扩大尺寸 阴影颜色 是否内阴影inset，注意：如果是外阴影的话，不需要设置outset属性，默认不设置的情况下就是外阴影，但是一旦设置outset不存在不合法的语法，反而会出现不生效的问题。3.多层阴.原创 2021-12-13 20:40:02 · 1263 阅读 · 0 评论 -
（23）css3文字阴影text-shadow
在 CSS3 中，text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色。1.文字阴影语法text-shadow属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。2.多层阴影text-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。...原创 2021-12-13 20:18:21 · 626 阅读 · 0 评论 -
（22）css3新增边框圆角属性border-radius
1.边框圆角属性border-radius使用作用：设置边框的圆角。 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。示例1：示例2：示例3：当border-radius属性值为盒子的宽高度的一半，它就是一个圆形，只要值取值为50px及以上都是该效果，不会再进行更改。可以说是50px是最终结果了，再加像素也是按照50px进行加载。注意：但是如上示例3不是最好的画圆形的方式，因为它如果存在其他属性，例如内边距，我们还需要给border...原创 2021-12-13 17:00:53 · 1423 阅读 · 0 评论 -
（21）css3盒模型box-sizing属性
CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。1.content-box标准盒模型标准和模型是外扩的，再元素的宽高度之外绘制内边距和边框。2.boder-box怪异盒模型怪异盒模型是内减的，再元素的宽高度之内绘制内边距和边框。将内容收缩，把宽度和高度分别缩短到160px。...原创 2021-12-13 15:53:55 · 784 阅读 · 0 评论 -
（20）css3新增选择器
CSS3中，相对于CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式.1.子级选择器子级选择器用于选取带有特定父元素的元素。 书写语法：element1 > element2 注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。 > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。2.兄弟选择器...原创 2021-12-13 11:13:08 · 720 阅读 · 0 评论 -
（19）综合案例—css轮播图静态结构布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例—css轮播.原创 2021-12-13 10:31:03 · 120 阅读 · 0 评论 -
（18）css常用样式—定位属性
一、定位属性position前面我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布 局的重要属性，常用于制作压盖或者位置相关的效果。属性名：position属性值：relative 相对定位absolute 绝对定位 fixed固定定位作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。...原创 2021-12-07 21:04:53 · 830 阅读 · 0 评论 -
（17）css3新增背景属性
一、背景半透明CSS3支持背景半透明的写法，颜色值增加了一种 rgba 模式。 rgba 模式：在 rgb基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。 书写方式：rgba(红色，绿色，蓝色，不透明度) 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响，是2个单独存在的东西，不是一起的。二、半透明其他应用同样， 可以给文字和边框透明，都是 rgba 的格式来写。...原创 2021-12-07 21:02:16 · 481 阅读 · 0 评论 -
（16）css背景属性常用应用场景
场景一：替换插入图<h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片（企业网站）、最大的标题（新闻网）等。 另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。 在设置logo图片时，如果使用插入图，就不能书写搜索关键字。背景图替换插入图方法如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。那么如何解决文字隐藏原创 2021-12-07 15:56:04 · 681 阅读 · 0 评论 -
（15）css常用样式—background背景属性
一、背景属性概述CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修 饰，从而让网页变得更加的美观。 CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。二、背景颜色 background-colorbackground-color 属性名：background-color 作用：在盒子区域添加背景颜色的修饰。 加载区域：在 border 及以内加载背景颜色。 属性值：颜色名、颜色值。作用：在盒子区域添加背景颜载区域：在 bord.原创 2021-12-06 12:09:59 · 3870 阅读 · 0 评论 -
（14）css—伪类选择器
一、伪类和普通类的区别伪类和类之间有一定的相似之处，也存在明显的区别。 普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上， 只有用户触发了对应的行为，伪类的样式才会立即加载。比如说当我们访问后，鼠标悬停，鼠标点击后才加载样式，伪类选择器的权重与普通的类选择器相同。二、伪类选择器语法（写法原创 2021-12-06 11:51:39 · 686 阅读 · 0 评论 -
(13) css浮动补充
一、字围现象与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住黄绿盒子的一部分，但是文字内容不会被盖住，蓝色盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib原创 2021-12-02 20:53:57 · 125 阅读 · 0 评论