DAY 06 品优购项目
学习目标：主体部分的书写
品优购首页布局
对于此部分代码来说，它并不属于全部页面都会适用的部分，所以我们要新建一个单独的css文件，专门存放首页的格式：index.css，记得在html文件的头部引入新建的css文件。
<link rel="stylesheet" href="css/index.css">
- main主体模块制作
这部分是index里面独有的，注意需要新的样式文件 index.css
- main盒子 宽度为980px 距离左边220 给一个 margin-left 就好了，给高度就不用清除浮动
- main里面包含左侧盒子 左浮动 focus 焦点图模块
- main 里面包含右侧盒子 右浮动 newsflash 新闻快报模块
对于main模块来说，我们可以看到是导航栏放下来的旁边又加入了两个横向排列的大盒子。同时，我们可以观察到右边的大盒子里面又包含了三个垂直排列的小盒子。此处包含的细节在于：
- 左边盒子是一个轮播图，并且其左右两边又''<>''两个图标以及图片左下角是一连串的圈圈，在首页显示的图片时，对应的圈圈是实心的。
- 对于右边大盒子内部中间的小盒子来说，我们需要注意的是盒子里面分成了很多小框框，即我们要利用border来设置边框。
- 导航栏放下来的设置，其实就是将前面的的style删除掉。
<div class='dd' style='display:none;'>
main是在nav和footer中间加入的模块，且也处于版心中间
<div class="w">
<div class="main">
123
</div>
</div>
.main {
width: 980px;
height: 455px;
background-color: pink;
margin-left: 219px;
margin-top: 10px;
}
- 焦点图
<div class="main">
<div class="focus fl">
<!--字体图标的引入-->
<a href="#" class="arrow-l"> <span class=""></span> </a>
<a href="#" class="arrow-r"> <span class=""></span> </a>
<ul>
<li><a href="#"><img src="upload/focus.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus.jpg" alt=""></a></li>
</ul>
<!--小圆圈的样式写法-->
<ol class="circle">
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
/*插入图片放进upload 产品图片选择jpg*/
.focus {
width: 720px;
height: 455px;
background-color: purple;
position: relative;
}
.arrow-l,
.arrow-r {
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 40px;
color: #fff;
}
.arrow-r {
right: 0%;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/* background-color: #fff;*/
margin: 0 3px;
border-radius: 50px;
border: 1px soild rgba(225, 225, 225, 0.7);
/*鼠标经过显示小手*/
cursor: pointer;
}
/*当前页面显示实心的圆圈*/
.current {
background-color: #fff;
}
- 新闻快报模块
分为三个小盒子：1 news 新闻模块 2 lifeservice 生活服务模块 3 bargain 特价商品
- news 新闻模块
对于该部分来说，是有一个边框的，所以在测量宽高的时候，注意不要把边框量到
- 对于news模块来说，分为上下两个模块，兄弟关系，所以我们都采用div
- 1号盒子 news-hd 新闻头部模块 给一个高度和下边框
- 2号盒子 news-bd 新闻主题部分 里面包含ul 和 li 还有链接
<div class="news">
<div class="news-hd">品优购快报 <a href="#">更多<span class=""></span></a></div>
<div class="news-bd">
<ul>
<li><a href="#">爆款耳机五折起</a></li>
<li><a href="#">爆款耳机五折起</a></li>
<li><a href="#">爆款耳机五折起</a></li>
<li><a href="#">爆款耳机五折起</a></li>
<li><a href="#">爆款耳机五折起</a></li>
</ul>
</div>
</div>
.news {
height: 163px;
border: 1px solid #ccc;
}
.news-hd {
height: 32px;
/*dotted 点线 dashed 虚线*/
border-bottom: 1px dotted #ccc;
font-size: 14px;
line-height: 32px;
padding: 0 15px;
}
.news-hd a {
float: right;
font-size: 12px;
}
.news-bd {
padding: 10px 0 0 15px;
}
.news-bd li {
/*直接改变高度 不设置padding值*/
height: 25px;
}
**浮动的元素和加了绝对定位的元素可以直接给大小hangn **
行内元素转换为块级元素，和父级一样宽，要是全部填满父级，还需要加一个高度百分百
让加粗的字体不加粗 font_weight：normal；
注意权重的问题，对于最后一个盒子的右边框来说，其直接用last来设定border_right：0，来设定是不管用的，需要先给他提权，再设定才有用。
tab栏切换 JS内容
