/* <!-- 白色导航下面的轮播图开始 -- */
div.carousel {
  width: 100%;
  height: 460px;
  /* background-color: orange; */
}

div.carousel img {
  width: 100%;
}

/* 轮播图里面的左右箭头 */
div.carousel div.container {
  position: relative;
}
div.carousel div.arrow-left,
div.carousel div.arrow-right {
  width: 42px;
  height: 70px;
  /* background-color: orange; */
  text-align: center;
  line-height: 70px;
  position: absolute;
  color: gray;
}

div.carousel div.arrow-left:hover,
div.carousel div.arrow-right:hover {
  cursor: pointer;
  background-color: #727273;
  color: #fff;
}

div.carousel div.arrow-left {
  left: 234px;
  top: 50%;
  margin-top: -35px;
}
div.carousel div.arrow-right {
  right: 0;
  top: 50%;
  margin-top: -35px;
}

div.carousel div.dots {
  position: absolute;
  right: 0;
  bottom: 20px;
}
div.carousel div.dots a {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 10px;
  border-color: hsla(0, 0%, 100%, 0.3);

  background: rgba(0, 0, 0, 0.4);
}
div.carousel div.dots a.active,
div.carousel div.dots a:hover {
  background-color: hsla(0, 0%, 100%, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
}

/* 轮播图的左边部分 */
div.white-nav div.container .nav-content {
  /* position: relative; */
}

div.white-nav {
  position: relative;
}
/* div.white-nav .container{
    position: relative;
  } */

/* 轮播图结束 */
/* 新品栏目开始 */
div.new-channel {
  width: 100%;
  height: 170px;
  /* background-color: rgb(45, 45, 45); */
  margin-top: 14px;
}

div.new-channel div.channel-list {
  width: 234px;
  height: 170px;
  background-color: #5f5750;
  float: left;
}

div.new-channel div.new-product {
  width: 316px;
  height: 170px;
  /* background-color: orangered; */
  float: left;
  margin-left: 14px;
}
div.new-channel div.new-product img {
  width: 316px;
  height: 170px;
}

/* 新品栏左侧的频道列表 */
div.new-channel div.channel-list ul li {
  width: 76px;
  height: 82px;
  text-align: center;
  font-size: 12px;
  float: left;
  position: relative;
}
/* channel-list里面的边框竖线 */
div.new-channel div.channel-list ul li.right::before {
  content: "";
  display: block;
  width: 1px;
  height: 70px;
  background-color: #665e57;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -35px;
}

div.new-channel div.channel-list ul li.bottom::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background-color: #665e57;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -35px;
}

div.new-channel div.channel-list ul li a {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.7);
}

div.new-channel div.channel-list ul li a:hover {
  color: rgba(255, 255, 255, 1);
}

div.new-channel div.channel-list ul li span.desc {
  display: block;
}
div.new-channel div.channel-list ul li span.iconfont {
  display: inline-block;
  width: 24px;
  height: 24px;
}

/* 新品栏目结束 */

/* 主页page-body轮廓开始 */
div.page-body {
  background-color: #f5f5f5;
  width: 100%;
  /* height: 1000px; */
  margin-top: 28px;
  /* 设置一个内边距，把page-body区域和最后一个视频区域分开 */
  padding-bottom: 26px;
  padding-top: 28px;
}
div.page-body .img-news {
  margin-bottom: 16px;
}
div.page-body .img-news a {
  display: block;
}
div.page-body .img-news img {
  width: 1226px;
  height: 120px;
}
/* 新闻图片结束 */
/* 板块标题开始 */
div.page-body div.box-title {
  width: 1226px;
  height: 58px;

  /* background-color: orange; */
}
div.page-body div.box-title div.title h2 {
  float: left;
  line-height: 58px;
  font-size: 22px;
  font-weight: 200;
  color: #333;
}

div.page-body div.box-title div.remark {
  float: right;
  line-height: 58px;
  color: #333;
}

div.page-body div.box-title div.remark a {
  color: #424242;
}

div.page-body div.box-title div.remark a.highlight,
div.page-body div.box-title div.remark a:hover {
  color: #ff6700;
}
div.page-body div.box-title div.remark ul li {
  float: left;
  margin-left: 30px;
}

div.page-body div.box-title div.remark ul li a.highlight,
div.page-body div.box-title div.remark ul li a:hover {
  border-bottom: 2px solid #ff6700;
  padding-bottom: 3px;
}

/* 板块标题结束 */
/* 手机板块下面的大的商品板块的样式开始 */
div.area {
  width: 1226px;
  height: 614px;
  margin-bottom: 14px;
  /* background-color: olivedrab; */
}

div.area div.sidebar {
  float: left;
  width: 234px;
  height: 614px;
  /* background-color: rgb(36, 33, 28); */
}
div.area div.sidebar img {
  width: 234px;
  height: 614px;
}

div.area div.right-side {
  float: left;
  height: 614px;
  width: 992px;
  background-color: #ededed;
}

div.area div.right-side div.mid {
  width: 234px;
  height: 300px;
  background-color: rgb(251, 251, 251);
  float: left;
  margin-left: 14px;
  margin-bottom: 14px;
  text-align: center;
}

div.area div.right-side div.mid a {
  display: block;
  width: 234px;
  height: 300px;
  padding-top: 20px;
}

div.area div.right-side div.mid img {
  width: 160px;
  height: 160px;
}
/* 图片下面的标题样式 */
div.area div.right-side div.mid h3 {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  margin-bottom: 10px;
}
.transparent {
  background-color: transparent;
}

div.area div.right-side div.mid.transparent {
  background-color: transparent;
}

/* 图片下面的第一个p标签文字样式 */
div.area div.right-side div.mid p:nth-of-type(1) {
  font-size: 12px;
  color: #b0b0b0;
  margin-bottom: 10px;
  height: 18px;
}
/* 图片下面的第二个p标签文字样式 */
div.area div.right-side div.mid p:nth-of-type(2) {
  color: #ff6e18;
  font-size: 14px;
}
div.area div.right-side div.mid div.mid-top,
div.area div.right-side div.mid div.mid-bottom {
  width: 234px;
  height: 143px;
  background-color: #fff;
}
div.area div.right-side div.mid div.mid-top {
  margin-bottom: 14px;
}

div.area div.right-side div.mid div.mid-top a {
  width: 234px;
  height: 143px;
  position: relative;
  padding-top: 40px;
}
div.area div.right-side div.mid div.mid-top a h3.title {
  margin: -10px 110px 5px 30px;
  font-size: 14px;
  font-weight: 400; /* 去除默认加粗 */
  color: #333;
  width: 94px;
  height: 63px;
  text-align: left;
}

div.area div.right-side div.mid div.mid-top a p.price {
  margin: 0 110px 0 30px;
  font-size: 12px;
  color: #ff6700;
  text-align: left;
}

div.area div.right-side div.mid div.mid-top div.gas-cooker img {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  height: 32px;
}

div.sidebar div.sidebar-top a,
div.sidebar div.sidebar-bottom a {
  width: 234px;
  height: 300px;
  display: block;
}

div.sidebar div.sidebar-top img,
div.sidebar div.sidebar-bottom img {
  width: 234px;
  height: 300px;
}
div.sidebar div.sidebar-top {
  margin-bottom: 14px;
}
div.area div.right-side div.mid div.mid-bottom {
  position: relative;
}
div.area div.right-side div.mid div.mid-bottom div.iconfont {
  width: 48px;
  height: 48px;
  color: #ff6700;
  position: absolute;
  right: 35px;
  top: 48px;
  line-height: 48px;
}
div.area div.right-side div.mid div.mid-bottom a {
  padding-top: 50px;
}
div.area div.right-side div.mid div.mid-bottom a.h143 {
  height: 143px;
}
div.area div.right-side div.mid div.mid-bottom div.more {
  margin-left: 30px;
  font-size: 18px;
  color: #333;
  text-align: left;
  width: 94px;
  height: 45px;
}

div.area div.right-side div.mid div.mid-bottom div.more small {
  display: block;
  font-size: 12px;
  color: #333;
  padding-top: 4px;
}
/* 家电板块下面的大的商品板块的样式结束 */
/* 视频区开始 */
div.video-area {
  width: 1226px;
  height: 300px;
  /* background-color: orange; */
}

div.video-area .video-box {
  width: 296px;
  height: 300px;
  background-color: #fff;
  float: left;
  margin-right: 14px;
  text-align: center;
}
div.video-area .video-box:last-child {
  margin-right: 0;
}
div.video-area .video-box a {
  display: block;
  width: 296px;
  height: 180px;
}

div.video-area .video-box img {
  width: 296px;
  height: 180px;
  margin-bottom: 28px;
}

div.video-area .video-box div.play-btn {
  position: relative;
}

div.video-area .video-box div.play {
  position: absolute;
  width: 36px;
  height: 24px;
  background-color: #3d4e5c;
  left: 20px;
  bottom: 46px;
  border: 2px solid #fff;
  border-radius: 40px;
  text-align: center;
  color: #fff;
  /* line-height = height是垂直居中，但是因为有了2px的边框，所以要设置成20px */
  line-height: 20px;
}
/* 鼠标移入图片，他旁边的div变亮 */
div.video-area .video-box img:hover + div.play {
  background-color: #ff6700;
  border: 2px solid #ff6700;
}

div.video-area .video-box div.play:hover {
  background-color: #ff6700;
  border: 2px solid #ff6700;
}

div.video-area .video-box h3 {
  margin-left: 14px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 400;

  color: #333;
}

div.video-area .video-box p {
  margin-left: 14px;
  margin-bottom: 14px;
  height: 18px;

  font-size: 12px;
  color: #b0b0b0;
}

/* 主页page-body轮廓结束 */

总结

根据静态页面内容，用HTML搭建轮廓。在HTML，用到的标签有

行级标签：a，span，strong，u（下划线），em(强调)，i(斜体)，sub(下标),sup(上标)

块级标签：div，p，h1-h6，ul，li，dl（定义列表，跟ul…li类似），dt（定义了定义列表中的项目），dd（定义描述项目的内容，跟dt一起搭配）

**行内块级标签

可以和其他元素保持在在一行，还能能设置宽高
textarea，input，img，button

CSS部分常见的问题

1.解决父元素塌陷。 2.让div垂直水平居中。

字体图标部分

1.iconfont可以用导入在线字体图标网站 2.也可以在网站中找到图标以后，下载到本地，给标签里面添加类，并用添加伪元素的方法（::before）来调整字体图标的大小，颜色，位置。