一半设计一半前端

在CSS第八课讲解了如何制作水平和纵向导航，然后拖到了第十八课才讲解下拉菜单，为什么呢？因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课，建议你出门左拐下两层楼，先看完相对定位和绝对定位再来学习下拉菜单吧。下拉菜单作为导航目录较多的网站的必备武器，的确可以...

从小我们学习物理，就知道一句话：“运动是相对的”。或者有人生阅历丰富的人以一种长者的口吻告诉你，“没有什么是绝对的”。那么，绝对定位是否可以说并不是真正的绝对呢。同上，先来看看W3C官方文档怎么说。设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始...

网页的元素默认有四种定位：static（静态文档流）、fixed（固定）、relative（相对）、absolute（绝对）。static就是文档中按照先后顺序正常出现的元素，也是默认的定位方式。比如标题、段落等等普通文档流元素。来自于W3C官方文档的引用：除非专门指定，否则所有框都在普通流中定位。...

固定布局非常有辨识度，那就是无论页面有多长，滚动条怎么滚动，固定的容器都相对于浏览器是静止的，脱离了整个文档流的限制，漂浮在高空中，纹丝不动。常见的固定布局有侧边栏和头部导航固定，“返回到顶部”，“分享”、弹出层等等。比如：赵老师网站前端博客的左边侧栏就是固定不动的。比如：网易的头部导航就是固定不动...

完全自适应的网站很少见，估计是难度有点大吧，或者说是在国内的环境下，精确布局能有更好的视觉和用户体验。所以，很多网站就退而求其次，头尾内容少的部分自适应浏览器，而中间主体内容比较多的还是采用固定宽度居中对齐的方式布局。就好像一个“工”字一样。典型的网站有：站酷查看案例一、百分比的width和min-...

现在互联网上90%的网站依然采用的是固定宽度布局，然后相对于浏览器居中显示。固定宽度布局需要非常精细化的计算容器的宽高，但是相对来说制作比自适应布局更简单，但维护成本高。腾讯、淘宝等首页都是典型的固定宽度+居中的布局。查看案例这个案例的实际意义不大，因为我们网页几乎都不会这样布局，这个案例的目的是拿...

很多人一提到布局，首先想到的是DIV+CSS，然后DIV+CSS布局的核心就是浮动，其实呢，我想说的是，浮动刚开始并不是拿来布局的，只是table布局out之后，浮动刚好可以实现这种效果，就拿来用了，效果还不错，但是浮动带来的破坏性也是非常大的。今天这篇文章就认真的谈一下浮动。一、浮动的W3C官方解...

每一个网站都应该有一个搜索表单，因为当网站内容太多的时候，依靠导航去翻找内容太困难了，所以翻页太累，不如直接搜索。现在的搜索表单的样式都几乎是扁平化设计，用图片的很少了。查看案例  案例下载完成普通的表单设计的难点在于如何控制输入框和按钮的高度对齐，以及去掉两个控件之间的间隔。因为inpu...

文章列表在网站上占据很大的面积，如何制作出美观的文章列表，以及如何在文章列表前面添加各种小图标，或者有数字的排行榜呢？要掌握这篇文章的内容，需要有背景定位的基础知识哦，如果还不会的童鞋，建议先学习第九课的内容。CSS第九课：利用background-position完成css sprite效果查看案...

刚才写了一大篇，结果网络出问题，没有保存上，气的吐血。最近DNS总是解析出问题，阿里云总说很好，没问题，害的我现在一点心情都没有了。重新写一篇文章的感受就是味同嚼蜡，好吧，不要把坏情绪扩散开来，影响到读这篇文章的童鞋们。进入正题吧。背景是网页非常重要的一个元素，背景颜色和背景图片的应用为网站增色不少...