css3基础100问之精品推荐模块goods板块（32）

最新推荐文章于 2023-09-06 20:48:19 发布

㼛思雨

最新推荐文章于 2023-09-06 20:48:19 发布

阅读量229

点赞数 1

分类专栏： css3基础100问文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106792462

版权

css3基础100问专栏收录该内容

100 篇文章 8 订阅

订阅专栏

html具体代码如下：

<!-- goods START -->
	<div class="goods w">
		<h3> 精品推荐 </h3>
		<div class="goods-item">
			|  <a href="#">jQuery</a>
			|  <a href="#">Spark</a>
			|  <a href="#">MySQL</a>
			|  <a href="#">JavaWeb</a>
			|  <a href="#">MySQL</a>
			|  <a href="#">JavaWeb</a>
		</div>
		<div class="mod"> 修改兴趣 </div>                                                                
	</div>
	<!-- goods END -->

css代码具体如下：

/*goods start*/
.goods {
	height: 60px;
	background-color: #fff;
	margin-top: 10px;
	/*利用行高可以继承的特性*/
	line-height: 60px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color: #00a4ff;

}
.goods-item {
	float: left;
	color: #bfbfbf;
}
.goods-item a {
	font-size: 16px;
	color: #050505;
	margin: 0 30px;
}
.mod {
	float: right;
	margin-right: 30px;
	font-size: 14px;
	color: #00a4ff;
}
/*goods end*/