看我网站，了解Web前端

为什么设计师看代码像看天书？

天性可爱的射鸡师，

或风流倜傥，或集美貌与智慧于一身，

他（她）们往往对美敏感，

不论是用手中的神来之笔，

抑或Adobe系列软件里的画笔，

看到美好的事物，总能把美留下。

花朵，因他（她）们而绚烂；

世界，因他（她）们而精彩，

可,  可@%*#，可是……,无一例外的在代码面前，显得有点肌无力！当然，我这个半成品的设计师除外……，

结合我个人在网页设计和Web前端开发方面的经历来看，主要还是因为设计师大都是偏感性的动物，设计师觉得怎么好看就怎么构图或摆放，而操作代码的工程师作业却有一定规则，哪个东西放哪里，都得设置具体的位置，诸如宽(width)、高（height)、外边距（margin)等，有时候动一下这个元素还会影响其他元素的布局，所以

程序猿要更加理性一些，而设计师哪里受得了这拘束，不能率性而为，宁毋死。而且直接操作软件惯了，所见即所得，哪能想象英文字符和数字能有啥创造力，所以就造成了设计师看代码就像看天书一样的现象。程序猿往往惊叹设计师天花乱坠的想象力，而设计师也无法感受代码的力量。

事实上，很少有人能够在感性和理性两方面，都取得较高造诣。社会为了追求效率和品质，分工越来越细。毕竟都是需要精耕细作的技术活儿，最后只能专注于某一方面，所以很多公司的UX/UED团队，前端和设计的老大往往不是同一个人，大都被拆分的很细，甚至还分交互和视觉。反倒我这种非专业背景出身，经常因为不能单方面深入而在设计和前端之间游荡、徘徊的人，却悟得了在两者之间游刃有余的套路……

【一】、打开我的网站，在页面中右击，选择“审查元素”。

=============================================================

【二】、局部案例，了解结构以及规则。

=============================================================

知识点：

1、单击箭头可以折叠代码，单击后变成<div class="logoBar">...</div>,其子元素因折叠而以省略号存在。

   并且是闭合的,遮住class="logoBar",你就可以看到<div></div>,常见的如<p></p>、<a></a>都是闭合，

   可能程序猿大都比较孤独，内心渴望成双成对。当然不闭合的也有很多,如<img />、<link />,它们不是

   花花的图片就是可以链接资源的，不孤单、社交丰富，所以程序猿咒它们单着……

2、id和class都是选择器，取名后用来加样式的，页面的元素不止一个，要区别开来就得取名字。只不过

   id是唯一的，而class可以重用,它表示一个类别。在css样式中，id用“#”表示，class用“.”表示。

   如：#header{ height:55px;}   .logo{ width:240px;}      

   id的优先级比class高。举个栗子，你要选择逗比，左边的那堆中只有一个黑色。你只要叫一声“#black”

   就好了，但是右边光叫“.black”还不行，还得考虑其他条件，才能把逗比筛选出来。

   

3、class="logo fl"和class="search_Box fl"各表示有两个类样式，并且有一个共同的样式class="fl"；

   一个标签可以有多个样式，如<div class="aa bb cc dd ff">我是某某</div>；

   也可以是<div id="header" class="aa bb cc dd ff"></div>；

4、你想查看网页哪个元素的样式（style)，就在对应位置右击审查元素，这里查看的则是.search的样式，

   左侧是灰色块表示选中，右侧可以看到width:60px等样式。双击后你可以修改，样式就是这么调的哦！

   

5、.logoBar .serch_Box .search这一段表示选择的是.logoBar的子元素.serch_Box下面的子元素.search，

   相当于从你爷爷那找到你爸爸，然后再从你爸爸那找到你，跟你同辈的text算是你的兄弟；

  

6、main.css:14表示.search由main.css的第14行控制。

【三】、局部案例，了解样式及其具体参数。

=============================================================

知识点：

1、这个盒子占的宽高显示为160*70，但下面样式的宽高只有158*68，那多余的2像素是从哪里来的？

   这就涉及到了网页的盒子模型，160是等于盒子的（宽）+左右两边1像素的（边框）得来滴！事实上关于盒子

   模型的解析是存在

   

2、如箭头所示，每一个<li class="box">…</li>都对应一个完整的“盒子”；

3、这里的width和height均有横线穿过，表示有优先级更高的选择器同样给这个元素施加了相同的参数，只不

   过参数的值不一样，这里如果去掉.photo .tab_con ul li.box里的{width：158px; height:68px;},那么

   这些值就又会生效的，下划线也就没有了；

4、margin是外边距，方向是从“上-右-下-左”顺时针来滴，所以这里你看到右边和下边有间距，通常居中

   一个块级元素的话可以用margin：0 auto; 如果上下有一定外边距，那就如margin：10px auto 10px;

5、当你鼠标在页面上滑动时，指针呈手指形状，往往这里有a链接，如果没有的话，那就是给这里的标签设置

   了cursor：pointer，强制指针呈手指形状；a链接的写法是：

   <a href="这里加你想跳转的链接" title="解释说明文字" target="打开窗口的方式"></a>

未完待续

………

   

  我天，我发现写教程好费时间哦！

也不知道大家阅读起来咋样，其实这些知识点是不难的，

就是用文字写起来太多，

这次无需彻底弄懂，

看个大概就行

……