HTML作业03——简易选书页面

目标：该网页以图文混排的方式展示书籍信息，实现鼠标悬停到某个商品上时，会出现商品的价格等信息，并且这个信息是有一个从下往上浮出的效果。

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;

HTML作业03——简易选书页面

猜你喜欢