html怎么制作商品,html制作彩妆热卖产品列表

效果图

html布局

彩妆热卖产品列表

大家都喜欢的彩妆

• 1Za姬芮新能真皙美白隔离霜 35g

  

  ￥62.00 最近69122人购买

• 2美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml

  

  ￥89.00 最近13610人购买

• 3菲奥娜水漾CC霜40g

  

  ￥59.90 最近13403人购买

• 4DHC 蝶翠诗橄榄卸妆油 200ml

  

  ￥169.00 最近16757人购买

css样式

body, p, ul, li {

margin:0;

padding:0;

}

ul, li {

list-style-type:none;

}

body {

background-color:#eee7e1;

font-size:12px;

}

img {

border:0;

}

#cosmetics {

width:255px;

background-color:#FFF;

}

#cosmetics .title {

font-size:14px;

font-weight:bold;

color:#FFF;

background-color:#e9185a;

height:35px;

line-height:35px;

padding-left:10px;

}

#cosmetics li {

border-bottom:1px #a8a5a5 dashed;

line-height:30px;

padding-left:2px;

}

#cosmetics li div {

display:none;

text-align:center;

}

#cosmetics a {

color:#666666;

text-decoration:none;

}

#cosmetics a:hover {

color:#e9185a;

}

#cosmetics a span {

color:#FFF;

font-weight:bold;

margin-right: 10px;

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

background: #373b3c;

line-height: 20px;

text-align: center;

}

#cosmetics a:hover span {

color:#FFF;

background:url(../image/dot_02.gif) 0 5px no-repeat;

}

#cosmetics a:hover span{

background: #e9185a;

}

#cosmetics a:hover div {

display:block;

}

举报/反馈