学成在线网页制作思路

一、准备目录

1.1目录介绍

code：代码

css：样式（包括清楚默认样式和设置样式等文件）

images：固定图片

uploads：待上传的图片

1.2清楚默认样式

/* 基础公共样式：清除默认样式 + 设置通用样式 */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

li {

  list-style: none;

}

body {

  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

  color: #333;

}

a {

  color: #333;

  text-decoration: none;

}

二、版心居中

.类名{

margin: 0 auto;

}

需要用到版心居中的模块直接调用该类

 三、制作思路

3.1布局思路

先整体再局部，从外到内，从上到下，从左到右

3.2css实现思路 

1.画盒子，调整盒子范围（宽高背景色）

2.调整盒子位置（flex布局、内外边距）

3.控制图片、文字样式

四、header区域

4.1布局

设置定宽高位置

通栏：宽度与浏览器窗口一致，不写该元素宽度即可实现

标签结构：通栏>版心>logo1>导航>搜素>用户 

4.2logo制作

超链接

搜索引擎优化：提升网站百度搜索排名

标签结构：h1>a>网站名称（搜索关键字）

css样式：搜索关键字不显示把字体设置成0

4.3导航制作

超链接

标签结构：ul>li*3>a

优点：避免堆砌a标签，网站搜索排名降级

布局思路

li设置右侧margin

a设置左右padding

设置默认选中，给该超链接加个类单独设置

4.4搜索栏制作

标签结构：.search>input+a/botton

  /* 去掉表单控件的焦点框 */

  outline: none;

/* 设置input里的文字样式 */

.search input::placeholder{

  font-size: 14px;

  color: #999;

}

父级flex后子级变成弹性盒子，宽高生效

4.5用户区域

.user>a>img>span

  /* 行内块和行内元素垂直方向居中 */

vertical-align: middle;

五、banner区域

5.1布局

通栏>版心>.left+.rigth

5.2左侧导航

标签结构：.left>ul>li*9>a

布局思路：a默认状态：背景图有白色右箭头

5.3右侧课程表

标签结构：.right>h3>.content

六、精品推荐导航

6.1布局

标签结构：.recommend>h3>ul>a.modify

七、精品推荐

7.1布局

标签结构：.course>.hd>.bd

7.2