用table给 通报名称 那一行加一个th标签就可以居中。
如果不用table,用div或者其他标签的话你可以在最外层加一个下边框:
border-bottom: 1px solid red然后里面每一项,比如说是li,就给li加样式:
height: 30pxline-height: 30px
text-align: center
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#666font:12pxline-height:25px}
body,ul,li,ol,dl,dt,dd{ margin:0pxpadding:0px}
ul,li,ol,dl,dt,dd{ display:blocklist-style:none}
.main{ width:940pxpadding:0px 10pxmargin:0px autobackground:#FFF}
.lfmain{ width:400pxfloat:left}
.rfmain{ width:530pxfloat:right}
.cls{ clear:both}
.news{ border:solid 1px #09C}
.news dt{ height:35pxbackground:#09Cpadding-left:30px}
.news dt ul li{ width:100pxfloat:leftheight:35pxline-height:35pxtext-align:centercolor:#FFF}
.news dt ul .cli{ background:#FFFcolor:#039}
.news dt ul .dli{ background:#0FFcolor:#039}
.news dd{ padding:10px}
.news dd li{ height:25pxoverflow:hidden}
.h10{ height:10pxoverflow:hidden}
</style>
</head>
<body>
<script language="javascript">
function qh(i,ttclass,ttid,nrid,num){
//i 是当前id编号 如id=tt2 i的值应该为2
//ttclass 为当前显示栏目标题类名称 如'cli'
//ttid 是标题id去掉数字部分,如 id=tta3取值应该为'tta'
//nrid 是内容区域的id去掉数字部分
//num 有几个选项 取值正整数
for(m=1m<=numm++){
if(i==m){
document.getElementById(nrid+i).style.display="block"
document.getElementById(ttid+i).className=ttclass
}else{
document.getElementById(nrid+m).style.display="none"
document.getElementById(ttid+m).className=""
}
}
}
</script>
<div class="main">
<div class="lfmain">
<dl class="news">
<dt>
<ul>
<li class="cli" id="tt1" onmouseover="qh(1,'cli','tt','nr',3)">本站公告</li>
<li id="tt2" onmouseover="qh(2,'cli','tt','nr',3)">行业资讯</li>
<li id="tt3" onmouseover="qh(3,'cli','tt','nr',3)">优惠政策</li>
</ul>
</dt>
<dd>
<ul id="nr1" style="display:block">
<li>男人最担心的事情没钱,女人最担心的男人没钱</li>
<li>请不要抱怨这个社会,你要学会适应这个社会</li>
<li>在学校有老师指导,到社会别人都想看你的笑话</li>
<li>周六晚,我爸给说很担心我</li>
</ul>
<ul id="nr2" style="display:none">
<li>最爱国的事情凤姐去美国,终于不恶心中国人</li>
<li>最流行安慰话:元芳,你怎么看?</li>
<li>在我们还没有上大学,工作是管分配</li>
<li>在我们上小学,是要交学费</li>
</ul>
<ul id="nr3" style="display:none">
<li>昨天已经过去,明天还没有到来,今天正在进行</li>
<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>
<li>机会是给有准备的人提供的</li>
<li>在我们上小学,是要交学费</li>
</ul>
</dd>
</dl>
<div class="h10"></div>
<dl class="news">
<dt>
<ul>
<li class="cli" id="tta1" onmouseover="qh(1,'cli','tta','nra',3)">本站公告</li>
<li id="tta2" onmouseover="qh(2,'cli','tta','nra',3)">行业资讯</li>
<li id="tta3" onmouseover="qh(3,'cli','tta','nra',3)">优惠政策</li>
</ul>
</dt>
<dd>
<ul id="nra1" style="display:block">
<li>男人最担心的事情没钱,女人最担心的男人没钱</li>
<li>请不要抱怨这个社会,你要学会适应这个社会</li>
<li>在学校有老师指导,到社会别人都想看你的笑话</li>
<li>周六晚,我爸给说很担心我</li>
</ul>
<ul id="nra2" style="display:none">
<li>最爱国的事情凤姐去美国,终于不恶心中国人</li>
<li>最流行安慰话:元芳,你怎么看?</li>
<li>在我们还没有上大学,工作是管分配</li>
<li>在我们上小学,是要交学费</li>
</ul>
<ul id="nra3" style="display:none">
<li>昨天已经过去,明天还没有到来,今天正在进行</li>
<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>
<li>机会是给有准备的人提供的</li>
<li>在我们上小学,是要交学费</li>
</ul>
</dd>
</dl>
</div>
<div class="rfmain">
<dl class="news">
<dt>
<ul>
<li class="dli" id="nn1" onmouseover="qh(1,'dli','nn','na',3)">本站公告</li>
<li id="nn2" onmouseover="qh(2,'dli','nn','na',3)">行业资讯</li>
<li id="nn3" onmouseover="qh(3,'dli','nn','na',3)">优惠政策</li>
</ul>
</dt>
<dd>
<ul id="na1" style="display:block">
<li>男人最担心的事情没钱,女人最担心的男人没钱</li>
<li>请不要抱怨这个社会,你要学会适应这个社会</li>
<li>在学校有老师指导,到社会别人都想看你的笑话</li>
<li>周六晚,我爸给说很担心我</li>
</ul>
<ul id="na2" style="display:none">
<li>最爱国的事情凤姐去美国,终于不恶心中国人</li>
<li>最流行安慰话:元芳,你怎么看?</li>
<li>在我们还没有上大学,工作是管分配</li>
<li>在我们上小学,是要交学费</li>
</ul>
<ul id="na3" style="display:none">
<li>昨天已经过去,明天还没有到来,今天正在进行</li>
<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>
<li>机会是给有准备的人提供的</li>
<li>在我们上小学,是要交学费</li>
</ul>
</dd>
</dl>
</div>
<div class="cls"></div>
</div>
</body>
</html>
title鼠标滑过时显示的文字提示,用户体验上很重要。当然不必要所有的img标签都加此属性,比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。
格式为:<img src="图片路径" alt="logo" title="首页" />