6.15日志

一、主题：完成商品详情页面

二、知识点

1、无序列表

2、浮动

作用：排版更整齐

原理：两个盒子上下排列，给第一个盒子加float，第二个盒子就会附上去。

clear：结束浮动

3、鼠标悬浮时

用

.span2:hover{border-color: #FF6439;
}

4、边角弧度

/* 边角弧度 */border-top-left-radius: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;

三、完成页面步骤

1、先建一个最大的div包括所有东西，

最大div的css样式，

/* 最大的div */
.product-wrap{border: 0px solid red;width: 1200px;margin: auto;height: 600px;
}

2、把大div分为左边和右边，现在左边写一个div，包括住左边的内容，

左边css样式，

/* 左侧最大div的大小 */
.product-preview{border: 0px solid darkblue;width: 470px;height: 580px;float: left;
}
/* 大图片 */
.preview-bigimage>img{width: 470px;height: 470px;/* 图片边角弧度 */border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;
}/* 第一个小图片加边框 */
.img1{border: 2px solid #FF734C;width: 70px;height: 70px;float: left;margin-left: 20px;/* 图片边角弧度 */border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;}
/* 后三个小图片 */
.img2{border: 2px solid whitesmoke;width: 70px;height: 70px;float: left;margin-left: 20px;/* 图片边角弧度 */border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;
}
/* 鼠标悬停显示边框 */
.img2:hover{border-color: #FF6439;
}
/* 整体四个小图片 */
.preview-list-item{margin-left: 27px;margin-top: 10px;
}

3、右边div内容，

提拉米苏(约2磅)
售价￥198市场价￥338已售6264件
材料鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪
包装一次性蛋糕用具
备注品牌：悦轩饼家
配送说明
北京、上海、广州、深圳、天津、重庆、南京、长沙
配送至
郑州
说明
深圳大鹏新区暂时不配送
选择
2磅3磅4磅
加入购物车立即购买
提拉米苏(约2磅)
售价￥198市场价￥338已售6264件
材料鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪
包装一次性蛋糕用具
备注品牌：悦轩饼家
配送说明
北京、上海、广州、深圳、天津、重庆、南京、长沙
配送至
郑州
说明
深圳大鹏新区暂时不配送
选择
2磅3磅4磅
加入购物车立即购买

右边divcss样式，

/* 右侧整个div大小 */
.product-info{border: 0px solid red;width: 480px;height: 650px;float: left;margin-left: 80px;
}
/* 提拉米苏字体样式 */
.product-info-Tlms>p{border: 0px solid red;
}
/* 售价那一行 */
.product-info-Sj{border: 1px solid white;background-color: #F3F5F7;margin-top: -20px;border-top-left-radius: 6px;border-top-right-radius: 6px;
}
/* 材料、包装、备注那三行 */
.product-info-Cl{border: 0px solid red;background-color: #F7F9FA;margin-top: -16px;
}
/* 4磅 */
.span1{display: block;float: left;width: 40px;height: 30px;text-align: center;line-height: 30px;color: black;font-size: 10px;border: 2px solid #FF734C;
}
.span2{border: 2px solid whitesmoke;display: block;width: 40px;height: 30px;float: left;margin-left: 20px;font-size: 10px;text-align: center;line-height: 30px;
}
/* 鼠标悬停时显示边框 */
.span2:hover{border-color: #FF6439;
}
/* 按钮 */
.btn1{margin-top: 50px;margin-left: -172px;border: 1px solid red;width: 108px;height:35px;/* 边角弧度 */border-top-left-radius: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;color: #FF734C;background-color: #FFF0EC;font-weight: bold;
}
.btn2{border: 0px solid red;width: 108px;height:35px;margin-left: 30px;/* 边角弧度 */border-top-left-radius: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;background-color: #FF734C;color: #F7F9FA;font-weight: bold;
}

效果：        

四、项目中的问题？ 

1、图片边角不会写。

解决：百度搜索

2、鼠标悬停事件

解决：百度搜索

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