商品分类用CSS怎么写？

html-css09

商品分类用CSS怎么写？,第1张

根据这张图片看总体是左右分布，那么先得写个左右板块，但板块最好都不要设置高，因为并不知道到底有多少商品。然后左边可以用<ul><li>,右边上面是热门品牌，下面是手机通讯，所以可以考虑再分个上下板块，也不要设置高，也可以用<ul></li>。大体就这样。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0padding: 0box-sizing:border-box}

a{color:#666text-decoration: none}

.menu{width:220px}

.menu h2{width:100%height: 36pxline-height: 36pxfont-size:18pxpadding-left: 10pxbackground: #0F7CBF}

.menu h2 a{color:#fff}

.menu .item h3{height: 30pxline-height:30pxpadding-left:15pxbackground: #E4F1FA}

.menu .item h3 a{color:#0F7CBFfont-size: 14px}

.menu .item p{padding: 15pxline-height: 18px}

.menu .item p a{font-size: 12px}

</style>

</head>

<body>

<div class="menu">

<h2><a href="#">家用电器</a></h2>

<div class="item">

<h3><a href="#">大家电</a></h3>

<p>

<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>

<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>

<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>

</p>

</div>

<div class="item">

<h3><a href="#">大家电</a></h3>

<p>

<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>

<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>

<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>

</p>

</div>

<div class="item">

<h3><a href="#">大家电</a></h3>

<p>

<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>

<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>

<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>

</p>

</div>

<div class="item">

<h3><a href="#">大家电</a></h3>

<p>

<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>

<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>

<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>

</p>

</div>

</div>

</body>

</html>

兼容IE8+