前两天，收到一客户的反馈，他们公司的外贸网站的产品详细页面被撑开，许多产品页面出现了横向滚动条，看到这个问题时，我以为是因为没有对英文内容设置word-break:break-word 造成的，后来检查了一下，不存在这个问题。而且内容最外层的DIV也有固定的宽度，反复试了多次，才发现是因为只要有<Pre>标签，里面的内容都不能自动换行， 这时才想到可能是Pre标签的问题，因为平时对这个标签使用的并不多，所以这时才开始查了一下，原来被包围在 pre 元素中的文本通常会保留空格和换行符，但是，当你在<pre>标签里面写代码的时候，如果你没有手动换行，它是不会自动换行的，而是一直保持一行的状态。 找到了问题的根源，问题也就迎刃而解了，其实也很简单，只需在网站CSS文件里面给<Pre>定义一下样式即可！ CSS样式： pre { white-space: […]

网站建设过程中DIV等高布局，相信大多数人都有碰到过，本人也看过不少方法，有通过背景图片，实现假象的等高效果；也有通过js实现的，总之方法挺多的，但是如果用纯CSS实现呢，废话少说，直接上代码： html代码： <div id=”wrap”>   <div id=”samp1″>     <p>111</p>     […]

外贸网站面对的用户大多是欧美或者其他国家的网民，他们对网站设计风格和布局跟国内客户的要求不一样，可以说区别是很大的。因此我们在制作外贸英文网站的时候，就要认清外贸网站与国内网站的区别. 欧美风格的网站设计给人的第一印象就是简单、色彩单一、不艳，结构一定要严谨，导航要清晰。要突出的东西却都要表现出来，页面中的文字相对较小，多数首页的图片较文字多，文字和图片的混排也相对较少，浏览者可以很快找到自己想要寻找的信息。 欧美风格的网站图片处理很精致细腻，与区域的划分区块大小搭配很合理恰当，特别是首页的图片排列设计，非常细致巧妙、重点突出。同时网站上的图片的广告作用十分突出，为了突出宣传效果，往往都会使用大幅的图片，而且图片多以静态为主，很少有动的，像国内热衷的Flash就更少了，因此这些内容一般也都会摆放在页头或者中间这些醒目的位置。使用文字的位置摆放也很有讲究，一般文字与图片都是在分布在两个区块里，较少使用图文混排的方式，即使使用图文混排的方式，图片与文字的间隔也会大一些。这样会使图片和文字说明的内容分开，使文字说明的作用更突出。

我们都知道PS中圆角矩形很容易画出来，但是如果是圆角多边形呢，最近就遇到了这个难题，因为一个外贸网站的LOGO设计时需要圆角五边形，所以在实践中找到了一个不是特别快的方法，如果有更好的解决方法，欢迎留言指正！ 过程： 过程如下： 第一步：就不多数了，正五边形，大家都会的，圆角矩形也很容易； 第二步：将圆角矩形旋转144度，使得矩形的一边和五边形的一边平行，至于为什么是144度，是根据几何知识计算得来，正五边形的每个内角都是108度 第三步：将旋转后的矩形等级制一个 第四步：将复制的矩形旋转-18度，因为矩形的内角是90度，还差18度才能和五边形的内角保持一致； 第五步：合并两个矩形并移动至合适位置 第六步：删除矩形、多边形多余的部分，并依次复制另外四个，旋转一定的角度（72的倍数），并做轻微移动即可

网页设计时细节非常重要，大到Banner，小到一个按钮，细小的变化就可能给浏览者不一样的感觉，巧妙运用折角效果有时也可以为网站增色不少，如果快速实现这一效果呢，其实也很简单！ 最终效果： 把深色部分放到线色部分图层的下面就可实现上面的效果！