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的宽度问题仍然需要继续深究,同时要注意命名合理……否则白用功只是在伤害自己。

Web之路笔记之四的更多相关文章

  1. Web之路笔记之三 - 使用Floating实现双栏样式

    2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...

  2. Web之路笔记之二 - CSS Positioning

    CSS中控制各个Block element的位置方式之一,tag为position,有4种属性. 1. static 一般网页默认的属性,表示element根据页面正常流(normal flow)进行 ...

  3. Web之路笔记之一

    简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含 ...

  4. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  5. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  6. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  9. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

随机推荐

  1. 初探Spring Batch

    此系列博客皆为学习Spring Batch时的一些笔记: 为什么我们需要批处理? 我们不会总是想要立即得到需要的信息,批处理允许我们在请求处理之前就一个既定的流程开始搜集信息:比如说一个银行对账单,我 ...

  2. bitnami redmine每日自动备份

    主要思路:在半夜时停止服务,进行完整备份,然后再开启服务. 1.主脚本backup.bat: call backup-stopserver.batping /n 20 127.1 >nul ca ...

  3. 《机器学习实战》学习笔记一K邻近算法

     一. K邻近算法思想:存在一个样本数据集合,称为训练样本集,并且每个数据都存在标签,即我们知道样本集中每一数据(这里的数据是一组数据,可以是n维向量)与所属分类的对应关系.输入没有标签的新数据后,将 ...

  4. java编程实现日历

    package com.beiwo.other;/* * 需求:输入一个年份和月份 ,显示当前月日情况 ,星期数要对应准确 * 1.1900年1月1号开始 * 2.星期 : 直接用总天数对7求余数 3 ...

  5. Lucene中几种常用的Query

    看完图之后在来详细说明一下. 1.phrasequery是用来查询短语的.注意他只针对英文,对中文并没有什么用处. 核心用法: @Test public void test02(){ //新建查询 P ...

  6. SpringMVC框架下的异常处理

    在eclipse的javaEE环境下:导包.... 1. 在 @ExceptionHandler 方法的入参中可以加入 Exception 类型的参数, 该参数即对应发生的异常对象 2. @Excep ...

  7. C#数组

    数组是一种数据结构,它包含若干相同类型的变量.数组是使用类型声明的: type[] arrayName; 下面的示例创建一维.多维和交错数组: class TestArraysClass { stat ...

  8. Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  9. Mysql Specified key was too long; max key length is 767 bytes

    今天导入一个数据库时,看到以下报错信息: Specified key was too bytes 直译就是索引键太长,最大为767字节. 查看sql库表文件,发现有一列定义如下: 列   名:cont ...

  10. Xcode及obj-c的基础知识

    1, 从简单的例程来看基本语法: 下面的代码是通过OSX-Application-Command Line Tool生成的: #import <Foundation/Foundation.h&g ...