同行们，力求通俗易懂幽默风趣。这一章不仅教大家网页排版的基础知识，还以百度艺术百科的网页为例，带大家简单做一遍，学得会更快，来收!

　　希望乃们接受我这种循序渐进的过程。做算术题你会知道“乘法”和“设未知数”来得更快，但是也得从简单“加减法”过渡。如果有疑问请留言或私信，下篇会着重讲。

　　其实程序员是一帮蛮会偷懒的家伙你信么?^_^ 在码字过程中，如果遇到常用的一段代码，就会想办法打包起来，需要的时候一行代码或几行代码就可以调出来用而不用重复写，系不系很机智。让我想起来我们常用的那些PS动作们，不就是同样的原理吗?

　　(偶的dw过期啦，临时换了一个。其实也没多大区别啦，是吧?这是以前一个同事介绍的Webstorm，现在他又不知道换了啥。-_- …乃们继续用DW敲吧，我会随时用回DW的，头部那些东西不要为了和我的一样而乱改哈。)

　　像这种直接放在div标签内里的样式称为嵌入样式。只服务于它嵌入的那个标签，而对其他标签的样式不会产生影响。

　　但是，每个div都要写辣么长，明明有些属性大家都一样的，还要重复写好烦啊……所以接下来介绍一下简便的写法。

　　下面这个你们还记得吧?我虽然读书少，但我还记得，哈哈……提取公因式的原理即使把a、c共同拥有的公因式b提取出来……所得结果一样。

　　同样方法把前面代码中里共同拥有的一句提取出来得到：:100px; :100px; float:left; 不同的样式保留。

　　则最后中就只剩下了颜色值,是不是很短了?而且大部分时间是不用每个div都附上颜色的，我们今天只是拿带颜色的矩形来模拟一下，所以真正应用时仅存的颜色那一句都会被删掉。

　　class直译为级、阶级、种类等，也就是相同的东西归为一类放在一起;我们把提取出来的公共样式放在class里，在头部(即head标签内)新建一个盒子(标签)，装入盒子，如下：

　　注：1)其写法不变，依然是”属性名:属性值;”,但是外包装从:” ” 换成了 class{ }; 由于脱离出来的class没有盒子可装，所以html出现了这个专门装样式类的标签盒子。

　　2)请注意：class前面还有一个小点 “ . ”。这个点是class的唯一标识，浏览器读取到“.className”，才知道这个东西是类名。否则你就是个单词而已，再读下去就是一些括号，单词，浏览器就懵了，说好的点呢?怎么不按套路出牌。

　　初学时类名可以随意一点，你写成 .a、.b、.apple、xiaoming1……都没事，小写就行了，但不能是中文及以数字开头，也尽量不要与标签名一样。后面会专门讲到命名这一块。

　　公共样式提出来了，也用盒子装好了，但是他们之间还没有搭上关系，这就需要在div内引用一下写好的类：

　　所有你想用的div都可以引用那个类，引用的方式是在开始标签后面加上：class=”className”(这里是不需要有“.”的，但注意不要写错哦)。保存刷新一下：

　　是不是和前面那种写法得到的效果一样?像这种头部标签中能够被其他标签通过类名来引用的样式，称为：内联样式。

　　它的作用域就大些了，但是也仅限于当前html文件中，只要引用了便能对引用的标签样式产生影响，可复用的。常规做法有时候会加上一句“type=text/css”即为：，但是我一般会省略，发现也木有啥影响，加了应该是比较规范吧。

　　写到这里发现样式真的好多要讲的啊，下篇专门讲吧，今天先讲一点……

　　这个是相对比较传统的排版方式，虽然中规中矩，形式却蛮多的。文字、图片、标签、视频播放……比较适合排版练习。

　　web端网页最大的优势在于，设计稿什么样，开发就能做成什么样，因为不用像移动端考虑那么多适配问题(想想以前的写手机端黑历史，托腮仰天，老泪纵横……T_T)。我给周围转web前端的朋友的建议都是，先把PC的布局搞定再去写移动设备端的会轻松一点。

　　拿到设计需求就立马打开PS做东西的事情，反正我是不干的，一般会事倍功半。同样，拿到网页设计稿也请不要立马开始码字，我们需要审题。

　　告诉我你看上面那张图片看到了几块吧?以前画素描的时候，老师是不是告诉过你要眯着眼睛看光影关系，因为人容易被一些细节所影响，所以先铺大面，再抠细节，一张合格的素描才能被很好的完成。同样，一个网页，无论内容再多，分布也是从大到小慢慢抠出来的。

　　首先，头部的tab和下方为一块，分好之后下面的分成两块，再然后……

　　其实前端工程师差不多是这样的思路，从上到下，从左到右写。有的会把其中一个部分写好再去写下一个，有的会一次性写几个大块，后面再补。要不是特殊原因，你的设计稿要是不对齐,你就等着他来质问你吧，或者他默认就给你写对齐了。

　　好，现在的结构已经不是单独的平行结构了。第一个div有了自己的孩子(注意换行缩格，这样层级关系较明显一些)即装文字的五个div(也可用其他标签装，例如：a、p、span……)。为什么称之为孩子，因为在html中有子标签及父标签一说。有时候子标签会继承父标签的样式，但大多是标签所含的内容，而不是标签本身，即如果给“title_tab”添加针对文本的样式，那么子标签内的文本也即将改变，除非子标签拥有自己的 针对文本的样式，然而不是所有时候都能成功继承(诶……越讲越多)。

　　1)样式提供多种书写方式，不仅仅只有.className,可以带标签名 p{}、div{}……带标签名则不用前面加点，不过是针对当前html文件中所有p标签和div标签，所以你知道我为什么说类名尽量不要使用跟标签名一样的了吧?要是忘记写点了，那画面，简直不敢想象。像文中“ *{ } ”的*号则代表所有，margin是间距属性，每个浏览器的默认里面，margin是有值的，所以需要进行一些设置。如下图：

　　当有四个值时(例：padding：1px 5px 3px 6px;),则分别针对 ：上 右 下 左 ，即顺时针方向的值，注意，不是上下左右哦。

　　好了，今天就讲到这里了，你们看我写的代码都有点不一样，就说明不是一天写的啦，时间真是不够用呢。下篇补充样式内容，接着排版。

　　网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

　　随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...

　　每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...

　　今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...

　　你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...

　　响应式网页是一种对于设计的全新思维模式，响应是双方的，是互动的过程，在这个过程中设计师要考虑设备的性能、Dom节点数量、屏幕的大小等。 1、如何理解响应式设计（RWD） 响应...

　　如果要深究近期网页设计趋势的变化，这些变化更多是关于用户模式，色彩和排版设计的。但是不论是其中哪种，都牵涉到一些微妙的设计技巧和复杂的影响因素，将它们纳入6月的设计...

　　在设计网页之前，最重要的是搞清楚这次设计的目的是什么。网页的设计，绝不只是为了好看。如果只是为了好看，可以直接上高清大图。网页的设计，也绝不只是一味的模仿，别人的...

　　几乎每个参与网站建设的人，都希望自己的网站能够在激烈的竞争中脱颖而出。设计师希望它效果拔群，成为自己作品集中令自己骄傲的存在；客户希望它广受欢迎，在用户和潜在用户...

　　Landy：大家都知道做网页设计有栅格，有纵向栅格也有横向栅格，栅格提供内容布局的规范，让信息组织更有条理，我们在栅格规范内做设计，上下左右、垂直居中对齐，横平竖直、方...