摘要：
一．分离 CSS本节课，我们将要创建一个新的页面：旅游资讯。那么，现在需要解决的问题是，如果把首页重复的部分移植到新的页面而减少冗余。最恰当的方法就是：将 CSS部分中重复的部分分离出来，单独创建一个 CSS，以便后续的页面重复调用。而首页的 HTML 重复的部分，一般是通过动态网页... 阅读全文
摘要：
一．底部区域本节将探讨一下首页中最底部的区域。这部分区域由两个部分组成，一个是说明内容，有：合作伙伴、旅游 FAQ和联系方式，还有一个就是版权声明及各种手续证件编号。//底部区域父元素 ...//底部父元素 CSS #tour { height: 1150px;}#... 阅读全文
摘要：
一．热门旅游区本节将探讨一下首页最核心的部分，旅游区。这块内容由两个部分组成，一个是大标题，表示热门旅游区域。其次就是旅游项目的图片展示区域。具体如下：//热门旅游区父元素 ...//旅游父元素#tour { width: 1263px; height: 1200p... 阅读全文
摘要：
一．搜索区本节接着 header 头部往下，来设计一块搜索区。这个区域，可以是广告大图，也可以是用户注册，也可以是一个搜索条，都是一个大幅背景，内嵌一个表单。具体造型如下： 从表面上来分析，就是插入一张背景大图，然后居中一个搜索条。但是，我们要求最小在 1280 分辨率、最大在 1... 阅读全文
摘要：
一．大纲算法在 HTML5 中有一个很重要的概念，叫做 HTML5 大纲算法(HTML5 Outliner)，它的用途是为用户提供一份页面的信息结构目录。比如我们经常使用的手册就是一个非常好的大纲结构： 合理的使用 HTML5 元素标签，可以生成一个非常清晰的文档大纲，我们可以通过... 阅读全文
摘要：
一．准备工作1.为了达到最低效果，第一个项目将采用 1440 x 900 的分辨率录制；因为，1024 根本无法容纳最低宽度的页面；页面采用 1280 的最低宽度设计，去掉滚动条为 1263 像素。2.第一个项目是 PC 端的固定布局，会采用像素(px)单位。3.项目素材图片，是课外... 阅读全文
摘要：
一．新版本新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现了统一。首先，设置伸缩盒的 display 有如下两个属性值： 属性值 说明 fle... 阅读全文
摘要：
一．混合过渡版混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是针对 IE10 浏览器实现的伸缩布局效果，其功能和旧版本的属性大同小异。我们还是采用上一节课的文件，然后使用混合过渡代码，实现 IE10 的伸缩布局。首先，设置伸缩盒的 display 有如下两个属性... 阅读全文
摘要：
一．定位布局在使用定位布局前，我们先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。 属性 说明 static 默认值，无定位。 absolute 绝对定位，使用 top、right、bottom、left进行位移。 re... 阅读全文
摘要：
一．布局简介CSS3 提供一种崭新的布局方式：Flexbox 布局，即弹性伸缩布局模型(FlexibleBox)。用来提供一个更加有效的方式实现响应式布局。但是用于这个布局方式还处于 W3C 的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。在发展中，可能还有... 阅读全文