html手寫代碼怎麽實現這樣的標題欄啊 求大神指點

這個效果可以有很多種方法來實現的，這裏為妳演示最簡單的壹種，假設妳的總長是600像素，兩個標題欄為並排顯示的效果，CSS樣式如下：

<style type="text/css">

#box {width:600px; margin:20px auto}

#box .left,#box .righ {width:280px; font-weight:bold; line-height:25px; border-bottom:solid 2px #9e193f}

#box .left {float:left}

#box .righ {float:right}

#box .left_l {float:left; display:inline-block; width:85px; font-size:13px; background:#9e193f; color:#fff; padding-left:10px}

#box .righ_r {float:right; font-size:10px; color:#9e193f}

</style>

DIV編寫格式如下：

<div id="box">

<div class="left">

<span class="left_l">學校簡介</span>

<span class="righ_r">詳情</span>

</div>

<div class="righ">

<span class="left_l">動態信息</span>

<span class="righ_r">更多</span>

</div>

</div>

直接復制以上代碼，產生的結果如下：

如果《學校簡介》與《動態信息》是圖片，可在相應的DIV中使用：

<img src="圖片路徑/圖片名稱">即可。