Day5课程-1_未删减原版 课程介绍、准备工作、思路

Day5课程 “学成在线”网页制作-1

准备工作、思路

一、准备工作

（一）项目目录

网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。
○ study
   ● images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
   ● uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
   ● css 文件夹：存放 CSS 文件（link 标签引入）
      ◇ base.css：基础公共样式，例如：清除默认样式、设置网页基本样式
            base.css文件 直接引用已有的即可
      ◇ index.css：首页 CSS 样式
   ● index.html：首页 HTML 文件

（二）默认样式代码

接着在HTML文件里引入CSS文件
先引入清除默认样式的base.css，再才引入index.css。即：

    <title>学成在线</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">

一定要注意这个书写顺序：要保证先在base里面清除了默认样式，再从index里设置具体的样式，用index里的覆盖base里的。若顺序反了，会导致页面出现问题。

基础公共样式

1. 清除默认样式，例如内边距、外边距、项目符号等等
2. 设置通用样式，例如：文字样式

/* 1. 清除默认样式 */
/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去除列表默认样式 */
li {
list-style: none;
}

/* 2. 通用样式 */
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 14px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
sans-serif;
color: #333;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}

二、网页制作思路

1. 布局思路：先整体再局部，从外到内，从上到下，从左到右
2. CSS实现思路
   i. 画盒子，调整盒子范围 → 宽高背景色
   ii.调整盒子位置 → flex布局、内外边距
   iii.控制图片、文字内容样式

三、制作网页 - header 区域

（一）布局
○ 通栏：宽度与浏览器窗口相同的盒子
○ 标签结构：通栏 > 版心 > logo + 导航 + 搜索 + 用户
   display: flex; ↑

（二）logo 制作技巧

○ logo功能：
   ● 单击跳转到首页
   ● 搜索引擎优化：提升网站百度搜索排名
○ 实现方法：
   ● 标签结构：h1 >a >网站名称（搜索关键词）
   ● CSS样式：

.logo a {
	display: block;
	width: 195px;
	height: 41px;
	background-image: url(../images/logo.png);
	/* 隐藏文字 */
	font-size: 0;
}

（三）导航制作技巧（nav）
○ 导航功能
   ● 单击跳转页面
○ 实现方法
   ● 标签结构：ul >li * 3 >a
   ● 优势：避免堆砌 a 标签，网站搜索排名降级
   ● 布局思路：
      li 设置 右侧 margin
      a 设置 左右 padding

active 类选择器，表示默认选中的 a

<!-- active 类选择器，表示默认选中的 a -->
<style>
	.nav li .active,
	.nav li a:hover {
 	   border-bottom: 2px solid #00a4ff;
	}
</style>
<!-- 导航 -->
<!-- 用 ul 避免堆砌 a 标签 -->
   <div class="nav">
        <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
   </div>

对于给选中的标签添加属性值为active的class属性的必要性
弹幕区：
—— 后面js经常要清除其他active类，然后给当前标签添加active类！！！

（四）搜索区域（search）
○ 实现方法：
   ● 标签结构：.search > input + a / button
      display: flex; ↑
   ● 布局思路
      div.search 标签 flex 布局，侧轴居中（垂直居中）
      input 标签 flex: 1

（五）用户区域（user）

实现方法：
   ● 标签结构：.user > a >imag + span
   ● 布局技巧：图片、文字垂直方向居中
      img { vertical-align: middle;}