你所选择的标签为: CSS

CSS BEM 解读

09

November

2018

概要

BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团队协作开发。

特点

  • 组件化/模块化的开发思路。
  • 书写方式解耦化,不会造成命名空间的污染,如:.xxx ul li 写法带来的潜在嵌套风险。
  • 命名方式化扁平,避免样式层级过多而导致的解析效率降低,渲染开销变大。
  • 组件结构独立化,减少样式冲突,可以将已开完成的组件快速应用到新项目中。
  • 有着较好的维护性、易读性、灵活性。
    [ 查看全文... ]

Hello CSS! 和图片说Bye Bye

25

July

2013

在一次聊天中讨论到如何利用CSS来制作一个按钮,不但能自适应宽高,并且还要在不实用图片的情况下,让按钮有类似“外描边”、“内描边”和圆角的效果,并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后,发现单纯的按钮有点单调,就想加点ICON来美化一下。可既然按钮都是用CSS来完成,那ICON还用图片来显示,是否有些背道而驰,所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下,也加入一些CSS3属性,起到渐进增强的目的,让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整,维护起来比较方便。还有就是CSS的渲染速度比较快,同时还减少了HTTP请求量。

不过,并不是说用CSS必定比图片好,关键还是要根据实际环境和需求,合理使用才是关键。

本例兼容:IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]

图片、文字水平垂直居中(兼容各浏览器)

02

July

2013

图片水平垂直居中、文字(多行文字)水平垂直居中,这是个老生常谈的问题,也经常有人提及这个问题,至此写个案例作为备忘。

主要用到的CSS属性就是display:table-cell[指定对象作为表格单元格。类同于html的td标签]。应用与已知外层容器宽高,但内部图片大小和文字数量未知的情况。

注:使用display:table-cell的时候,当前元素不支持margin和position属性,这个问题往往容易被人忽略。 [ 查看全文... ]

jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

18

December

2012

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。

其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已。

首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行。

HTML CODE:

<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
	<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>

[ 查看全文... ]

CSS3 制作3D旋转球体

28

November

2012

今天的例子中,我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d,这里要说明的是,它只影响这个元素的子元素(二级元素),孙元素(三级元素)如果也想拥有3D模式,那么就必须给它的上级元素(父元素)也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性,其分辨有2个值content-box和border-box。
content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)
border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)

好了,接下来我们就看例子吧:
[ 查看全文... ]

CSS3 绘制Windows 8 logo

27

November

2012

今天的内容非常简单,但有个比较关键的属性:perspective(透视)。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离(学过AUTOCAD的童鞋应该很容易理解吧)。是不是还有点云里雾里呢?我们来举个例子,想想你从天上俯看一座金字塔。镜头到元素平面的距离,就是塔的顶部(视点)和地面(Z-平面)之间的距离。

HTML CODE:

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

[ 查看全文... ]