目标:该网页以图文混排的方式展示书籍信息,实现鼠标悬停到某个商品上时,会出现商品的价格等信息,并且这个信息是有一个从下往上浮出的效果。
1.HTML部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/shangke.css">
<title>上课</title>
</head>
<body>
<div id="limian">
<div id="shangmian"><img src="img/tou.png" alt="图片"></div>
<div id="zhongjian">
<div id="rexiao"><span>热销教材</span></div>
<div id="tupian01">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥36.00</i>[已售7件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian02">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥38.00</i>[已售12件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian03">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥40.00</i>[已售20件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian04">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥35.00</i>[已售25件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
</div>
<div id="xiamian">
<div id="jingpin"><span>精品套系</span></div>
<div id="tupian05">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥34.00</i>[已售38件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian06">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥42.00</i>[已售45件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian07">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥36.00</i>[已售62件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
<div id="tupian08">
<div class="xuanting">
<div class="shangfu"><a href="#"><i>¥34.00</i>[已售18件]<img class="qq" src="img/qq.gif"></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
2.css部分代码
@charset "utf-8";
/* CSS Document */
*{
margin: 0;padding: 0;
}
#limian{
width: 1500px;
height: 1100px;
margin: 0 auto;
}
#shangmian{
width: 1500px;
height: 400px;
}
#zhongjian{
height: 350px;
}
#xiamian{
height: 300px;
}
#rexiao{
box-shadow: 0 10px 10px 0 skyblue;
width: 280px;
height: 302px;
float: left;
background-image: linear-gradient(skyblue,aliceblue);
text-align: center;
padding-top: 20px;
}
#rexiao span{
font-size: 25px;
color: aliceblue;
}
#tupian01{
box-shadow: 0 10px 10px 0 skyblue;/*盒子周围阴影*/
float: left;
width: 280px;
height: 322px;
margin-left: 25px;
background-image: url("../img/1.png");
position: relative;/*相对定位*/
overflow: hidden;/*隐藏子盒子超出部分*/
transition: all 5s linear 0s;
}
3.网页效果
总结:通过这次学习,我学习了以下几点
1、文本阴影:text-shadow属性和盒子阴影:box-shadow属性
2、文本溢出处理:text-overflow属性
- 强制文本在一行内显示:white-space:nowrap;
- 溢出内容为隐藏:overflow:hidden;
3、线性渐变:background-image:linear-gradient();
4、径向渐变:background-image:radial-gradient();
5、过渡属性:transition:property duration timing-function delay;
ps:要实现过渡效果,必须规定两项内容:
(1)规定应用过渡效果的css属性名称。
(2)规定效果的持续时间。(默认持续时间部分为0。)
6、变形属性:transform;
(1)旋转:rotate(angle);
angle是度数值,单位是deg,代表旋转角度,正值表示顺时针旋转,负值表示逆时针旋转。
(2)倾斜:skew(angleX,angleY);
angleX和angleY表示元素在x轴和y轴上的倾斜角度。
(3)缩放:scale(x,y);
x和y表示元素在水平和垂直方向上的缩放倍数。
(4)移动:translate(x,y);
x和y表示元素在水平和垂直方向上的移动距离。
7、定义变形原点:transform-origin;