学成在线案例

pink老师前端学习视频看到了P195，开始做学成在线案例，单独记一下这个案例的学习过程

2021.01.04 晚上 1h
2021.01.05 6h
2021.01.08 5h

0 学成在线案例

0.1 准备素材和工具

• 学成在线psd源文件
• 开发工具=PS（切图）/cutterman（插件）+vscode（代码）+chrome（调试）

0.2 案例准备工作

采取结构和样式相分离的思想（外部样式）：

1. 创建study目录文件夹（用于存放我们这个页面的相关内容）
2. 用vscode打开这个目录文件夹
3. study目录内新建images文件夹，用于保存图片
4. 新建首页文件夹index.html（以后网站首页统一规定为index.html）
5. 新建style.css样式文件，我们本次采用外链样式表
6. 将样式引入到我们的HTML页面文件中
7. 样式表写入清除内外边距的样式，检测样式表是否引入成功

0.3 CSS属性书写顺序

0.4 页面布局整体思路

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

1 头部制作

首先确定版心，版心1200px，每个版心都要水平居中，可以定义版心为公共类：

/* 确定版心 */
.w {
   
    width: 1200px; /* 版心宽度 */
    margin: auto; /* 版心是居中的 */
}

划分头部盒子：

<!-- header区域 -->
    <div class="header w">
        <!-- logo部分 -->  
        <!-- 导航栏部分 nav -->
        <!-- 搜索部分search -->
    </div>

.header {
   
    height: 42px;
    /* 此地方会层叠w */
    margin: 30px auto;
    /* background-color: pink; 实验此部分是否符合*/
}

1.1 logo区域制作

<!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>

.logo {
   
	float: left;
    width: 198px;
    height: 42px;
   /*  background-color: purple; 实验此部分是否符合*/
}

1.2 导航栏nav区域制作

导航栏注意点：

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

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

<!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>

给所有的li清除样式
li { list-style: none; }
给所有的a清除样式
a { text-decoration: none; }
给整个页面添加一个背景色
.body { background-color: #f3f5f7; }

.nav {
   
    float: left;
    margin-left: 60px;
}

 .nav ul li {
   
     float: left;
     margin: 0 15px;
 }
 .nav ul li a {
   
     display: block;
     height: 42px;
     padding: 0 10px;
     line-height: 42px;
     font-size: 18px;
     color: #050505;
 }
 .nav ul li a:hover {
   
     border-bottom: 2px solid #00a4ff;
     color: #00a4ff;
 }

1. 让导航栏一行显示，给li加浮动
2. nav导航栏不加宽度，将来可以继续添加其余文字
3. 导航栏里的文字不一样多，最好给a链接左右padding撑开盒子，而不是指定宽度

1.3 search搜索模块

<!-- 搜索部分search -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>

 /* 搜索模块 search*/
 .search  {
   
     float: left;
     width: 412px;
     height: 42px;
     background-color: skyblue;
     margin-left: 70px;
 }
 .search input {
   
 	 float: left;
     width: 345px;  /* 量出的宽度是360，需要减去右填充 */
     height: 40px;
     border: 1px solid #00a4ff;
     border-right: 0;
     font-size: 14px;
     color: #bfbfbf;
     padding-left: 15px;
 }

 .search button {
   
     float: left;
     width: 50px;
     height: 42px;
     /* 去除按钮默认边框 */
     border: 0;
     background: url(images/btn.png);
 }

1.4 用户user模块

<!-- 用户模块 user -->
        <div class="user">
            <img src="images/user.png" alt="">
            qq-lilei
        </div>

 .user {
   
     float: right;
     line-height: 42px;
     margin-right: 30px;
     font-size: 14px;
     color: #666;
 }

2 banner制作

<div class="banner">
        <!-- 版心 -->
 	   		 <!-- subnav模块 -->    
    </div>

 .banner {
   
    height: 421px;
    background-color: #1c036c;
 }
  /* banner 版心 */
 .banner .w {
   
     height: 421px;
     background: url(images/banner2.png) no-repeat top center;
 }

2.1 subnav模块

<div class="subnav">
    <ul>
        <li>