main主体模块是index里面专有的，需要新的样式文件index.css，接下来我们写的css代码都放在这个文件中。

一、main主体盒子搭建

这就是我们接下来要做的main，之前我们已经把左侧的菜单做好了，因此我们只需要做右边的两部分。

具体布局：

这里插播一个清除浮动的概念：

1、先把main、focus、newsflash三个盒子做出来

<!--结构-->
<div class="w"><!--版心不要忘记加--><div class="main"><div class="focus"></div><div class="newsflash"></div></div></div>

经测量，main宽980、高455，focus宽721，newsflash宽250，后两个同main一样高。main要有一个220的左外边距和10的上外边距，focus左浮动，newsflash右浮动。

.main {width: 980px;height: 455px;margin-left: 220px;
}.focus {float: left;width: 721px;height: 455px;background-color: blanchedalmond;
}.newsflash {float: right;width: 250px;height: 455px;background-color: coral;
}

2、focus模块制作

focus模块放的是轮播图（之后学js再做），所以不能简单地用img标签引入图片，一般用无序列表ul>li:

<div class="focus"><ul><li><img src="upload/focus1.png" alt=""></li></ul>
</div>

注意这种轮播图会经常替换，所以我们把这张图放在upload文件夹下。

3、newsflash模块制作

这个模块又分为三个小模块：

1号盒子为news新闻模块，高度165px（给上下左右四个边框）；
2号盒子为lifeservice生活服务模块，高度209px（无上边框）；
3号盒子为bargain特价商品。

①做好这三个盒子，注意到第三个盒子就是一张图片，所以我们直接img引入，再加一个6px的上外边距：

<div class="newsflash"><div class="news"></div><div class="lifeservice"></div><div class="bargain"><img src="upload/bargain.png" alt=""></div></div>

.newsflash .news {height: 165px;border: 1px solid;
}.newsflash .lifeservice {height: 209px;
}.newsflash .bargain {margin-top: 6px;
}

②news小模块制作

注意点：

news_hd里面放一个h5标签和一个a标签，分别进行左右浮动
news_bd里面的每个li标签都要加链接，且前面的【特惠】等词需用strong标签强调起来
news_hd和news_bd都需要给左右padding值和上padding值
news_bd里的li中内容可能过多，出现两行或者溢出，像下面这样：
很不美观，这里就需要给li的样式设置溢出隐藏，文字只在一行显示，最好溢出的文字用省略号替换显示，添加下面三行代码就搞定：

     overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

有木有好看很多~
③lifeservice小模块制作
整整齐齐用12个li，并让他们左浮动，这里小白C是根据lifeservice的大小划分li的大小，并设置每个li有下边框和右边框，其中第4、8、12个li没有右边框，跟小破站老师做的不大一样，我比较喜欢我这种方法

前端学习之品优购项目（二）——首页搭建相关推荐

前端学习之品优购项目（一）
第一次写博客,有很多瑕疵,还有就是我太懒了步骤不咋详细,见谅见谅
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
Web前端开发——品优购项目(上)
品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作主页列表页注册页品优购项目的学习目的电商类网站比较综合,里面需要大量的布局技 ...
前端——品优购项目（html+css）
前端--品优购项目文章目录前端--品优购项目一.品优购项目规划二.首页公共部分(common.css) 快捷导航模块 header模块 nav导航部分底部模块首页专有部分(index.c ...
品优购项目学习记录--01公共模块制作
文章目录一.品优购项目规划 1.1 开发工具以及技术栈 1.1.1 开发工具 1.1.2 技术栈 1.2 品优购项目搭建工作 1.2.1 相关文件夹以及文件创建 1.2.2 模块化开发 1.2.3 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...

前端学习之品优购项目（二）——首页搭建

一、main主体盒子搭建

1、先把main、focus、newsflash三个盒子做出来

2、focus模块制作

3、newsflash模块制作

前端学习之品优购项目（二）——首页搭建相关推荐

最新文章

热门文章

前端学习之品优购项目（二）——首页搭建

一、main主体盒子搭建

1、 先把main、focus、newsflash三个盒子做出来

2、focus模块制作

3、newsflash模块制作

前端学习之品优购项目（二）——首页搭建相关推荐

最新文章

热门文章

1、先把main、focus、newsflash三个盒子做出来