html里面的导航分类怎样增加

html里面的导航分类怎样增加,第1张

比如div里有多个a

1、给div加入css:position: relative

2、然后给a加css:position: absolute

3、给不同的a标签设计宽高和位置就行

当然,

表格也行,

不过现在html很少用表格了,

比如div里有多个a

1、给div加入css:position: relative

2、然后给a加css:position: absolute

3、给不同的a标签设计宽高和位置就行。

当然,表格也行,不过现在html很少用表格了,不明白再问我!

大概弄了个,你参考着来吧。还有问题请找偶。

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<style>

body { margin:0padding:0font-size:12pxfont-family:Arial,"宋体"}

form,div,p,span,label,i,ul,ol,li,dl,dt,dd,fieldset,legend { margin:0padding:0}

h1,h2,h3,h4,h5,h6 { margin:0padding:0font-size:12pxfont-weight:normal}

table,td,input,select,textarea { font-size:12px}

li { list-style:none}

img { vertical-align:middle}

a img { border:none}

header,section,nav,article,aside,footer,hgroup { display:block}

/* .f** : font-size */

.f11 { font-size:11px}

.f12 { font-size:12px}

.f13 { font-size:13px}

.f14 { font-size:14px}

.f16 { font-size:16px}

.f18 { font-size:18px}

.fb,.bold { font-weight:bold}

.fi,.italic { font-style:italic}

/* ti** : text-indent */

.ti0 { text-indent:0}

.tih { text-indent:.5em}

.ti1 { text-indent:1em}

.ti2 { text-indent:2em}

.tiu { text-indent:-10000em}

/* .c* : color */

.c0,a.c0 { color:#000}

.c3,a.c3 { color:#333}

.c6,a.c6 { color:#666}

.c9,a.c9 { color:#999}

.cc,a.cc { color:#ccc}

.cd,a.cd { color:#ddd}

.ce,a.ce { color:#eee}

.cf,a.cf { color:#fff}

.orange,a.orange { color:#f90} /* color-orange */

.red,a.red { color:#f00} /* color-red */

.green,a.green { color:#0f0} /* color-green */

.blue,a.blue { color:#00f} /* color-blue */

/* text-align、float */

.tl,.tal { text-align:left !important}

.tc,.tac { text-align:center !important}

.tr,.tar { text-align:right !important}

.tj,.taj { text-align:justify !important}

.l,.fl { float:left !important}

.r,.fr { float:right !important}

.fn { float:none !important}

.cl { clear:left !important}

.cr { clear:right !important}

.clear { clear:bothfont-size:0visibility:hiddenline-height:0height:0}

.clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden}

.clearfix { zoom:1height:1%}

/*.linkcountry { position:absolutedisplay:blockwidth:100%height:60pxtop:0left:0}*/

.sort h4{ color:#f00float:leftdisplay:inlinefont-size:14pxfont-weight:boldborder:solid 1pxmargin:0 0 0 5pxpadding:5 background:#fe9 no-repeat topwidth:53px

height:25pxline-height:24pxpadding-top:15pxpadding-left:10px}

.sort h4.l3 { padding-top:5pxheight:35px}

.sort h4 a { color:#ff0}

.sort h4 a:hover { color:#f0f}

.sort ul { margin:0 5px 10pxpadding-bottom:10pxborder-bottom:1px dotted #60AECCheight:60pxoverflow:hidden}

.sort ul li{ float:leftline-height:14pxheight:14pxmargin:3px auto 3px -1pxtext-align:centerborder-left:solid 1px #b2b2b2padding:0 5px}

.sort ul li a{ white-space:nowrap}

.sort ul li a.o{ color:#f60}

.sort .sortd{border-bottom:0margin-bottom:0padding-bottom:0}

.cl { clear:left !important}

.cr { clear:right !important}

.clear { clear:bothfont-size:0visibility:hiddenline-height:0height:0}

.clearfix:after { content:"."display:blockheight:0clear:bothvisibility:hidden}

.clearfix { zoom:1height:1%}

</style>

<!--[if IE]>

<script src="http://i3.eachimg.cn/2/j/app/html5.js"></script>

<![endif]-->

</head>

<body>

<header id="header">

<aside class="sort relative">

<div>

<h4>淑女</h4>

<ul>

<li><a href="http://search.eachnet.com/search/6Zuq57q6--146-2.html?_fromid=homepage_CHNlistA01_n&srcid=a3018_29" target="_blank">雪纺</a></li>

<li><a href="http://search.eachnet.com/category/146002-qunzi.html?_fromid=homepage_CHNlistA02_n&srcid=a3018_29" target="_blank" class="o">裙子</a></li>

<li><a href="http://search.eachnet.com/category/146003-zhenzhishan.html?_fromid=homepage_CHNlistA03_n&srcid=a3018_29" target="_blank">针织衫</a></li>

<li><a href="http://search.eachnet.com/category/146001-Txu.html?_fromid=homepage_CHNlistA04_n&srcid=a3018_29" target="_blank">T恤</a></li>

<li><a href="http://search.eachnet.com/search/6L+e6KGj6KOZ--146--------hot-2.html?_fromid=homepage_CHNlistA05_n&srcid=a3018_29" target="_blank">连衣裙</a></li>

<li><a href="http://search.eachnet.com/category/146006-weiyi.html?_fromid=homepage_CHNlistA06_n&srcid=a3018_29" target="_blank">卫衣</a></li>

<li><a href="http://search.eachnet.com/category/143003-danxie.html?_fromid=homepage_CHNlistA07_n&srcid=a3018_29" target="_blank" class="o">单鞋</a></li>

<li><a href="http://search.eachnet.com/category/143004-liangxie.html?_fromid=homepage_CHNlistA08_n&srcid=a3018_29" target="_blank">凉鞋</a></li>

<li><a href="http://search.eachnet.com/category/152003-shipin.html?_fromid=homepage_CHNlistA09_n&srcid=a3018_29" target="_blank">流行饰品</a></li>

<li><a href="http://search.eachnet.com/category/151003-meiti.html?_fromid=homepage_CHNlistA10_n&srcid=a3018_29" target="_blank">美体瘦身</a></li>

<li><a href="http://search.eachnet.com/search/5L+d5rm/--151-2.html?_fromid=homepage_CHNlistA11_n&srcid=a3018_29" target="_blank">保湿</a></li>

<li><a href="http://search.eachnet.com/category/151002-caizhuang.html?_fromid=homepage_CHNlistA12_n&srcid=a3018_29" target="_blank">彩妆</a></li>

</ul>

<div class="clear"></div>

</div>

<div>

<h4>潮男</h4>

<ul>

<li><a href="http://search.eachnet.com/category/142002-Txu.html?_fromid=homepage_CHNlistB01_n&srcid=a3018_29" target="_blank">潮爆T恤 </a></li>

<li><a href="http://search.eachnet.com/search/--140--C------all-2.html?_fromid=homepage_CHNlistB02_n&srcid=a3018_29" target="_blank">绅士皮鞋</a></li>

<li><a href="http://search.eachnet.com/category/141-nanbao.html?_fromid=homepage_CHNlistB03_n&srcid=a3018_29" target="_blank" class="o">休闲挎包</a></li>

<li><a href="http://search.eachnet.com/category/153004-yundongxie.html?_fromid=homepage_CHNlistB04_n&srcid=a3018_29" target="_blank">运动板鞋</a></li>

<li><a href="http://search.eachnet.com/category/152001-pinpaishoubiao.html?_fromid=homepage_CHNlistB05_n&srcid=a3018_29" target="_blank">时尚钢表</a></li>

<li><a href="http://search.eachnet.com/category/148-peijian.html?_fromid=homepage_CHNlistB06_n&srcid=a3018_29" target="_blank">男士配饰</a></li>

<li><a href="http://search.eachnet.com/search/cG9sb+ihqw==-2.html?_fromid=homepage_CHNlistB07_n&srcid=a3018_29" target="_blank">polo衫</a></li>

<li><a href="http://search.eachnet.com/search/6KGs6KGr-2.html?_fromid=homepage_CHNlistB08_n&srcid=a3018_29" target="_blank" class="o">衬衫</a></li>

<li><a href="http://search.eachnet.com/search/5aS55YWL-10-142-2.html?_fromid=homepage_CHNlistB09_n&srcid=a3018_29" target="_blank">夹克</a></li>

</ul>

<div class="clear"></div>

</div>

<div>

<h4>数码</h4>

<ul class="sortd">

<li><a href="http://search.eachnet.com/category/168-shouji.html?_fromid=homepage_CHNlistC01_n&srcid=a3018_29" target="_blank">流行手机</a></li>

<li><a href="http://search.eachnet.com/category/136-mp3.html?_fromid=homepage_CHNlistC02_n&srcid=a3018_29" target="_blank">MP4/MP5</a></li>

<li><a href="http://search.eachnet.com/category/155-shancunka.html?_fromid=homepage_CHNlistC03_n&srcid=a3018_29" target="_blank" class="o">移动存储</a></li>

<li><a href="http://search.eachnet.com/category/165-diannao.html?_fromid=homepage_CHNlistC04_n&srcid=a3018_29" target="_blank">笔记本</a></li>

<li><a href="http://search.eachnet.com/category/154-xiangji.html?_fromid=homepage_CHNlistC05_n&srcid=a3018_29" target="_blank">数码相机</a></li>

<li><a href="http://search.eachnet.com/category/137-shumapeijianshichang.html?_fromid=homepage_CHNlistC06_n&srcid=a3018_29" target="_blank">数码配件</a></li>

<li><a href="http://search.eachnet.com/search/5bmz5p2/55S16ISR-2.html?_fromid=homepage_CHNlistC07_n&srcid=a3018_29" target="_blank" class="o">平板电脑</a></li>

<li><a href="http://search.eachnet.com/search/--154003--C-2.html?_fromid=homepage_CHNlistC08_n&srcid=a3018_29" target="_blank">数码摄像机</a></li>

</ul>

</div>

</aside>


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存