CSS第五天-学成在线

2022-07-26 22:19:43

1. 学成在线页面制作

目标

理解
- 能够说写单页面我们基本的流程
- 能说出常见的css初始化语句
- 能说出我们CSS属性书写顺序
应用
- 能利用ps切图
- 能引入外部样式表
- 能把psd文件转换为html页面

学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。

pink老师：

取义学有所成，为师之期望，君等成才者也，故曰学成网是也~~

1.1 前期准备素材

学成在线PSD源文件
开发工具 = PS（切图） + sublime（代码） + chrome（测试）

1.2 前期准备工作

欲先善其事，必先利其器。先把我们的前期准备工作做好，我们本次采取结构与样式相分离思想。

创建 study 目录文件夹 (用于存放我们这个页面的相关内容)
study目录内新建images 文件夹用于保存图片。
新建index.html 首页html 文件（以后我们的网站首页统一规定为index.html)
新建style.css 样式文件。我们本次采用外链样式表。
将样式引入到我们HTML页面文件中。
样式表写入清除内外边距样式，来检测样式表是否引入成功。

1.2 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 …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, ‘Helvetica Neue‘, Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

1.3 布局流程

为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：

1、必须确定页面的版心（可视区），我们测量可得知。

2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成

3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

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

1.4 页面制作

这个页面的版心是 1200像素每个版心都要水平居中对齐，所以，我们干脆把版心定义为：

.w {
    width: 1200px;
    margin: auto;
}

1) 头部制作

结构图如下：

1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
版心盒子里面包含 2号盒子 logo
版心盒子里面包含 3号盒子 nav导航栏
版心盒子里面包含 4号盒子 search搜索框
版心盒子里面包含 5号盒子 user个人信息
注意，要求里面的 4个盒子必须都浮动

结构图如下：

1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景。
2号盒子是版心，要水平居中对齐。
3号盒子版心内，左对齐 subnav侧导航栏。
4号盒子版心内，右对齐 course 课程。

3）课程表模块

结构图如下：

1号盒子是 228 * 300 的盒子右浮动注意浮动的元素不会有外边距塌陷的问题
1号盒子内分为上下两个子盒子
2号子盒子是上部分我们命名为 course-hd (hd 是 head 的简写头部的意思，我们经常用)
3号子盒子是下部分我们命名为 course-bd (bd 是 body 的简写主体的意思，我们经常用)

4）精品推荐小模块

结构图如下：

复习点： 因为里面三个盒子都要垂直居中，我们利用继承性，给最大的盒子一个垂直居中的代码就好了，还记得那些样式可以继承吗？？？ font- line- text- color
大盒子水平居中 goods 精品，注意此处有个盒子阴影
1号盒子是标题 H3 左侧浮动
2号盒子里面放链接左侧浮动 goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
3号盒子右浮动 mod 修改