css 让标题根据内容居中

html-css028

css 让标题根据内容居中,第1张

用table给 通报名称 那一行加一个th标签就可以居中。

如果不用table,用div或者其他标签的话你可以在最外层加一个下边框:

border-bottom: 1px solid red

然后里面每一项,比如说是li,就给li加样式:

height: 30px

    line-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="首页" />