好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：...
好程序员web前端学习路线分享纯css绘制各种图形，很多时候，UI设计师为了页面的好看，都会采用很多图形去做装饰，比如三角形、矩形、圆形、椭圆形、对话泡泡等，让整个页面看起来不会太单调。作为前端开发更多的时候，会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果，但是有一个很大的问题就是图片可能会失真，有些情况也会发现用图片或者背景图去实现效果灵活度也不够。那么如果不用图片，用纯CSS也是可以绘制各种图...
写在前面 马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？ 说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多 程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。 值此1024程序员佳节之际，我特此推出供...
好程序员web前端分享CSS3 边框，通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。在本章中，您将学到以下边框属性：border-radiusbox-shadowborder-image浏览器支持Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持...
好程序员web前端教程之CSS3渐变，CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);说明：direction：默认为to bottom，即从上向下的渐变；stop：...
好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：...
随着DIV+CSS的涌进，现在Web界面大部分都是用DIV+CSS来设计的，以前Web程序员套页面大部分都table格式做的界面，现在突然转为一下还真不太适应，主要里面的应用的CSS样式太多，所以你必须精通CSS才能下得了手，嘿嘿……，不过上手也快，我两天就差不多了！
div.content { float:left; border:1px solid #FFFFFF; width:100px; line-height:75px; } 这样浮动形成的一个个格子排列，但中间的边框变为2px了，有办法么 写程序太苦逼了，整到夜里2点多 回复讨论(解决方案) 最外面的div padding1px 只设两边 border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF; 只设两边 border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF; ...
摘要: 随着敏捷开发、开发运营和分布式版本控制系统的愈渐流行，开发的重心逐渐从个人能力向小组合作转移 英文原文： Ten career tips every egocentric programmer should hear 翻译作者：? 蒋丽丽 ...
我是个前端，略懂后台，为了不坑队友，想问下前端的哪些行为会坑到程序员？求程序员解答 回复讨论(解决方案) 不懂程序设计思想 公司没前端的路过 . 前端我们后台人员写的 . 就做布局CSS，图片处理之类的话 对我们没什么影响吧,至少我没想到 .
本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下. metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootstrap,所以满足响应式的UI设计,故同时支持在各种设备和屏幕分辨率下UI样式不会出现大的硬伤.可以做到一套UI兼容各种各种屏幕各种设备. 打开metronic目录下的start.htm文件,可以看...
目录 了解什么是Web 了解什么是HTML 了解什么是CSS 了解什么是JavaScript 了解HTML与CSS是如何一起工作的 为何要使用CSS 扩展阅读 一、了解什么是Web？ 通俗来讲，可以使用户通过浏览器来访问某个电脑上的文件。 二、了解什么是HTML？ HTML（超文本标记语言--Hypertext Markup Language），用来结构化Web网站上的内容并给予其含义的标记语言。 三、了解什么是CSS？ C...
目录 什么是HTML语义化？ 为什么要语义化 常用标签的语义 一、什么是HTML语义化？ 简单来讲就是：每个标签做自己的事，使得能够被机器直接读懂。 二、为什么要语义化？ 1、更容易被搜索引擎收录。 2、方便其他类型设备解析（如：屏幕阅读器等） 3、便于团队开发和维护。 三、常用标签的语义 标签 含义 备注 网页标题 用于告诉用...
目录 块级元素 内联元素 内联块级元素 总结 一、块级元素（block） 定义：默认情况下，独占一行的元素就是块级元素。 特点： 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 元素的高度、宽度、行高以及顶和底边距都可设置 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。 常见的块级元素：、、....
目录 图解 盒模型尺寸基准 使用浏览器的开发者工具，查看元素高(宽)度时，遇到的问题 一、图解 说明：由内而外依次是content、padding（内边距）、border（边框）、margin（外边距）。 举个例子：一个快递车里放了许多快递包裹（盒子包装的），每个包裹里面又放了不同的东西。 content：真正容纳其他东西的区域。比如快递车的content，就是那些包裹所处的那个空间； 而每...