1、给div加入css:position: relative
2、然后给a加css:position: absolute
3、给不同的a标签设计宽高和位置就行。
当然,
表格也行,
不过现在html很少用表格了,
比如div里有多个a1、给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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)