#大有学问#

本篇文章写两个案例。

一个是卡片布局案例，一个是logo平滑切换效果案例。

1.结构伪类选择器案例

布局思路

我将这个卡片分为四行模块。第一行是图片模块，第二行是文字部分，第三行进度条部分，第四行是按钮部分。

HTML代码结构

<div class="demo">
  <img src="../images/iphone.jpeg" alt="">
  <div>
    <p>Apple苹果iphone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
    <span>￥6088</span><span>￥6988</span>
  </div>
  <div>
    <p>已售<span>87%</span></p>
    <div>
      <div></div>
    </div>
    <p>剩余<span>29</span>件</p>
  </div>
  <input type="button" value="立即抢购">
</div>

CSS样式结构

我用了标签选择器和结构伪类选择器两种，没有使用类选择器。结构伪类选择器不太适用少量标签元素的。

* {
  margin: 0;
  padding: 0;
}
div:first-child {
  width: 234px;
  height: 400px;
  background-color: #fcfffc;
  border: 1px solid gray;
  padding: 0 4px;
  margin: 100px auto;
}
img {
  height: 206px;
  display: block;
  margin: 30px auto 25px;
}
p,
span {
  font-size: 12px;
  color: #797a7a;
}
div:first-child>div {
  padding: 0 6px;
}
div:first-child div:nth-of-type(1)  p {
  margin-bottom: 12px;
}
div:first-child div:nth-of-type(1) span:nth-child(2) {
  color: #c9493e;
  font-size: 20px;
  font-weight: 600;
  margin-right: 3px;
}
div:first-child div:nth-of-type(1) span:nth-child(3) {
  color: #a2a4a1;
  font-weight: 600;
  text-decoration: line-through;
}
div:first-child div:nth-of-type(2) {
  overflow: hidden;
  padding: 2px 6px;
}
div:first-child div:nth-of-type(2) p {
  float: left;
  font-size: 10px;
  line-height: 20px;
}
div:first-child div:nth-of-type(2)>div {
  width: 108px;
  height: 10px;
  border: 1px solid #d5685c;
  border-radius: 7px;
  float: left;
  margin: 5px;
}
div:first-child div:nth-of-type(2)>div>div {
  width: calc(80%);
  height: 10px;
  background-color: #ff5546;
  border-radius: 7px 0 0 7px;
  border: 0;
  margin: 0;
}
div:nth-of-type(2) span {
  color: red;
}
input {
  width: 234px;
  height: 40px;
  background-color: #bc2715;
  font-size: 16px;
  color: #ffdad7;
  border: 1px solid #d39f96;
}
input:hover {
  cursor:pointer;
}

2.logo过渡案例

布局思路

有一个大盒子.zH，里面包含一个有两个图片的小盒子.logo。当鼠标在大盒子.zH上悬停时切换logo图片。

给小盒子设置定位，通过修改left值，实现过渡效果。

HTML代码结构

<div class="zH">
  <div class="logo">
    <img src="../images/logo-mi2.png" alt="">
    <img src="../images/home.png" alt="">
  </div>
</div>

CSS样式结构

.zH {
  width: 60px;
  height: 60px;
  background-color: #ff6f00;
  border: 1px solid red;
  margin: 150px auto;
  position: relative;
  overflow: hidden;
}
.logo {
  width: 120px;
  height: 60px;
  background-color: #ff6f00;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s ease-in-out;
}
.logo img {
  height: 60px;
  margin: 0;
  float: left;
}
.logo:hover {
  left: -60px;
}

代码运行结果演示，已经发了一个新的视频上传了，有兴趣的可以去看一下。

明天开始实战操作品优购项目。