小练--盲打学成在线

免责声明：本文仅做分享！

学成在线 (olin-yi.github.io)

---

 

目录

目录构造

基础公共样式 

base.css

index.html 

版心居中

网页制作思路

CSS 实现思路

头部整体布局

logo

导航制作技巧（nav）

搜索区域（search）

用户区域（user）

banner区域

精品推荐（recommend）

html：

css：

单个课程（course）

版权区域（footer）

---

---

 

目录构造

---

 

基础公共样式 

base.css

/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
  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;
}

index.html 

---

版心居中

---

网页制作思路

布局思路：先整体再局部，从外到内，从上到下，从左到右.

CSS 实现思路

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

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

3. 控制图片、文字内容样式

---

头部整体布局

logo

导航制作技巧（nav）

搜索区域（search）

用户区域（user）

图片、文字垂直方向居中。

---

banner区域

左侧导航栏

右侧课程表

 

精品推荐（recommend）

 

html：

  <!-- 精品推荐的课程 -->
  <div class="course wrapper">
    <!-- 标题 -->
    <div class="hd">
      <h3>精品推荐</h3>
      <a href="#" class="more">查看全部</a>
    </div>


    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#"></a>
          <div class="pic">
            <img src="./uploads/course01.png" alt="wu">
          </div>
          <div class="text">
            <h4>前端开发</h4>
            <p><span>高级</span> · <i>1125</i>人学习</p>
          </div>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>JavaScript从入门到精通，从出师到出事</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/course01.png" alt="wu">
            </div>
            <div class="text">
              <h4>前端开发</h4>
              <p><span>高级</span> · <i>1125</i>人学习</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

css：

/* 精品推荐 */
.recommend {
  display: flex;
  margin-top: 11px;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);

  line-height: 60px;
}

.recommend h3 {
  font-size: 18px;
  color: #00a4ff;
  font-weight: 400;
}


.recommend ul {
  flex: 1;
  /* 除去标题和修改兴趣的尺寸，
  父级剩余空间都给ul ，
  把修改兴趣移到最右边*/
  /* 子元素宽度占满剩余空间 */

  display: flex;
  /* 子元素水平排列 */
}

.recommend ul li a {
  padding: 0 24px;
  border-right: 1px solid #e0e0e0;

  font-size: 18px;

}

.recommend ul li:last-child a {
  border-right: 0;
}

.recommend .modify {
  font-size: 16px;
  color: #00a4ff;
}

 

---

单个课程（course）

单个

---

版权区域（footer）

 

---