外贸购物网站设计的时候风格比较多样,有的客户要求简洁型的,有的要求展示较多的内容,还有的要求综合考虑,而且不同类型的产品,风格也不尽相同,这时候就必须结合产品自身还有客户的要求综合考虑,以达到理想的效果! 此次的这个购物网站产品以鞋子和衣服为主,应客户要求采用了比较简洁的风格 头部: 包含了购物站常有的登录、注册链接,产品搜索版块以及购物车,其中应客户要求还有货币切换这一功能! 中间是一个大的banner展示图切换,用以展示最新闻热产品广告图和最新产品促销广告图! 广告图下方是文字介绍信息,介绍产品和公司相关的情况,其中可以在里面插入一些和产品相关的关键词,对google 优化也是有好处的 文字下方的产品展示应客户要求图片展示的比较小,但是产品的展示数量比较多,避免了页面过长的情况出现! 底部有一个导航的位置,方便客户在滑动到底部以后也能快速浏览其他想要浏览的信息,还有就是版权信息和一个自由编辑内容的版块,可以是google优化的关键词,也可以是其他信息,最终是要对网站优化有好处!
2015年04月30日
CSS3 Auto值的Transition Bug解决方案
在一个外贸购物网站的制作过程中,遇到了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日
最新上线的木门外贸企业站
外贸企业站是我们公司经常会做的,而木制品类的,以前也做过木地板类、厨柜板材类的外贸企业站,企业站多数是以展示型为主,有的客户要求首页比较简洁的,有的客户则要求首页能展示比较多的公司、产品信息,这个都是根据不同的客户需要来制作的。 我们通常做的网站布局都是以上中下结构为主,左右结构的虽然也有,但是比较少,这个客户就是要求左右布局的,对我来说也算是一个新的尝试,因为客户的产品主打绿色、环保,所以最初设计的时候是能深绿色为主的。左侧是网站的LOGO、导航信息,右侧有关于我们和产品模块,考虑到后期客户可能会有google seo 需求,所以还有一个新闻版块。 初期效果图: 后期经过和客户的进一步沟通,首页主色和版块都进行了调整,效果: 页面以深灰色为主,以一个大的图片作为背景,总体以简洁为主。 如果你也有外贸企业网站建设、google优化方面的需求,欢迎和我们联系!
2015年02月27日
三步教您如何在网站中加入Find us on Facebook按钮
“Find us on Facebook”按钮可以促进一个Facebook页面可能保持与朋友和客户的关系更密切。 通过添加“Find us on Facebook”按钮,你会吸引更多的粉丝,让公司产品和服务等得到更好的推广,或者至少得到关注。 如何添加Facebook的按钮呢?三步教您如何在网站中加入Find us [...]
如何给select标签的option内容加上超链接
select是下拉列表菜单,option是里面每个项目的值,给select标签的option内容加上超链接,也就是当选择某个option内容的内容时,能跳转到该页面,如何给select标签的option内容加上超链接?这是有多种方法可以实现了,我只介绍一种最简单,方便的方法,直接根据onchange属性使之跳转。 <select> <option value=””>— Primary Nav —</option> <option value=” ” [...]
2014年11月20日
自适应网页设计优势
随着智能移动设备的普及,以及3G、4G网张越来越多的覆盖,越来越多的人习惯在手机或者平板上浏览网页,传统的在PC上能正常浏览的网页,在手机或平板上要么显示不完整,要么显示的内容乱糟糟的,客户浏览体验非常差,这时候通常的解决办法是为不同的移动设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做当然可以保证浏览效果,但是比较麻烦,同时要维护多个版本! 不想这么麻烦,当然可以,自适应网页设计就可以解决这个问题,就是可以自动识别屏幕宽度、并做出相应调整,保证在各个设备下我们都能看到正常的网页,保证客户浏览体验! 下面以Onepound外贸建站官网为例来看一下: 正常情况下浏览 屏幕变小,示做自适应处理前: 很明显我们发现出现了横向滚动条! 下面我们来看看做了自适应处理以后的效果: 很明显,只是版块之间的间距变小了,但是内容都显示出来了,没有滚动条 [...]
2014年11月18日
国外鞋类购物网站网页设计
这个国外鞋类购物网站整体我采用了天蓝色为主,和白色背景搭配,使得整个页面简洁,干净,部分图标颜色采用的淡绿色,整体又会给人一种清新,自然的感觉,使之不会过于单调。banner部分和产品图片部分都采用了浅灰色背景,增加了页面的层次感。产品类别的图片我用的是五边形,而不是普通的四边形,也使得页面比较立体,突出。页脚分为两部分,用了比较醒目的蓝色和天蓝色。内页我还是用的传统的左右结构,左侧产品类别,右侧产品列表,或是产品详情等。 这个国外鞋类购物网站也是我做的第一个响应式设计,兼容手机,平板,在做的过程中也花费了比较多的时间。 如果您有相关的网站需求,请与我们联系。
2014年10月14日
箱包皮具企业网站设计
这是个主要经营箱包皮具类的单语企业网站网站,由于主要经营皮具类产品,客户要求网站整体以黑色和棕色(下图会展示)为主,以及要求网站有个VIP产品栏目,主要用于放置一些新款产品,会由客户发用户名和密码给那些特殊客户,然后客户登陆进来,便可以看到VIP Products里面的产品,所以我在网站头部做了用户登陆通道。客户的产品图片大多是白色背景,为了比较有层次感,整站我采用了浅灰色背景,结构与普通的企业网站结构大体相同,头部,banner,最新产品,关于我们和新闻中心,最后是尾部,头尾主要以黑色为主,中间部分以棕色为主。内页主要分为左右两侧,左侧是产品类别和联系方式,右侧是该栏目的内容展示。 整个网站都比较干净简洁,没有太多的色彩,大部分都是用色块和细线条区分,客户对整体风格也比较满意。设计如下图: 如果您有类似网站方面的需求,请与我们联系!
2014年09月29日
中英文双语版外贸石材行业企业风站设计
石材类的网站,也是在和客户沟通过之后才去 google 了解了一下这个行业,由于以前没接触过个行业,所以在设计过程中也走了一些弯路,按照以前的思路做过两个版面,最过经过修改和客户沟通过过后,最终定下的版面属于简洁型! 最终的效果图: 由于是石材行业,所以最终采用了深灰色为主,有了少许的绿色做点缀,象征着这种材料的绿色、健康!企业网站主要还是以宣传为主,所以首页大部分分以文字为主,只在下面部分放了重点推荐的产品,考虑到后期的优化,所以首页设计有一个新闻版块,来经常更新信息。上面部分采用了左中右三部分的结构,左侧放了部分推荐的产品分类,中间主要是关于公司的一些信息,让客户访问这个网站能快速了解到这个公司信息,给客户形成初步印象! 整个网站比较简洁,与很多其他的企业网站的不同在于,首页展示了大量的文字信息,没有复杂的结构,所有内容一目了然,还是很好的! 中文版部分版面: 由于中、西文化的差异,所以中文版的网站采用了与英文完全不同的风格,比较符合中国浏览者的浏览习惯,中文版的相对来说比较大众化!
2014年09月24日
雕塑艺术双语企业网站设计
这个客户主要是做雕塑,壁饰,不锈钢摆件,木雕等等艺术品的。客户要求网站背景使用纯黑色,由于整个页面近乎于黑色,所以我在logo部分使用了亮色系绿色,来做点缀,避免整个页面过于单一。这个企业站从布局上来讲中规中矩,变化不多,色彩使用也比较单一。栏目部分都采用了不同层次的黑色背景来区分,内容部分采用灰白的细线条分隔,色彩跳跃比较小,信息也比较集中,这大致就是该雕塑艺术双语企业网站的首页设计。内页和普通的企业网站一样,分左右两侧展示,左侧是产品分类和联系方式,右侧是该栏目的内容展示。由于这个客户是以英文网站为主,所以设计的英文效果图。 下面是该雕塑艺术双语企业网站设计图 如有相关建站要求,请与我们联系。
2014年08月28日
国外地板网站设计
该客户主要是做轴木地板的,所以我整站的颜色采用了棕色,使用户能一进入网站就了解其公司主要是做轴木地板的。整个网站页面没有使用过多的设计元素,我在页头部分和页尾部分采用了通栏设计,并且用用亮度和饱和度较高的色彩做头尾部背景,这是整个网站色彩最浓烈和最醒目的区域,使得其在整个浅灰色背景中尤为突出,打破了灰色背景的沉闷。内容部分我都采用了1像素的边框和白色分隔开,不仅更吸引人,并且给整个设计增加了质感。子页还是采用的传统的左右两栏,左侧是产品类别,右部分放内容。整个网站布局比较中规中矩,没有什么特殊变化,整体风格也比较简单。下面是该地板网站的设计图: 如果你有外贸企业网站建站需求,欢迎随时联系我们 QQ客服:415682727 电话:020-39907297
2014年07月28日
化工行业外贸企业站设计
第一次接触化工行业,虽然是企业站,但还是花了不少时间去浏览了很多相关行业的网站,再结合外贸企业网站的特点和国外浏览者的习惯设计出了首页效果图,和客户的交流和沟通还是非常顺利的,网站首页也没做什么改动就通过了,然后就是内页了,首页确定了,内页相对来说就简单了许多。网站整体来说结构比较简单,因为属于化工行业,受制于LOGO的颜色已经确定,所以网站首页的配色相对活跃一些,而内页则单调一些,和客户的合作还是相当愉快的! 效果图: 在此非常感谢网站制作过程中积极配合的ROBIN。 如果你有外贸企业网站建站需求,欢迎随时联系我们 QQ客服:415682727 电话:020-39907297
2014年06月30日
外贸陶瓷企业网站设计制作
陶瓷类的外贸网站,第一次接触到这到行业,如果是购物网站兴许还好下手一些,但是企业站就需要点儿时间了,好在客户自己的要求比较清晰,刚开始沟通就发过来一网站要求参考,别的也没多说,然后就根据参考站然后再结合自己的思路出了首页效果图,客户看过之后觉得还是参考站的结构比较好,所以结构上就以她发来的网站做参考了,但是版块在实际操作时还是有区别,因为所属行来和产品不同,所以也做了部分调整,这样反复修改了几次,首页总算是确定下来了,接下来就是内页了,原本首页确定以后内页相对来说是十分简单的,但是应客户要求,很多内页的版面都需要重新设计,而且页面比较我,所以在设计的过程中花了不少的时间。最后经过与客户的多次沟通,内页也都确定下来了。总体来说整个制作过程还是相对愉快的,客户是一个比较细心的人,所有的要求都讲得很清楚,所以也让我少走了很多弯路,非常感谢! 第一次的效果图: 最终效果图: 更多网站案例可到onepound官网浏览!
2014年05月30日
外贸包包企业网站设计
第一次做包包类的外贸企业网站,刚拿到需求的时候以为是按照企业网站的风格来做,后来和客户沟通之后才清楚客户想要的效果。网站整体上是购物站的风格,但是不能下单购买,不用显示产品的价格,和多数的企业站还是有很大的区别的。这个客户的要求很明确,每个页面都有自己的要求,不过做之前都说得很清楚,所以做起来还是很顺利的! 效果图: 网站有购物网站有的产品筛选功能,首页还是以产品展示为主,通过选项卡把客户不同分类下的展品都在首页展现出来了!
2014年03月28日
外贸电子烟企业站设计
这个客户的要求比较明确,做之前就发过来一个参考网站,其他的要求也比较明确,连网站的主色调都想好了,所以做起来也就相对容易一些,效果图出来以后,又微调了两次,然后就开始继续往下面做了! 整个页面没什么复杂的东西,甚至连一个Banner切换都没有,看起来比较简单,但是该传递的信息都传递到了。 如果你有外贸企业网站建站需求,欢迎随时联系我们 QQ客服:415682727 电话:020-39907297
2014年01月26日
外贸球衣购物站设计
新上线的外贸足球球衣购物站,做这个站之前,客户已经明确告诉我了他的要求,所以做起来也相对简单一些。因为客户的要求有变,所以前后共做了黑色和蓝色两个版本。 黑色版本: 网站整体采用了黑色,因为主要产品是和足球相关的,所以两侧的空白处加上了背景图,当然也是和足球相关的。 产品分类的文字都采用了全大写的呈现方式 蓝色版本: 这也是网站最终采用的版本,这个版本以蓝色为主,结构方面没有什么变化,第一版颜色反差比较大,更有视觉冲击力,而第二版则相对柔和一些。两个版本都添加了背景颜色,使整站看起来不会显得很空。
2013年12月30日
CSS实现自动适应宽度的半透明二级导航菜单
最近的一个网站应客户要求需要二级菜单,而且二级菜单的背景色还是半透明,我们都知道如果一个层设置为半透明,那么这个层里面的内容也会半透明,如果要想内容正常,又与二级菜单产生冲突!经过多次测试,总算找到了一个完美的解决方案! 以下是最关键的CSS样式: white-space: nowrap; /*这个样式主要是让二级菜单的宽度根据宽度自适应*
新上线的外贸女装企业站
最近刚上线了一个外贸女装的展示型风站,网站以简洁的风格主,颜色选用客户已经定好的梅红色。由于客户要求简洁大气,最初的时候只做了刚好一屏的高度,但是客户看后觉得东西太少,就又在原来的基础上展示了一部分产品。 网站头部放的东西比较少,右侧加上了二维码 中间部分设计了一个比较大的图片轮换,图片切换不同于一般的简单切换,而是采用了多种不同的过渡效果自由变换,使得整个网站看起来更为活泼、时尚 底部有部分产品的展示,使得整个版面更为充实! 如果你有外贸企业网站建站需求,欢迎随时联系我们 QQ客服:415682727 电话:020-39907297 MSN:xueposter@gmail.com
2013年08月29日
z-index属性在IE7及以下版本中不兼容问题
在html制作和很多图片特效及菜单特效过程中,我们会经常用到z-index属性,但我们经常会遇到这种情况,在Firefox浏览器和Chrome浏览器下都是正常的,但是在360SE或是IE7下都不是我们想要的效果,多次碰到过这个问题,在不断修改的过程中发现引起不兼容的主要原因在于CSS中z-index这个属性存在不兼容的问题。 我们都知道z-index属性值越大,对应的div也会越靠上(即能遮住比其z-index值小的层)。但有时候z-index 设置了很高的值如:z-index:9999; 但是最后在 IE7中却达不到我们想要的效果,设置了z-index还是被遮盖了。这其实是IE7的渲染DOM的问题,当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。 解决方法:在父容器中也加上z-index值。同时z-index属性必须与position配合使用才会生效。 <div style=”position:relative;z-index:9;”> <div style=”position:absolute;z-index:11;”>要在最上层显示的内容,最上层显示的内容</div> [...]
2013年07月30日
Div+css几种清除浮动的有效方法
网站在制作html过程中会经常用到浮动float这个属性,但是浮动过后又发布得清除,否则会对周边的其他元素造成影响,当然清除浮动的方法也有很多,下面就看看几种常用且兼容性比较好的清除浮动的方法: 1、通过在需要清除浮动的标签后面添加 ,当然这个 标签也可换成其他别的,比如 等,不过用得多的还是 . 这种方法比较直接,但同时也增加了许多无效的标签,破坏了HTML代码的良好结构,同时对网站优化也没有好处。 2、通过父级元素浮动来清除浮动,即把浮动元素的父元素也设置浮动属性,float:left ,float:right,都是可以的 3、通过给父元素添加overflow:hidden属性,这个方法我觉得是最好的,方便好用,容易控制,而且又不用额外增加代码,我目前用的最多的就是这种方法。 [...]