7.26 web前端-淘宝首页设计2

本文介绍: 这两段的代码量还好，不是很多，希望大家可以配合昨天的文章观看一下，仔细理解每一个标签的意义和用法，这两部分内容做完，上半部分的内容就搞定了，那么今天就先说到这里，明天我会继续把这个项目说完，包含最重要最后的主体部分和轮播图以及侧边固定栏等知识，希望大家多多捧场，谢谢大家！（ps想要完整源码文件的朋友给个关注和动动你的小手点个攒，私聊我发送给你哦~）…

hello 大家好，今天我来继续说说淘宝网页设计的后面部分，css 层叠样式表的部分，在html写好后，界面是十分简洁的，无法实现任何布局，如下图所示：

这时候我们需要给其施加层叠样式表用来排列布局，才能达到最终成品图效果，下面我们分成三个部分来写css 层叠样式表：

1.头部

可以参照一下昨天发的html 部分的代码，首先最简单的就是给两个在h box中的ul 盒子左浮动，让他们保证在上面header 最大的一个盒子里面，然后给ul中的li 设置左浮动，使其成为一行代码，再对其内容字体进行布局调整，头部的难点是导航栏部分有下拉框.

header {
  width: 100%;
  height: 36px;
  background-color: rgb(245, 245, 245);
}
li {
  list-style: none;
}
ul {
  padding-left: 0;
  margin: 0 0 0 0;
}
.hbox a {
  text-decoration: none;
  color: black;
  font-size: 12px;
  margin-left: 8px;
}
a:hover {
  color: red;
}
.hbox {
  height: 36px;
  width: 1210px;
  margin: 0 auto;
}
.hu1 {
  width: 370px;
  height: 36px;
  float: left;
}
.hu2 {
  position: relative;
  width: 580px;
  height: 36px;
  float: right;
}
.hu1 &gt; li {
  float: left;
  height: 36px;
  line-height: 36px;
  width: 20%;
}
.hu2 > li {
  float: left;
  height: 36px;
  line-height: 36px;
  width: 13%;
}
.hbox p {
  font-size: 12px;
  margin: 0 0 0 0;
  padding-left: 8px;
}
header p:hover {
  background-color: rgb(244, 244, 244);
}
.hu2 p {
  height: 36px;
  line-height: 36px;
}

.hsbox1 {
  position: absolute;
  width: 270px;
  background-color: rgb(255, 255, 255);
  top: 36px;
  height: 0;
  overflow: hidden;
}
.hl1:hover + .hsbox1 {
  height: 200px;
  overflow-y: scroll;
}
.hsbox1:hover {
  height: 200px;
  overflow-y: scroll;
}
.hsbox1 > p {
  height: 36px;
  line-height: 36px;
}
.hsbox2 {
  position: absolute;
  width: 85px;
  background-color: rgb(255, 255, 255);
  top: 36px;
  height: 0;
  overflow: hidden;
}
.hl2:hover + .hsbox2 {
  height: 72px;
}
.hsbox2:hover {
  height: 72px;
}
.hsbox3 {
  position: absolute;
  width: 85px;
  background-color: rgb(255, 255, 255);
  top: 36px;
  left: 155px;
  height: 0;
  overflow: hidden;
}
.hl3:hover + .hsbox3 {
  height: 72px;
}
.hsbox3:hover {
  height: 72px;
}
.hsbox4 {
  position: absolute;
  width: 85px;
  background-color: rgb(255, 255, 255);
  top: 36px;
  left: 380px;
  height: 0;
  overflow: hidden;
}
.hl4:hover + .hsbox4 {
  height: 216px;
}
.hsbox4:hover {
  height: 216px;
}
.hsbox5 {
  position: absolute;
  width: 85px;
  background-color: rgb(255, 255, 255);
  top: 36px;
  left: 476px;
  height: 0;
  overflow: hidden;
}
.hl5:hover + .hsbox5 {
  height: 144px;
}
.hsbox5:hover {
  height: 144px;
}
.cebianlan {
  position: fixed;
  right: 0;
  top: 300px;
  width: 60px;
  height: 295px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #fff;
}
.cebianlan ul {
  list-style: none;
  margin-top: 25px;
}
.cebianlan li {
  width: 60px;
  height: 56px;
  margin-top: -10px;
  padding-top: 10px;
  text-align: center;
  margin-bottom: 10px;
}
.cebianlan ul a {
  text-decoration: none;
  color: #333;
}
.cebianlan li i {
  display: block;
  width: 60px;
  height: 24px;
  font-size: 23px;
  padding-bottom: 5px;
}
.cebianlan ul a span {
  font-size: 12px;
  display: block;
  width: 60px;
  height: 17px;
  margin-top: 3px;
}

.tsbox2 > a {
  font-size: 12px;
  color: black;
  text-decoration: none;
}
.tmbox2 > a:hover {
  color: red;
}
.topbox {
  width: 100%;
  height: 122px;
}
.tbbox {
  width: 1190px;
  height: 90px;
  margin: 0 auto;
  padding-top: 24px;
}
.tmbox1,
.tmbox2,
.tmbox3 {
  float: left;
}
.tsbox1 {
  background-color: white;
  padding-left: 12px;
  width: 738px;
  height: 40px;
  border: 2px solid rgb(255, 80, 0);
  border-radius: 20px;
  line-height: 38px;
}
.tsbox1 > select {
  border: 1px solid white;
}
#shurukuang {
  border: 0px;
}
#sousuo {
  width: 74px;
  height: 36px;
  background-color: rgb(255, 107, 0);
  border-radius: 20px;
  border: 0;
}
.tsbox2 {
  margin-left: 20px;
}
.tmbox1 {
  margin-top: -10px;
  margin-left: 50px;
  width: 15%;
}
.tmbox2 {
  margin-top: 18px;
  width: 70%;
}
.tmbox3 {
  margin-top: -8px;
  width: 10%;
}
.tsbox2 > a {
  display: inline-block;
  color: rgb(102, 102, 102);
  margin-left: 8px;
  padding-top: 8px;
}
.tsbox2 > a:hover {
  color: rgb(255, 68, 0);
}
#shurukuang {
  outline: none;
}
select {
  outline: none;
}