学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)
成品截图
前期准备素材
一、项目页面PSD源文件
二、前期准备工作
三、CSS属性书写顺序
四、布局分析
五、布局流程
开始页面制作
头部制作
banner制作
左侧导航栏
课程表模块
源代码下载
成品截图
前期准备素材
一、项目页面PSD源文件
下载地址https://chuenst.lanzous/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>
更多推荐
html制作课程导航页面,学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)...
发布评论