html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...

学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)

成品截图

前期准备素材

一、项目页面PSD源文件

二、前期准备工作

三、CSS属性书写顺序

四、布局分析

五、布局流程

开始页面制作

头部制作

banner制作

左侧导航栏

课程表模块

源代码下载

成品截图

前期准备素材

一、项目页面PSD源文件

下载地址https://chuenst.lanzous.com/i7hlggnl6vc

二、前期准备工作

创建study目录文件夹 (用于存放这个页面的相关内容)

study目录内新建images文件夹 (用于保存图片)

新建index.html 首页html文件(网站首页统一规定为index.html)

新建style.css 样式文件(外链样式表)

将样式引入到我们HTML页面文件中

样式表写入 清除内外边距样式，来检测样式表是否引入成功

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

三、CSS属性书写顺序

布局定位属性：display / position / float / clear / visibility / overflow(建议 display 第一个写，

毕竟关系到模式)

自身属性：width / height / margin / padding / border / background

文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-

word

其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow /

background:linear-gradient …

四、布局分析

五、布局流程

必须确定页面的版心(可视区)

分析页面中的行模块，以及每个行模块中的列模块，一行行罗列而成

制作HTML结构。遵循，先有结构，后有样式的原则

然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

开始页面制作

头部制作

1号是版心盒子header 1200 * 100 的盒子水平居中对齐, 上下给一个margin值

.top{

width: 1200px;

height: 100px;

margin:0 auto ;

}

版心盒子 里面包含 2号盒子 logo

.top img{

float: left;

margin-top: 29px;

width: 195px;

height: 42px;

}

版心盒子 里面包含 3号盒子 nav导航栏

• 首页a>li>