15综合案例之学成在线主页设计

1.确定版心

这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：
```
.w {width: 1200px;height: auto;
}
```

2.头部制作

1号是版心盒子header1200*42的盒子，水平居中对齐，上下给一个margin值；
版心盒子里面包含2号盒子logo；
版心盒子里面包含3号盒子nav导航栏；
- 实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
  - li+a语义更清晰，一看就是有条理的列表型内容；
  - 如果直接使用a，搜索引擎容易辨识为有堆砌关键字嫌疑(故意堆砌关键字，容易被搜索引擎有降权的风险)，从而影响网站的排名。
版心盒子里面包含4号盒子search搜索框；
版心盒子里面包含5号盒子user个人信息；
注意：要求里面的4个盒子必须是浮动的！

2.1 logo区域设计

使用PS中的Cutterman工具对学成网首页.psd文件进行切图，提取出logo.png图片。

2.2 导航栏nav的设计

实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
这个nav导航栏可以不给宽度，将来可以继续添加其余文字；
因为导航栏中的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。

2.3 搜索search模块

search搜索框：一个search大盒子，里面包含2个表单。

2.4 用户user模块

3.banner制作

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

3.1 subnav侧导航栏

实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
a里面再加入一个span标签，然后再输入>后右浮动；

3.2 course模块

course模块是一个大盒子，里面再包含上下放置的两个小盒子。

4.精品推荐模块

大盒子水平居中goods精品，注意此处有个盒子阴影；
1号盒子是标题h3左侧浮动；
2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右外边距(注意行内元素只给左右内外边距)；
3号盒子右浮动mod修改；

5.box核心内容模块

1号盒子为最大的盒子，box版心水平居中对齐；
2号盒子为上面部分box-hd，里面左侧标题h3左浮动，右侧链接a右浮动；
3号盒子为低下部分box-bd，里面是无序列表，有10个小li组成；
小li外边距的问题，这里有个小技巧是：给box-hd宽度为1215就可以一行装5个li。

6.footer底部模块

1号盒子是通栏大盒子，底部footer给高度，底色是白色；
2号盒子版心水平居中；
3号盒子版权copyright左对齐；
4号盒子链接组links右对齐；

7.资料下载

本节完整代码，欢迎star,follow,fork…

15综合案例之学成在线主页设计相关推荐

综合案例之学成在线首页
综合案例之学成在线首页 1 准备素材和工具 2 案例准备工作 3 CSS属性书写属性 4 页面布局整体思路 5 确定版心 6 头部制作 7 banner制作 8 精品推荐小模块 9 精品推荐大模块 1 ...
使用html和css进行红米案例、学成在线开发
目录红米个人案例学成在线案例红米个人案例 HTML5的学习及练习红米个人案例 <!DOCTYPE html> <html lang="en"> &l ...
网页制作流程--（项目案例）学成在线
一.根目录目标:能根据项目需求创建根目录根目录:网站的第一级文件夹 1.图片文件夹:images 2.样式文件夹 3.首页:index.html 二.布局流程目标: 掌握网页布局基本步骤从外到 ...
学成在线页面设计案例
html结构 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
ccss案例：学成在线网站，浮动和定位的运用
效果图 . . . . css * {margin: 0;padding: 0; } li {list-style: none; } a {text-decoration: none; } .w {w ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
9.----------------------------------------------------------------------------------------【学成在线案例】
文章目录 [学成在线案例]前端小抄(9) 一.准备素材和工具二.案例准备工作三.CSS属性书写顺序四.页面布局分析五.确定版心六.头部制作七.banner 制作八.精品推荐小模块九.精 ...

15综合案例之学成在线主页设计

1.确定版心

2.头部制作

2.1 logo区域设计

2.2 导航栏nav的设计

2.3 搜索search模块

2.4 用户user模块

3.banner制作

3.1 subnav侧导航栏

3.2 course模块

4.精品推荐模块

5.box核心内容模块

6.footer底部模块

7.资料下载

15综合案例之学成在线主页设计相关推荐

最新文章

热门文章