开发者学堂课程【零基础学前端 HTML+CSS：主区域】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5156
主区域
基本内容
一、明确主区域的位置
二、制作主区域
三、鼠标经过图片产生效果
一、明确主区域的位置
1、这节课的内容是处理“主区域”中九宫格部分。如下图红色边框中所示：
九宫格部分没有在原始设计文件里涉及到，因为在开发过程中，不会采用 table 的设计思路，一般是在数据库里提出来，很多设计都是在数据库中无序列表提取出来的，在无序列表中提取较为方便，和数据库结合比较稳定。
2、在 index.html 主文件的程序代码
</div>
<div id="ad">广告</div>
<div id=“main"> 主区域</div>
<div id="dianping">点评</div>
<div id="foot"> 底部信息</div>
二、制作主区域
</div>
<div id="ad">广告</div>
<div id=“main">主区域</div>
<div id="dianping">点评</div>
<div id="foot">底部信息</div>
</div>
<div id="ad">注册快租客立即领取200元房费</div>
<div id=“main">
<div class=“house”>
<ul>
<li><img src="images/house/1. jpg"></li>
// img 标签；images 为图像文件名，在 house 里面
//此处为图像格式，具体的图片文件夹位置由自己确定存放文件夹；主区域有 9 张图片，需要复制 9 次；
//注意：图像文件格式要使用相对路径；在之前的课程学习中对于相对路径有详细讲解，此处不做解释。
<li><img src="images/house/2. jpg"></li>
<li><img src="images/house/3. jpg"></li>
<li><img src="images/house/4. jpg"></li>
<li><img src="images/house/5. jpg"></li>
<li><img src="images/house/6. jpg"></li>
<li><img src="images/house/7. jpg"></li>
<li><img src="images/house/8. jpg"></li>
<li><img src="images/house/9. jpg"></li>
<ul>
<div id="dianping">点评</div>
<div id="foot"> 底部信息</div>
//此时刷新之后，可以看到是9张排列为一竖行的图片组成的无序列表。如果在图片前面出现“.”，那就说明需要给无序列表加上{list-style:none}，因为老师在写程序之前就把它进行格式化了，比如说在 ul、ol、li 中，list style 已经关闭了，如果在写程序时发现 list style 没有关闭，也可以写一个全局变量，全局变量直接给它关闭掉；也可以可以针对某一块程序手动关闭，一般做设计的都是要把它在根本上关掉。现在开始编写主区域的代码。
#main {
width: 100% ;
//宽度100%
min-width: 960px ;
max -width: 1920px ;
background-color: #ffffff；
//背景：纯白色
overflow：auto；
//设置自动的状态，保证图片顺序排放，变成回车的状态，不会出现在页面外围，
}
.house {
//创建 house 的属性；
width :1000px；
//宽度也是 1000px ；因为没有规定图片的主宽度，所以经过测量，可以得出宽度为 1000；具体的数值可以在之后进行调整；图片左右的宽度将会进行自动赋值；
margin：auto；
//图片变为三排，并且使图片居中；
}
}
.house ul {
margin：10px；
//如果 List style 没关，出现了“.”的状态，那么就可以在此处关闭 list style。
padding：10px；
//让每一值都出现 10 像素的区别；
}
.house ul li {
float :left
//让图片居左浮动；
浮动效果如下图所示：
//之后会调整页面上的尺寸，当尺寸调整完之后，就可以将宽度进行固定；
//此时大体结构已经设置完成，接下来需要根据结构改变位置。
padding : 11px ;
}
//图片在主区域页面略挤，在程序中加入 padding 调整图片和图片之间的间距；
//首先观察页面上图片的尺寸，页面左下方显示宽为 22；那么 padding 数值为11（每张图片的左边和右边各为 11）。
刷新之后，效果如下图所示：
三、鼠标经过图片产生效果
当鼠标滑动到图片上上时，图片出现选中的状态，弹出边框的效果；边框效果和阴影的效果在 css3 中也有详细的介绍，根据边框的阴影效果可以看出水平位置和垂直位置都是 0；虚化比较淡，背景也比较浅淡。
以下是鼠标经过图片出现阴影边框的效果的代码：
}
.house{
width: 1000px;
margin: 10px auto;
//此时阴影边框与广告面与图片距离较小，可以加入 margin：10px 进行调整；左右 auto 进行自动调整，调整之后便和设计图相似，如下图所示：
}
. house ul li {
float: left ;
padding: 11px ;
}
找到设计人员的设计页面参数，可以看到灰度 30，柔化 10 。
. house ul 1i :hover {
//鼠标经过图片出现阴影的边框效果；
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3) ;
水平：0px ；
垂直：0px ；
blue：4px ；
羽化：2px ；
0，0，0 代表黑色 ；
0.3代表 alphavalue 的数值，灰度 ；
}
