DIV+CSS怎么写出这样的布局?

html-css079

DIV+CSS怎么写出这样的布局?,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>div+css实现列表</title>

<style type="text/css">

body{margin:0pxpadding:0pxfont-size:12pxfont-family:Microsoft Yahei}

ul,li{margin:0padding:0list-style-type:none}

.page{width:900pxmargin:0px auto}

.title{height:26pxline-height:26pxpadding-left:5pxborder-bottom:2px solid #c00font-weight:bold}

.main_table_head{margin-top:5px}

.main_table_data{border:1px solid #dddborder-top:0px}

ul.ul_head{height:26pxline-height:26pxbackground:#CCC}

ul.ul_tr{height:22pxline-height:22px}

ul.ul_head li{text-align:centerfont-weight:bold}

ul.ul_head li,ul.ul_tr li{float:left}

li.li_100{width:100px}

li.li_440{width:438px}

li.li_80{width:80px}

li.li_90{width:90px}

li.li_left{text-align:left}

li.li_center{text-align:center}

li.li_right{text-align:right}

li.li_red{color:#F33}

li.li_bold{font-weight:bold}

</style>

</head>

<body>

<div class="page">

<div class="title">›› 首页 ›› 我的订单</div>

<div class="main_table_head">

<ul class="ul_head">

<li class="li_100">订单号</li>

<li class="li_100">收货人</li>

<li class="li_440">收货地址</li>

<li class="li_90">下单时间</li>

<li class="li_90">结束时间</li>

<li class="li_80">状态</li>

</ul>

</div>

<div class="main_table_data">

<ul class="ul_tr" onmouseover="this.style.background='#efefef'" onmouseout="this.style.background='#fff'">

<li class="li_100 li_bold li_red">▪ 201009241201</li>

<li class="li_100 li_center">莉莉</li>

<li class="li_440">河南郑州</li>

<li class="li_90 li_center">2010-09-24</li>

<li class="li_90 li_center"></li>

<li class="li_80 li_center li_bold li_red">处理中</li>

</ul>

<ul class="ul_tr" onmouseover="this.style.background='#efefef'" onmouseout="this.style.background='#fff'">

<li class="li_100 li_bold li_red">▪ 201009241201</li>

<li class="li_100 li_center">莉莉</li>

<li class="li_440">河南郑州</li>

<li class="li_90 li_center">2010-09-24</li>

<li class="li_90 li_center"></li>

<li class="li_80 li_center li_bold li_red">处理中</li>

</ul>

<ul class="ul_tr" onmouseover="this.style.background='#efefef'" onmouseout="this.style.background='#fff'">

<li class="li_100 li_bold li_red">▪ 201009241201</li>

<li class="li_100 li_center">youyou</li>

<li class="li_440">河南省郑州市</li>

<li class="li_90 li_center">2010-09-24</li>

<li class="li_90 li_center"></li>

<li class="li_80 li_center li_bold li_red">处理中</li>

</ul>

<ul class="ul_tr" onmouseover="this.style.background='#efefef'" onmouseout="this.style.background='#fff'">

<li class="li_100 li_bold li_red">▪ 201009241201</li>

<li class="li_100 li_center">youyou</li>

<li class="li_440">河南省郑州市</li>

<li class="li_90 li_center">2010-09-24</li>

<li class="li_90 li_center"></li>

<li class="li_80 li_center li_bold li_red">处理中</li>

</ul>

<ul class="ul_tr" onmouseover="this.style.background='#efefef'" onmouseout="this.style.background='#fff'">

<li class="li_100 li_bold li_red">▪ 201009241201</li>

<li class="li_100 li_center">youyou</li>

<li class="li_440">河南省郑州市</li>

<li class="li_90 li_center">2010-09-24</li>

<li class="li_90 li_center"></li>

<li class="li_80 li_center li_bold li_red">处理中</li>

</ul>

</div>

</div>

</body>

</html>

discotheque的简称,原意为唱片舞会,起先是指黑人在夜总会按录音跳舞的音乐,70年代实际上成了对任何时新的舞蹈音乐的统称。

与摇滚相比,它的特点是强劲的、不分轻重的、像节拍器一样作响的4/4拍子,歌词和曲调简单。

1977年,因澳大利亚流行音乐小组“比吉斯”(Bee Gees)的电影录音《周末狂热》在美国掀起迪斯科热。迪斯科经常在录音室进行音响合成,制成唱片,但终因节奏单调、风格雷同,于80年代初逐渐被其他节奏不那么显著、速度稍慢的流行舞曲所代替。

<div id=“#mainbox”>

<ul>

<li><a hre="#">添加数据</a></li>

<div class="innerbox"><a href="#">图片</a><a href="#">新闻</a><a href="#">产品</a></di>

</ul>

</div>

css设置:

#mainbox{ width:400pxheight:qutomargin:0px auto}

ul{ list-style:none}

li{list-style:nonewidth:100px}

.innerbox{display:none}

#mainbox ul li a:hover div{display:block}[_______只有css3支持.]

下面的方法用到jquery

<script>jquery1.7min.js</script>

<script>

$(function(){

$("#mainbox li").toggle({function(){

$(".innerbox").show()

},function(){

$(".innerbox").hide()

})

})

不懂得话可以问我

</script>