7.27 web前端-淘宝首页设计3

hello各位朋友们，今天来把设计最终的主体部分说完。

 主体的整体结构划分我们是这样的，首先，上下两个部分分为两个盒子，独立制作里面的内容。

上半部分盒子左边很好解决，用ul列表然后设定字体格式等内容，右边的上部分盒子用列表加浮动解决，下面的左边是轮播图，在初期我们的解决方法是用swiper插件来运转轮播图，需要我们去官网下载，然后插入图片，最后再css中设置样式就行了，右边就是一些简单的样式设计。

下半部分的盒子就是在内部设置一个一个小盒子，插入图片，描述词和价格然后设置文字图片样式，设置好小盒子的长宽以后直接设置左浮动就可以了，然后再设置一个移入效果，整体不难。

代码：

main {
  width: 1190px;
  height: 1050px;
  background-color: white;
  border-radius: 16px;
  margin: 0 auto;
}
.mbbox {
  width: 100%;
  height: 423px;
}
.mmbox1 {
  height: 368px;
  width: 270px;
  background-color: rgb(247, 249, 250);
  border-radius: 15px;
  float: left;
  margin: 24px 0 0 24px;
}
.mmul > li {
  height: 38px;
  font-size: 14px;
}
.mmul > li > a {
  text-decoration: none;
  color: rgb(102, 102, 102);
}
.mmul span {
  display: inline-block;
  padding: 0 6px;
}
.mmul i {
  margin-right: 12px;
}
.mmul a:hover {
  color: red;
  text-decoration: underline;
}
.mmbox2 {
  width: 882px;
  height: 423px;
  float: left;
  margin-left: 11px;
}
.msbox1 > ul {
  width: 856px;
  height: 42px;
  margin-top: 24px;
  margin-right: 26px;
  background-color: rgb(247, 249, 250);
  border-radius: 15px;
}
.msbox1 > ul > li {
  float: left;
}
.msbox1 span {
  color: rgb(224, 226, 231);
}
.msbox1 a {
  display: inline-block;
  padding: 0 20px;
  line-height: 42px;
  color: rgb(51, 51, 51);
  text-decoration: none;
}
.msbox1 a:hover {
  color: rgb(255, 80, 0);
}
.msbox2 {
  width: 882px;
  height: 357px;
}
.lunbotu {
  width: 564px;
  height: 315px;
  border-radius: 15px;
  margin-top: 10px;
  float: left;
  background-color: aqua;
}
.mssbox {
  width: 314px;
  height: 357px;

  float: left;
}
.nihao {
  width: 316px;
  height: 130px;
}
.mssbutton {
  width: 316px;
  height: 44px;
  margin-top: 13px;
}
.mssbutton > button {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  font-size: 16px;
  border: 0;
  margin-left: 6px;
}
.mssbaobeishoucang {
  width: 286px;
  height: 48px;
  margin: 30px 0 0 30px;
}
.mssbaobeishoucang > li {
  width: 48px;
  height: 48px;
  float: left;
  margin-right: 22px;
}
.mssbaobeishoucang a {
  font-size: 12px;
  text-decoration: none;
  color: rgb(60, 60, 60);
  display: inline-block;
}
.mssbaobeishoucang a:hover {
  color: red;
}
.mssbaobeishoucang i {
  font-size: 20px;
  margin-left: 12px;
}
.mssredian {
  width: 252px;
  height: 18px;
  margin: 36px 0 0 30px;
}
.mssredian > a {
  font-size: 12px;
  text-decoration: none;
  color: rgb(115, 115, 115);
}
.shangpingbox {
  width: 100%;
  height: 650px;
}
#shangpingbox {
  width: 1170px;
  height: 560px;
}
.sp-x {
  display: block;
  width: 370px;
  height: 172px;
  background-color: rgb(247, 249, 250);
  border-radius: 12px;
  float: left;
  margin: 0 0 18px 18px;
}
.sp-1 {
  height: 150px;
  width: 150px;
  float: left;
  margin: 11px 11px 11px 11px;
}
.sp-2 {
  height: 140px;
  width: 186px;
  float: left;
  margin-top: 18px;
}
#shangpingbox > a:hover {
  border: 1px solid rgb(255, 145, 94);
  width: 368px;
  height: 170px;
}
/* 轮播图 */
.swiper {
  width: 564px;
  height: 315px;
  position: relative;
}
.swiper {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #ff6600; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
  overflow: hidden;
}
.swiper-wrapper img {
  width: 564px;
  height: 315px;
  border-radius: 15px;
}
.swiper {
  --swiper-pagination-color: #ff6600; /* 两种都可以 */
}

建议大家结合我第一篇写淘宝项目的文章去看一下，有什么不理解的也可以私聊我，最后希望大家一起学习进步。

（想要完整源码文件的小伙伴给个关注和小小的赞私聊我哦）