QQ 1640076782

2015年05月29日

通过css3的animation 来控制元素的显示和隐藏

Filed under: 英语网站设计 — 标签:, — lifengwu @ 9:10 上午

CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的animation就需要明确的动画属性! animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): 之所以要用俩动画(slideIn和slideOut),原因是:slideIn动画是把元素滑动进来,这时元素样式已经定为fadeIn动画100%时的样式了,就算把show样式删去也对元素没影响,所以这时要用slideOut动画把元素滑动出去才行。 <button onclick=”fadeIn()”>显示</button> [...]

2015年04月30日

CSS3 Auto值的Transition Bug解决方案

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:00 上午

在一个外贸购物网站的制作过程中,遇到了Auto值的Transition Bug问题,各种搜索尝试之后得到解决方案 当我们需要给width、height等值设置Transition(过渡)时,如果我们的起始状态(或结束状态)为auto时,Transition就会失效。 由于二级菜单数量不定,因此ul.sub高度不定,我们需要为其赋予auto值(即根据内容高度自由扩展),这时的Transition(过渡)就不灵了。 hover状态会起效,但是Transition失灵。 该怎么解决呢?这时我们需要尽可能的绕过auto值,可以通过使用max-height绕过height:auto值。当然,width可以使用max-width。 即 首先我们需要确保max-height的值超过所有项中的最大值,也就是说一定要罩得住。 其实这里的transiton是从0到200px之间过渡,需要赋予合适的过渡持续时间、合理的max-height值以取得最佳的效果,可以根据实际情况来设定不同的值! 如果有更好的方法,欢迎交流!

2015年03月31日

通过CSS3制作网站面包屑导航效果

Filed under: 英语网站设计 — 标签:, — lifengwu @ 7:39 上午

面包屑导航对我们来说并不陌生,能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面,在没有了解CSS3以前,一看到这个效果我们肯定认为这个要通过PS做成图片后才能实现这种效果,但是这需要做多张图片才能实现这种效果,下面我们来看看能过CSS3如何来实现这个效果: Html源码: <div id=”mbmenu”> <ul> <li><a href=””>Step1</a></li> <li><a href=””>Step2</a></li> <li><a [...]

CSS3 Media Queries在常用设备(iphone、ipad等)的设置方法

Filed under: 英语网站设计 — 标签: — lifengwu @ 7:14 上午

CSS3 中的 Media Queries 对我们来说并不陌生,在网站需要自适应各种尺寸屏幕的时候我们会经常用到,根据不同的屏幕尺寸调用相对应的样式表。功能是非常强大的,它可以让我们定制不同的分辨率和设备,并在不改变内容的情况下,制作的网页在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。下面我们来看看常用移动设备的CSS3 Media Queries iPad Media Queries [...]

2015年02月27日

如何给select标签的option内容加上超链接

Filed under: 英语网站设计 — 标签:, — limeng @ 3:01 上午

select是下拉列表菜单,option是里面每个项目的值,给select标签的option内容加上超链接,也就是当选择某个option内容的内容时,能跳转到该页面,如何给select标签的option内容加上超链接?这是有多种方法可以实现了,我只介绍一种最简单,方便的方法,直接根据onchange属性使之跳转。 <select> <option value=””>&mdash; Primary Nav &mdash;</option> <option value=” ” [...]

2015年02月24日

如何在线转换字体格式?

Filed under: 英语网站设计 — 标签:, — limeng @ 2:30 上午

网上下载的字体格式一般为.TTF,如何将.TTF转换成.EOT,.SVG,.WOFF等格式的字体呢? fontsquirrel是一个可以在线转换字体格式的网站,也有比较多的特殊字体可以免费下载,转换字体网址http://www.fontsquirrel.com/tools/webfont-generator 上传你需要转换的字体文件 可根据你的实际情况勾选BASIC,OPTIMAL,EXPERT 点击右下角紫色的按钮,下载转换好的字体即可。 下载后的字体包含了各种格式的字体,如下图所示 CSS调用方法: @font-face { font-family: [...]

如何在网页html中加入特殊字体?

Filed under: 英语网站设计 — 标签:, — limeng @ 1:50 上午

我们知道,中文站字体一般使用的是宋体和微软雅黑,英文站的是Arial,可是偶尔为了美观,我们需要使用一些特殊的字体,这样有些客户如果没有装该特殊字体,那么就会看不到该效果,那么我们如何在网页html中加入特殊字体呢? 1.做成图片插入网页中 如上图红色框部分 这种方法不适合在网页中使用过多,因为图片不利于优化,且图片太多对网站加载速度也会有一定的影响。 2.下载需使用的特殊字体 不同的字体格式,适应不同的浏览器 常见的   .TTF或.OTF,适用于Firefox 3.5、Safari、Opera SVG,适用于Chrome、IPhone [...]

2015年01月28日

自适应网站中字体大小单位为什么要使用em

Filed under: 英语网站设计 — 标签:, — lifengwu @ 12:09 下午

px、pt、em 这些css 文字大小单位对于我们来说并不陌生,但是我们最常用是通常是px,但如果网站需要自适应各种不同的浏览器尺寸,我们就得改变使用px作为字体大小单位的习惯,这是为什么呢? 因为em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。 下面我们来看看两者的区别,使用px作为字体单位 正常状态: 屏幕缩放以后: 正常状态和缩放以后的字体大小没有任何变化。 使用em作为字体单位 正常状态: [...]

2015年01月27日

css有关z-index层级问题

Filed under: 猪哥,英语网站设计 — 标签:, — limeng @ 2:26 上午

第一,在三个层都未使用position定位的情况下,z-index层级没有任何作用,在最下面的块会覆盖在上面的块,按照排列顺序,如下图所示 黄色的层级最高,在最上层。 第二,当使用了position定位时,position:static是不起作用的,还是按照层级顺序排列,position定位relative(相对定位),absolute (绝对定位),fixed (固定定位)时,使用了定位的层级会比没使用定位的层级高,如果都使用了定位,那么还是按照z-index的高低顺序排列。如下图 虽然red的div层级是2,比yellow的层级小,但是它使用了position:relative,所以它覆盖在yellow上面,此时如果我们将yellow块也使用position:relative,那么会出现什么情况呢? 此时仍然按照层级顺序排列。 第三,在都使用了position定位的情况下,z-index:0跟没有做z-index的层没有高低之分,按照排列顺序,在最下面的块会覆盖上面的块。如下图所示 yellow块排在最下面,所以覆盖在红色块上面。 第四,当z-index出现负值时,将会被z-index大于它的所有层覆盖,即便是z-index的负值做了定位,也会被没有做定位,但是z-index指比它大的层级覆盖。 [...]

2015年01月6日

关于inline-block和float的区别

Filed under: 英语网站设计 — 标签:, — limeng @ 6:36 上午

display:inline-block和float:left都可以使元素向左浮动,那么什么时候该用display:inline-block,而什么时候该用float:left呢? 第一,如果需要元素水平居中的时候,用display:inline-block,如下图 红色框部分是用ul li架构起来的,如果把li使用float:left,那么text-align: center就会失效,所以需要居中时,一般使用display:inline-block 2.需要元素垂直水平对齐时使用display:inline-block 这个是li float:left的效果图,由于高度不一样,将其余元素挤下去了。 下面是li display:inline-block的效果图,第二行仍然对齐,其余处留白。 [...]

2014年12月31日

css实现背景图片自适应大小

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 6:00 上午

在外贸网站设计过程中,为了网站的美观或者部分产品的需要,我们会为网站添加一个背景,有时候是小图片平铺,有时候是一整张大的背景图片,由于浏览器尺寸、分辨率的原因,如果背景是一张大图,那么在浏览器尺寸、分辨率不同的情况一下,呈现的效果也会不一样,为了保证好的效果,我们需要让背景图片自适应浏览器窗口大小,即不论浏览器尺寸、分辨率的大小如何,图 片都能占满整个屏幕。下面我们来看看代码: body {background:url(../xxx.jpg);filter:”progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’)”; -moz-background-size:100% 100%;background-size:100% 100%; } 正常状态效果: 浏览器窗口缩小后: [...]

2014年12月30日

CSS3中新的字体尺寸单位rem与px、em的区别

Filed under: 英语网站设计 — 标签:, — lifengwu @ 11:45 上午

px、em这两个字体单位我们都不陌生,对于rem这个字体单位可能有很多人并不了解,其实这是css3新增的一个字体单位,那么这三个字体单位有什么区别,各有什么特点呢?下面我们来看一下! rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 px也即像素 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 [...]

2014年12月29日

css如何做圆角背景图片且自适应宽度

Filed under: 英语网站设计 — 标签:, — limeng @ 8:44 上午

一般背景图片平铺我们都会直接使用代码repeat-x或repeat-y,这个可以运用到纯色背景或是渐变有规律的背景,如果网站中需要圆角的背景图片,且可随着宽度自由拉伸,那么我们应该怎么做呢? 常规的方法都是直接把图片用ps做好,宽度也定好了,然后在css中直接插入背景图片,但是在宽度不一定的情况下,就不能这么做了。 <div> <b></b><b></b><b></b><b></b> <div> <h3>圆角图片</h3> <div>标题采用一张上下渐变的图片以水平平铺方式实现,看看图片的也可以做成外圆角透明的效果了。</div> </div> </div> /*圆角框通用设置样式,如果要运用多个不同颜色,以下部分不用重新变化——————————–*/ [...]

2014年10月31日

通过CSS3 Media Queries实现网页自适应不同尺寸屏幕

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 4:28 上午

随着智能手机的普及,多数人也不再仅仅用电脑来浏览网页、搜索东西,现在有手机,平板电脑等等。所以原来固定宽度的设计在手机、平板上浏览体验并不好,因此我们的网页需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果、提供更好的用户体验,下面我们来看看: 正常效果 比较窄的效果 最窄的效果 当屏幕分辨率大于1024px时,网页宽度将会是960px。通过Media query来检验屏幕分辨率,如果小于960px,页面宽度将会用自适应来取代固定宽度;如果小于600px,主题和边栏将会撑满屏幕并一列显示。当小于480px时,主题和左侧栏会在一栏显示 代码就不贴了,太多 在网页代码的头部,加入一行viewport元标签。 <meta name=”viewport” [...]

2014年10月30日

CSS 的显示/隐藏属性display、visibility 有什么区别

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:39 上午

我们都知道css中的 display和visibility属性都可以控制元素的显示和隐藏,那这两个有什么区别呢,什么时候该用display,什么时候该用visibility,下面我们来看一看: visibility属性用来确定元素是显示还是隐藏,他有”visible|hidden”两个值,visible表示显示,hidden表示隐藏。 下面我们通过实际效果来看区别: 正常效果 中间的黄色图层设置为visibility:hidden 中间的黄色图层设置为display:none 第一张图是正常情况下的效果,第二张是我将中间的的黄色图层设置为visibility:hidden后的效果,第三张图是将中间的黄色图层设置为display:none时的效果 <div> <div [...]

2014年09月30日

不错的在线英文字体格式转换工具

Filed under: 英语网站设计 — 标签:, — lifengwu @ 3:34 上午

外贸网站建设过程中,我们最常用的英文字体就是Arial, Helvetica, sans-serif,通常情况下默认的字体也是这些,但是现在越来越多的英文网站客户要求使用非常规字体,这时候就需要我们用CSS来改变整个网站或是某些地方的字体,但是在运用这个CSS的时候需要同一个字体的多种不同格式如ttf、eot、woff、svg,需要将原有的字体转换成这四种没的格式进行加载。我们知道字体通常的格式是ttf或是otf,其他几种是需要我们手动转换的,下面我们就来看看几个不同的在线转换工具: Online Font Converter 可转换成各种不同的格式,但是上传的字体不能太大,最好在几十K左右,如果字体太大,是转换不了的 Font Squirrel 可批量选择要转换的字体格式,但是对字体大小也有要求,一般不要超过1M,否则是没办法转换的,转换的速度有点慢,需要等的时间比较长! [...]

2014年09月28日

常用的几种特殊简单的CSS,js样式

Filed under: 猪哥,英语网站设计 — 标签:, — limeng @ 8:52 上午

下面是几种比较特殊的CSS,js样式 第一种:去掉a外面框的虚线(一般IE,火狐点击后会出现) 我们一般使用a的时候,IE里面默认a外面都会用虚线包围,这样比较影响美观,下面就是去掉默认的虚线css样式 a { color:#444; text-decoration:none;} a:focus { outline:0;} [...]

2014年09月11日

Div ul等框架背景透明,内容文字不透明(css)

Filed under: 英语网站设计 — 标签:, — limeng @ 6:36 上午

Div ul透明css样式代码 background-color:#935637; filter:alpha(opacity=50);适用于IE6/7/8浏览器 -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;适用于w3c标准,即适用于火狐,谷歌,苹果等等 一般一起写就能适用于各种浏览器 [...]

2014年06月30日

纯CSS绘制多边形(五角星、五边形)

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:07 上午

如果网页要用到五角星,我们通常想到的最直接方法是在Ps里面绘制一个五角星再存成图片插入网页中,下面我们就来看看如何通过CSS绘制五角星: 网页代码: CSS样式 #star-five { margin: 50px 0; position: relative; [...]

2014年05月30日

纯CSS实现立体文字效果

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:49 上午

通常情况下,要想实现立体字效果,我们最先想到的肯定是通过PS做成图片,现在我们来看看直接通过CSS实现立体文字的效果。主要是利用text-shadow特性实现效果。 html的全局设置: body{ background-color: #111; } @import url(http://fonts.googleapis.com/css?family=Dosis:500,800); .text { [...]