渡一教育《淘宝项目开发笔记五》

渡一教育《淘宝项目开发笔记五》

视频地址：

https://ke.qq.com/course/347602?taid=2574652505673170

可以免费学习

以下代码均使用渡一教育，若有问题可以联系删除。
今天是做首屏内容，首屏内容比较多，先进行布局，先分析实际页面结构框架：
如上面图所示：整体分为两个部分：
①左边内容（左浮动）②右边内容（右浮动）
①的内容根据块结构分为：侧边导航栏，图片1容器，图片2容器，淘宝头条
②的内容根据块内容分为：用户，举报，公告区，图标区域，app区域

在写html的代码前可以先把框架写写出来，把思路先大致框定下来：
先把①左边的内容写出来，注意①与②要有个父级

先写①的子集内容：

再写②的子集内容：
然后进行css样式渲染，先大概给个尺寸，主要是把框架打出来，
如下图：
以下为css代码,大家可以看出根本没有特别的地方，等在做细节的时候，再进行大致调整，这样做的目的是为了保证我们的逻辑是正确的。
如果框架基本对的上，那就说明没有太的问题（用浮动，距离一定要计算准确！这里尺寸是我随便写的，只是为了展示给大家看看框架是如何做出来的。）

/* 首屏的内容 /
#firstScreen{
width: 1190px;
}
/ 左边内容 /
/ 侧边导航 /
.firstLeft .sideNav{
width: 190px;
height: 522px;
background-color: #6c6c6c;
}
/ 图片1容器 /
.firstLeft .img1Box{
width: 900px;
height: 282px;
background-color: #f50;
}
/ 图片2容器 /
.firstLeft .img2Box{
width: 900px;
height: 240px;
background-color: #9c9c9c;
}
/ 淘宝头条 /
.firstLeft .news{
width: 900px;
height: 100px;
background-color: #96c696;
}
/ 右边内容 /
.firstRight{
width: 290px;
height: 621px;
background-color: #6c6c6c;
}
/ 用户 /
.user{
width: 290px;
height: 145px;
background-color: #d6d328;
}
/ 举报 /
.report{
width: 290px;
height: 26px;
background-color: #235edf;
}
/ 公告区 /
.notice{
width: 290px;
height: 108px;
background-color: #97d30c;
}
/ 图标区域 /
.iconArea{
width: 290px;
height: 224px;
background-color: #e7391b;
}
/ APP */
.app{
width: 290px;
height: 80px;
background-color: #6c6c6c;
}