HTML-CSS学成在线案例 | pink老师讲解思路 | 完整源代码

目录

学成在线案例

1.学成在线案例准备工作

2.CSS属性书写顺序

3.页面布局整体思路

 4.确定版心

5.学成在线-header区域制作

6.Banner模块

7.精品推荐小模块

8.精品推荐大模块

9.底部模块

10.完整源代码 

index.html

style.css

学成在线案例

效果图：

1.学成在线案例准备工作

采取结构和样式相分离思想：

1. 新建images文件夹，用于保存图片；
2. 新建首页文件index.html；
3. 新建style.css样式文件。我们本次采用外链样式表；

2.CSS属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)；
2. 自身属性：width/height/margin/padding/border/background;
3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
4. 其他属性（CSS3）: content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradienr...;

3.页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

1. 必须确定页面的版心（可视区），我们测量可得知；
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则；
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；
4. 制作HTML结构，现有街都，后样式原则。结构永远最重要；
5. 所以，先理清楚布局结构，再写代码尤为重要；

 4.确定版心

这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w{

width:1200px;

margin:auto;

}

5.学成在线-header区域制作

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

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法；

1. li+a语义更清晰，一看这就是有条理的列表型内容；
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名；

注意：

1. 让导航栏一行显示，给li加浮动，应为li是块级元素，需要一行显示；
2. 这个nav导航栏可以不给宽度，将来可以继续添加其余文字；
3. 因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度；

search搜索框：

一个search大盒子里面包含2个表单

6.Banner模块

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