04 2017 档案
摘要:2D转换 – transform transform:转换属性 transform-origin:转换的原点,可以是left、right、bottom、top、px、%。 2D转换就是平面上的旋转(rotate)、拉伸(skew)、缩放(scale)、位移(translate)等。 可以赋值如下情况
阅读全文
摘要:过渡--transition 过渡这个属性的作用是当元素的样式发生变化时,使用动画的效果进行变化。有了过渡属性后,很多情况下,写一些简单效果,将不需要再借助 javascript 去计算。 transition 过渡属性简写,可以设置四个值 transition-property 过渡的CSS的名字
阅读全文
摘要:用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染……然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示。 用户界面使用的示例如下
阅读全文
摘要:颜色--rgba(0,0,0,1) CSS3之前的颜色表示法有三种: 第一种、表示颜色的单词,例如“red”、“green”等。第二种、以“#”开头后面是六个十六进制的数字,例如“#ffffff”,前两个数字代表红,中间两个数字代表绿,后面两个数字代表篮。第三种、rgb(0,0,0) 表示,括号中的
阅读全文
摘要:十二栅格是一种响应式布局方式,它的大体思想是,将父元素的宽度等性的分成12栏,利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度,例如,某个元素,在大屏是占整个父元素的3栏(一行有4个相同元素),在中屏占整个父元素的6栏(一行有2个相同元素),在小屏占整个父元素的12栏(独占一行)
阅读全文
摘要:本文不会详细去说@media的各种用法,只是简单的描述一下PC端的响应式是什么,如何去实现。 响应式是指:在不同宽度的屏幕下,都可以看到完整的页面内容,只不过,在宽度较小的屏幕下,可能内容会有删减,布局可能会有些改变等。 响应式一般会使用 CSS3 媒体查询 @media 来实现。 具体使用如下所示
阅读全文
摘要:第一次听说字体图标--iconfont,感觉是:哇,好高大上的样子,会不会很难啊。然而当真正去用的时候,才发现,网上的字体图标库为我们做了太多工作,我们只需要傻瓜式的挑选自己需要的图标,傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了。 本文为大家讲述的是如何使用阿里巴巴字体图标
阅读全文
摘要:现今,界面极大的丰富,传统的 HTML+CSS 已经跟不上时代的步伐,在 CSS3 中,有太多非常好用的属性,可以很方便的做出种种炫酷的效果,接下来,我将例举一些常用的 CSS3 的属性。 border-radius:圆角。 box-shadow:元素阴影。 border-image:边框图片。bo
阅读全文
摘要:定位层,在一些情况下,元素随机摆放,在文档层和浮动层中布局已经远远无法满足需求,这时,我们将会使用定位属性。 在一般的页面中,常用到的定位有三种 相对定位、绝对定位、固定定位。接下来我们一一了解一下这三种定位。 相对定位(position:relative;),当一个元素具有相对定位时,该元素将可以
阅读全文
摘要:文档层,每一个放置内容的元素内部都会有一个文档流的规则,即内部的内容若不是浮动或定位的元素,将会按照从左到右,从上到下的规则来排列,块元素将会独占一行,剩下文本或是行内元素则排满一行,再排下一行。 在文档层中,元素或内容摆放位置,主要是通过padding、margin属性来移动位置,其中margin
阅读全文
摘要:CSS 中最重要的两部分,一部分是 CSS 选择器,另一部分是 CSS 属性,本文将重点描述 CSS 选择器。CSS 的工作流程本质上就是利用选择器选择到 HTML 中的元素,然后赋予他们样式规则,让每一个元素都变成我们想要的样子,都出现在我们想让它去的位置。 CSS到目前位置已经扩充到第三版了,每
阅读全文
摘要:背景层,顾名思义,就是一个元素的背景,背景是用 CSS 属性中的 background 来实现的。background 属性是个缩写属性,其展开后包含很多分支属性: background-color : 背景色,使用该属性可以为一个元素添加一个背景色,添加背景颜色的取值大致可分为4种。 backgr
阅读全文
摘要:事实上,网页布局只要能懂得 CSS 的四大布局层级 和 HTML 标签的 ‘生态系统’ ,那么布局就会慢慢从脑力劳动,逐渐过渡为体力劳动了。下面,我将详细的解释一下,何为 CSS 的四大布局层级,何为 HTML 标签的 ‘生态系统’。 就我看来,初学时,布局基本可以分为四大层级,在布局一张页面时,我
阅读全文
摘要:本篇文章,严格意义上来说,这是我的第一篇技术博客,我将写一些有关HTML+CSS 的基础。 我有过前端布道师的经历,带过的学生到目前为止至少在1000+,所授课程基本都会有HTML+CSS布局,所以我对这个技术点,应该可以说是比较熟悉的了。 首先,我个人是比较赞同内容(HTML)和样式(CSS)分离
阅读全文

浙公网安备 33010602011771号