在黑马学习CSS的第五天，学成在线页面实战

页面实战

准备工作

常见的图片格式

PSD 文件对前端工程师而言，最大的优势是：

1. 复制文字
2. 获得图片
3. 测量大小和距离

CSS 属性书写顺序(重要)

CSS 的书写顺序会影响到浏览器的渲染性能，书写顺序记忆套路如下：

1. 找位置 —— 标准流、浮动、定位
2. 圈地盘 —— 宽高、间距、边框、背景
3. 定内容 —— 文本、颜色、下划线、对齐、文本换行
4. 做点缀 —— 鼠标形状、边框圆角、阴影、文本阴影

页面布局整体思路

1. 确认版心，居中可视区域，需要测量；
2. 确认行模块（父级标准流）和列模块（子级浮动）；
3. 从上到下逐一完成行模块，循环重复以下三步，直到页面完成：
4. 分析确认每个列的大小（width & height），再确认列的位置 (margin & padding)；
5. 制作 HTML 结构，浏览确认结构正确。

Header 区域制作

标题确定版心

/* 版心 */
.w {
   
  width: 1200px;
  margin: 0 auto;
}

header区域示例代码：

<!-- 头部区域开始 -->
    <div class="header w">
        <div class="logo">
            <img src="./images/logo.png" alt="学成在线" title="学成在线">
        </div>
        <!-- nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- search -->
        <div class="search">
            <input type="tex" placeholder="输入关键词">
            <button></button>
        </div>
        <!-- user -->
        <div class="user">
            <img src="./images/user.png" alt="">
            qq-litao
        </div>
    </div>
    <!-- 头部区域结束 -->

header区域CSS:

/* 头部区域开始 */
.header {
   
    height: 70px;
    padding-top: 30px;
    /* background-color: yellow; */
}
.logo {
   
    float: left;
}
.nav {
   
    float: left;
    margin-left: 70px;
}
.nav ul li {
   
    float: left;
    margin-right: 20px;
}
.nav  li a {
   
    display: block;
    padding: 10px;
    font-size: 18px;
    color: #050505;
}
.nav li a:hover {
   
    border-bottom: 2px solid #00a4ff
}
.search {
   
    float: left;
    margin-left: 65px;
}
.search input {
   
    float: left;
    width: 345px;
    height: 38px;   
    padding-left: 15px;
    border: 1px solid #00a4ff;
    font-size: 12px;
}
.search button {
   
    float: left;
    width: 50px;
    height: 40px;
    background: url(../images/btn.png);
    /* 去掉button默认的边框 */
    border: 0;   
}
.user {
   
    float: left;
    margin-left: 30px;
    padding-top: 4px;
    height: 33px;
    /* background-color: red; */
    font-size: 14px;
    color: #666;
}
/* 头部区域结束 */

header区域总结

在搭建结构时，行模块（标准流父盒子）通常使用多类名，其中：
第 1 个类名是盒子名称，用于在 CSS 中定义该父盒子的具体样式；
第 2 个类名是版心类，用于统一约束父级盒子的宽度并居中显示。

在实际开发中，导航栏不会直接用 a 标签，而是会用 li 标签包裹 a 标签，原因：
li+a 语义更清晰；
如果直接用 a 会被搜索引擎嫌弃 —— 堆砌关键字，严重的会被降权，影响网站排名。

为了方便页面扩展，在布局导航栏时不需要指定宽度，以方便后续增加新的导航栏。

Banner 区域制作

banner 区域的大小和位置：
大小：通栏 * 420px；
版心位置：水平居中。

Banner区域示例代码：

 <!-- banner开始 -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<em>&gt;</em></a></li>
                    <li><a href="#">后端开发<em>&gt;</em></a></li>
                    <li><a href="#">移动开发<em