php仿天猫商品详情页面,仿天猫选中商品

摘要：

* {margin: 0px auto;padding: 0px;}

.top{ width: 400px; height: 40px; margin: 0 auto; margin-top:50px;background-color: #C40000; text-align: center; color: #fff; line-height: 40px;}

.main{ width: 398px; height: 400px;border: 1px solid #c40000;margin: 0 auto;}

p{ width: 400px; height: 30px; margin-top: 10px; }

b{width: 90px; height: 30px; line-height: 30px; text-align: center;font-size: 13px;color:#838383;border: 1px solid #ccc; display: block; float: left; margin-left: 5px;}

span{ width: 90px; height:28px;line-height:28px;border: 1px solid #ccc; font-size: 13px;color:#838383;padding: 4px 4px; text-align: center;}

button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}

button:hover {cursor: pointer;}

.check{ border:3px solid red; color: red;width: 87px; height: 27px; line-height: 27px;}

$(function(){

$("span").click(function(){

if($(this).hasClass("check")){

$(this).removeClass("check");

}else{

$(this).addClass("check").siblings("span").removeClass("check");

}

});

})

版本

ONE A2001

ONE A0001

ONE A1001

机身颜色

白色

黑色

金色

套餐

套餐1

套餐2

套餐3

加入购物车

打开购物车

批改老师：欧阳批改时间：2019-04-29 09:16:16

老师总结：完成的不错，常用的css样式，可以写成公用文件，有新项目，可以直接使用。继续加油。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！