Web之路笔记之四

2014秋季学期Web2.0课程作业

<Homework1 - Recipe>

给出内容的文本文档，根据要求编写html和css。基本上没有难点。

1. 需要添加标签栏名称前面的小图标，是使用head标签内的link属性进行调整，

<link rel="icon" type="image/gif" href="http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie_icon.gif" />

　最后得到的效果如下。

2. 文字的formatting：增大字符间间距使用letter-spacing。

<Homework2 - Movie Review>

曾经做过的作业，而且加上之前两个lab的经验，我以为自己应该不会花费太多时间，但是实际动手发现其实还有很多的细节问题我还是没搞懂。以下按照制作时候的顺序记录。

1. banner没有问题，设置div的背景图片并且横向重复。

2. 对照最终应该得到的效果，我首先想到的布局是这样的：

　　但是按照这个想法将中间黑色板块分成了general introduce的rightcol和左边三篇内容的leftcol，并且将rightcol向右浮动后，发现无论如何修改left的宽度（绝对值的px或比例的百分值），使用开发者工具看到的leftcol仍然和overall内容框的宽度是一样的。

　　又鼓捣了一阵……发现是一个低级错误……拼写错了……本来为了表示左边有多个column而标明为leftcols，什么叫做不必要的操心……总之现在这个问题解决了！

　　最主要的问题就是刚刚讲的了，说明了命名合理的重要性……另外，就是练习如何使用浮动标签对页面进行排版。大方向的边栏和内容栏，这次不是用昨天的边栏float，内容栏设置margin，而是将两个栏目都设置成float，内容栏往左，边栏往右。重要的一点是需要对两栏的宽度进行设置（此处内容栏550px，边栏250px），这样在设置内容栏的两个栏的时候就可以直接用百分数来表示宽度了，十分便利。可以知道，当父元素的宽度是一个绝对固定的值，那么可以直接使用百分数来设置子元素的宽度，而不用专门计算。

　　而内容栏的标题rating，现在的构造是这样的，整体div内放了一个img和文字，因为需要将高度固定在83px，所以文字和图片就不在一个水平线上，要求提示到使用vertical alignment，查过css手册之后，这是指vertical-align属性，基本上有baseline、top、bottom、sub、super、text-top、text-bottom、middle，也可以用数字、百分值来表示。需要解释的有：

　　top / bottom：和同一行中最高/最低的element对齐。

　　text-top / text-bottom：和父元素中最高/最低的font对齐，因为有text嘛。

　　middle：放在父元素的竖直方向的正中间。

　　sub / super：是文字的下表/上标位置。

　　这里我直接把图片设置成text-top，如果给文字添加span标签，文字就会跑出rating框，而且图片和文字之间的间隔也没有减少。所以对图片设置text-top，并且把margin设置为-20px，看起来更加靠近最终结果。

3. 在使用position:fixed的时候，需要包括x,y两个坐标。因为fixed和absolute已经从页面正常流中删除，没有一个相对确定的坐标原点，所以需要两个坐标。

总结：看来关于float进行排版和div的宽度问题仍然需要继续深究，同时要注意命名合理……否则白用功只是在伤害自己。