HTML学习案例--仿淘宝商品信息

步骤：1.布局分析

2.敲代码

考察知识点：

1.类选择器（素材第四天）

2.CSS关于display,padding,margin的应用

3.如何用div布局

总结：

如果想让一行有两组以上的字块，显示就要用inline-block

想让字块文本在box内缩进，要设置类的是带有这字块的最外层div而不是带文字的内部标签（为什么在内部标签设置调margin或者padding文字都不动？）

代码：

Document
.box { width: 285px; height: 445px; background: rgba(255, 255, 255, 1); border: 3px solid rgba(202, 202, 202, 1) }
{ text-decoration: none; padding: 0 10px 8px 14px }
.name a { text-decoration: none; padding: 0 18px 8px 0; color: rgba(0, 0, 0, 1) }
.discount { padding: 0 13px 1px 9px; color: rgba(253, 63, 49, 1) }
.discount a { text-decoration: none; padding: 0 2px 1px 1px; color: rgba(253, 63, 49, 1); border: 1px solid rgba(253, 63, 49, 1) }
img { width: 100% }
.par { margin: 7px 2px 5px 10px; padding: 1px }
.price { color: rgba(253, 63, 49, 1); font-size: 24px; padding: 1px 1px 3px 9px }
.region { margin: 2px 4px 48px 108px; color: rgba(128, 128, 128, 1); font-size: 12px }
.info { padding: 11px 1px 2px 10px; border-top: 1px solid rgba(202, 202, 202, 1) }
.sold { padding: 11px 1px 1px; color: rgba(0, 0, 0, 1) }
.mail a { padding: 1px 3px 3px 1px; margin: 3px 2px 2px 133px; border: 1px solid rgba(45, 253, 3, 1); color: rgba(45, 253, 3, 1); text-decoration: none }

巴特西

HTML学习案例--仿淘宝商品信息

最新文章

热门文章