Blog

关于清除浮动的问题，在上一节中，我们已验证了两种方法，可以得知，各有弊端，下面将对后两种方法详细说明，个人感觉这两种更为主流。 第三种：在浮动容器的同级添加一个含清除标签clear的容器。这是我用了很久的方法。利用一对空标签并为其定义clear样式，我一般就用<div></div>，如下添加： <style><!-- .container {width:200px; height:auto; background:#FF0; padding:20px;} .left, .right {background:#FFF; border:1px solid #F00; height:100px; width:90px; font-family:"微软雅黑"; line-height:90px; text-align:center;} .left {float:left;} .right {float:right;} .clear {clear:both; height:0px; line-height:0px; font-size:0px; visibility:hidden;} --></style>…

美工这份工作看起来比较简单，但是要做好也不是那么容易。作为一个半路出家的我而言，这条路可谓走得曲折而艰辛。也许没有这么夸张了，只是觉得自己的每一步前行都刻骨铭心。相信与许多同行相比，我付出的并不足够，应该说这真的是一个积累的过程。项目做的多了，感触也就越来越多了，美工到底应该具备怎样的品质呢，在此为新手做个小小的总结： 1，基本功。即为基本，那就是要必备的。掌握(x)html代码和css运用，尽量做到可以手写代码，起码在需要的时候能够手到擒来，合理并高效地运用标签和样式。此外，需要了解各个浏览器的兼容性，能够迅速找到问题所在并及时解决。 2，前期规划。许多人一拿到效果图就开始埋头苦干，这样是不理智的，也许你布局的时候发现前面制好的切片不是自己想要的，那就要花时间重切一个了；而在元素划分和命名上也可能出现顾此失彼的状况。所以说，当接到效果图后不妨花几分钟时间做个“印象扫描”，思考下图片要怎么切，哪些元素是要共用的，该页面分为哪些块该用哪些标签，等等。规划好板块划分和标签运用，后面的工作就得心应手了。 3，高效率。顾名思义，就是在最短时间内最高质量得完成任务，做任何事情都要讲究效率的。对于切图这项工作，我认为它的好质量体现在用最少的标签、最少的样式实现效果图，因此一定要熟悉各种标签的用处，让它们各司其责，避免张冠李戴。其中，我们还需要兼顾seo和网站负载等问题，这也是个比较深奥的问题，值得探讨下。 4，好习惯。良好的习惯总是能让事情变得事半功倍，这是毋庸置疑的。那么对于美工，什么才叫好习惯呢？第一，添加代码注释，无论是X(HTML)还是CSS，有了明确的注释，会让项目组其他成员运用或维护起来更加方便快捷，另外也方便自己以后修改。第二，总结一套自己的命名规则，当然前提是要遵循命名规范，这个也是相当重要的。第三，有一套自己的通用样式，里面包含工作中常用的一些样式，比如重置（reset）样式，这样在每个项目开始的时候可以直接复制过来稍加修改就可以了，省时省力。第四，要善于总结收藏，当我们在浏览别人的网站时，看到好的效果要有心去看看源码，多加研究，以备自己不时之需。 5，学无止境。学得越多，会感觉缺乏得越多，这种体会会随着你的逐渐进步而愈发深刻，我现在就是这么一个阶段，感慨。做好本职工作是关键，有机会更要扩展边缘知识，比如对我而言，现在学习JS就迫在眉睫。在这个信息瞬变的时代 ，我们必须要补充自己，不说做到八面玲珑了，起码要能以一挡三，这样才能在职场或事业中立于不败之地。

说到网页浮动窗口，大家很容易就想到了一些低级网站里碍眼的对联广告和漂浮广告吧，那些广告一般不靠谱，明明鼠标点击关闭，却要弹出一个广告页面，确实讨厌。不过同样的技术，我们若换个目的和方式，就大受欢迎了。比如作为一个企业网站或购物商城的客服窗口，尤其是购物商城，添加一个浮动客服窗口就是很有必要的了。因为一般商城为了展示商品页面都会比较长，如果有这样一个相对视觉静止在网页中的客服窗口，对顾客来讲，方便之处可想而知。 所以说掌握这种浮动窗口代码的运用，还是很有必要的。网上也有很多这样的源代码下载，大家可以搜搜，今天我就在这分享一个简单易用的例子(也是最近完成项目中运用到的)： 以下是放在body标签里的代码（只要在body里，位置可以随便放，不过因为有js，所以我一般选择放在，body内容的最下面)—— <script> var w3c = (document.getElementById) ? true : false; var agt = navigator.userAgent.toLowerCase(); var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));…

随着html和css的迅速发展，网页元素实现阴影效果的方法已经非常灵活多样，不过今天还是针对新手介绍一种简单易懂的方法。 相对定位——相信大家都不陌生了，没错，我们就是利用元素位移，再加上其父级元素的背景色来实现阴影效果的。看代码： html： css： .container, .content, .content img {width:200px; height:200px;} .container {position:relative; background:#e5e5e5; z-index:1;} .content {position:absolute; background:#fff; z-index:1; left:-5px; top:-5px; border:1px solid #ccc;} 这样就实现了上面附图的效果，很容易理解吧~其中content部分，也可以是文字或其它内容。 当然，简单的方法实现的效果也是简单的，这里阴影只能是纯色的；不过，你也可以用PS做好的阴影效果作为背景图代替上面的背景色，来实现立体的阴影效果。