html css制作家用商品分类页面

html css制作家用商品分类页面,第1张

<!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+

1、商品分类的基本方法按商品标准的表达形式分为文件标准和实物标准。文件标准是以文字包括表格、图形等的形式对商品质量所做的统一规定。绝大多数商品标准都是文件标准。

2、文件标准在其开本、封面、格式、字体、字号等方面都有明确的规定,应符合2-81《标准化工作导则标准出版印刷的规定》的有关规定。

3、实物标准是指对某些难以用文字准确表达的质量要求如色泽、气味、手感等,由标准化主管机构或指定部门用实物做成与文件标准规定的质量要求完全或部分相同的标准样品,作为文件标准的补充,同样是生产、检验等有关方面共同遵守的技术依据。例如粮食、茶叶、羊毛、蚕茧等农副产品,都有分等级的实物标准。实物标准是文件标准的补充,实物标准要经常更新。

上面那行字,设置属性text-derection为under-line这样就会有下划线....

下面菜单用一个DIV里面嵌套五个DIV。

每个DIV的宽高设置好。

第一个DIV的渐变效果代码略复杂,可以找个图做背景,商品分类和全部分类超链接设置属性disaplay为block,一个左浮动一个右浮动,行高属性(line-height)设置成与DIV的高度一直,这样垂直才会居中,下面的应该大同小异。

用DISAPLAY设置为BLOCK之后会变成块级元素,下面的超链接全都要设置成左浮动,像【家用电器】那样的,你可以直接打空格控制缩进距离,也可以调整左边距。。。

嗯。。。不懂可以继续问。。。本人大一,HTML学的还凑合


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6286646.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存