免责声明：本文仅做分享！
学成在线 (olin-yi.github.io)
目录
目录构造
基础公共样式
base.css
index.html
版心居中
网页制作思路
CSS 实现思路
头部整体布局
logo
搜索区域（search）
用户区域（user）
精品推荐（recommend）
html：
css：
单个课程（course）
目录构造
基础公共样式
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）
