那位高手能用HTML帮我写一个产品分类导航啊？在线等_随笔

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

<!DOCTYPE HTML>

<head>

<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]>

<![endif]-->

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<ul>

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

</ul>

</div>

<div>

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

首页代码index.html

//script代码，参数分别是，本页地址，本页名称，跳转页地址

function redirect(u, n, g){

location.href = g + '?url=' + u + '&pn=' + encodeURI(n)

}

//html代码，这里向下一个页面传的是本页的页面名称和地址

产品页代码product.html

//script代码

function GetRequest() {

var url = location.search //获取url中"?"符后的字串

var theRequest = new Object()

if (url.indexOf("?") != -1) {

var str = url.substr(1)

strs = str.split("&")

for(var i = 0 i < strs.length i ++) {

theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])

}

return theRequest

}

var param = GetRequest()

window.onload = function(){

//一般来说，当前所在页面不需要加链接

document.getElementById('d').innerHTML = '<a href="'+ param.url +'">'+ decodeURI(param.pn) +'</a> -> 产品页'

}

//html代码，导航所在容器

其他页面大致相同

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7019129.html

那位高手能用HTML帮我写一个产品分类导航啊？在线等

发表评论

评论列表（0条）