一半设计一半前端

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

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

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

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

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

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

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

一个网站，主导航的重要性不言而喻，美观、实用、交互、结构清晰都是要点。前面我们已经学习了超链接a的基本样式，普通超链接的样式主要是鼠标经过的时候改变文字颜色和下划线。而主导航的样式一般改变的是背景颜色或者背景图片。这两年流行扁平化设计，几乎都是纯色为主了。今天我们利用display:block这个关...

图片是网页元素中非常重要的内容，精美大气，排版合理的美图会为网站加分不少。图片一般有哪些常规的样式可以设置呢？首先明白图片是inline-block（内联块状）对象，就是图片可以并排在一起，可以内联，但是图片本身有宽高，又是一个块状对象。查看案例 下载案例一、为图片设置边框和去掉边框一张图...

今天早上，康晓玲同学拿着一个U盘在我面前晃了一晃，问道，老师，这是你的吗？我看着那个熟悉的U盘，不正是我朝思暮想，迷失了一天的U盘吗？失而复得的惊喜实在太大了，让我旋转、跳跃、闭上眼……在此，感谢康晓玲同学，你拯救了我32G的教学资料，我的命，咳咳……，又跑题了！回到正题，大家认为讲完了margin...