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

步骤：1.布局分析

2.敲代码

考察知识点：
1.类选择器（素材第四天）
2.CSS关于display,padding,margin的应用
3.如何用div布局

总结：
如果想让一行有两组以上的字块，显示就要用inline-block
想让字块文本在box内缩进，要设置类的是带有这字块的最外层div而不是带文字的内部标签（为什么在内部标签设置调margin或者padding文字都不动？）

代码：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 285px; height: 445px; background: rgb(255, 255, 255); border: 3px solid #cacaca; }

.name {
text-decoration: none;
padding: 0px 10px 8px 14px;
}

.name a {
text-decoration: none;
padding: 0px 18px 8px 0px;
color: #000;
}

.discount {
padding: 0px 13px 1px 9px;
color: #fd3f31;
}

.discount a {
text-decoration: none;
padding: 0px 2px 1px 1px;
color: #fd3f31;
border: 1px solid #fd3f31;
}

img {
width: 100%;
}

.par {
margin: 7px 2px 5px 10px;
padding: 1px 1px 1px 1px;
}

.price {
color: #fd3f31;
font-size: 24px;
padding: 1px 1px 3px 9px;
}

.region {
margin: 2px 4px 48px 108px;
color: grey;
font-size: 12px;
}

.info {
padding: 11px 1px 2px 10px;
border-top: 1px solid #cacaca;
}

.sold {
padding: 11px 1px 1px 1px;
color: #000;
}

.mail a {
padding: 1px 3px 3px 1px;
margin: 3px 2px 2px 133px;
border: 1px solid #2dfd03;
color: #2dfd03;
text-decoration: none;
}

</head> <body> <div class="box"> <img src="淘宝.jpg" alt=""> <div class="name"> <a href="#">2020夏季新款连衣裙女赫本风中长款拼接碎花裙气质高腰显瘦长裙子</a> </div>


劵 100元


¥119.9
广东 广州


月销 2589
包邮

</body>
posted @ 2020-08-24 13:07  另一种开始  阅读(495)  评论(0)    收藏  举报