web前端开发第七天课程

网页准备工作

项目文件夹名称（stady）

• images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等
• uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
• css文件夹：存放CSS文件（link标签引入）
  bace.css：基础公共样式，例如：清除默认样式、设置网页基础样式
  index.css：首页CSS样式
• index.html：首页HTML样式

版心效果

index.css里设置.wrapper{
margin：0 auto；
width：1200px；
}

网页制作思路

1. 布局思路：先整体在局部，从外到内，从上到下，从左到右
2. CSS实现思路

• 画盒子，调整盒子范围（宽高背景色）
• 调整盒子位置（flex布局、内外边距）
• 控制图片、文字内容样式

header区域

整体布局

通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏>版心>logo+导航+搜索+用户

logo制作技巧

logo功能：

• 单击跳转到首页
• 搜索引擎优化：提升网页百度搜索排名
  实现方法：
• 标签结构：h1>a>网页名称（搜索关键字）
• CSS样式：
  .logo a{
  display:block;
  width:150px;
  height:50px;
  background-image:url(…/images/logo.png );
  font-size: 0;
  }

导航制作技巧(nav)

导航功能：

• 单击跳转页面
  实现方法：
• 标签结构：ul>li*3>a
• 优势：避免堆砌a标签，网站搜索排名降级

搜索区域（search）

实现方法：

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

用户区域（user）

实现方法：

• 标签结构：.user>a>img+span

banner区域

布局

结构：通栏banner>.wrapper>.left+.right

左侧侧导航（left）

实现方法：

• 标签结构：.left>ul>li*9>a
• 布局思路
  a默认状态：背景图为白色箭头

右侧课程表（right）

实现方法：

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