一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
不知道可不可以用js,我这里有一个以前收藏起来的贴上来，看看可不可以帮助你,下面是代码（图片可以自己换换）：<style>
body{
padding: 0px
margin: 0px
font: 70% verdana, geneva, arial, helvetica, sans-serif
color: #000
text-align: center
}
#outer{
padding: 0px
margin: 0px
width: 800px
text-align: center
}
#focus{
border: #ccc 2px solid
margin: 0px
padding: 0px
padding-top: 15px
background: url(/images/tile.gif) #eee repeat-y left top
width:694px
position: relative
height: 180px
}
#description{
width:550px
height:150px
overflow:hidden
margin-right:15px
float:left
}
.dis{
float:left
width:40px
text-align: center
padding-top:50px
cursor:pointer
}
#description ul, #description li {
float:left
display: inline
margin: 0
padding: 0
height:150px
}
.view_pic a:active,
.view_pic a:visited,
.view_pic a:link {
display: inline
margin: 0
padding: 0
padding-left: 5
padding-right: 5
text-decoration: none
}
.view_pic a:hover {
color: #ffffff
display: inline
text-decoration: none
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=LayerMenu style="display:none z-index: 1000filter: alpha(opacity=0)position: absoluteleft:384pxtop:69pxwidth:126pxheight:20pxborder:1px solid greenbackground:#e11padding:2pxfont-size:12px">抱歉,已经到头了!
</div>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" />
</div>
<div id=description>
<div id="view_pic0" style="height:100pxwidth:1650px">
<ul id="view_pic" class=view_pic>
<li><a href="#"><img src="png-0001.png"/></a></li>
<li><a href="#"><img src="png-0002.png"/></a></li>
<li><a href="#"><img src="png-0003.png"/></a></li>
<li><a href="#"><img src="png-0004.png"/></a></li>
<li><a href="#"><img src="png-0005.png"/></a></li>
<li><a href="#"><img src="png-0006.png"/></a></li>
<li><a href="#"><img src="png-0007.png"/></a></li>
<li><a href="#"><img src="png-0008.png"/></a></li>
<li><a href="#"><img src="png-0009.png"/></a></li>
<li><a href="#"><img src="png-0010.png"/></a></li>
<li><a href="#"><img src="png-0011.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
var ele=document.getElementById("description")
var w=ele.clientWidth
var n=20,t=50
var timers=new Array(n)
var k=0doSlide(0)
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)MenuClick()
else{
k+=s
var x=ele.scrollLeft
var d=k*w-x
for(var i=0i<ni++)(
function(){
if(timers[i]) clearTimeout(timers[i])
var j=i
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))},(i+1)*t)
}
)()
}}
</script>
<SCRIPT language=javascript>
var intDelay=30//设置菜单显示速度，越大越慢
var intInterval=5
function MenuClick(){
LayerMenu.filters.alpha.opacity=0
LayerMenu.style.display=""
GradientShow()
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay)
}
else {
LayerMenu.style.display="none"
}
}
GradientClose()
</SCRIPT>
有几个例子 分割线隔开html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:blockbackground: #FFFFFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
........................................................
<style type="text/css">
.b1 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#9BD1FAmargin:0 5px}
.b2 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:2px solid #9BD1FAborder-left:2px solid #9BD1FAmargin:0 3px}
.b3 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 2px}
.b4 {height:2pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 1px}
</style>
接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<br>ssadfsadfsdfdf</br>
<br>ssadfsadfsdfdf</br>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的
.............................................................................
<style type="text/css">
div#nifty{margin: 0 10%background: #9BD1FAwidth: 300pxword-break:break-all}
b.rtop, b.rbottom{display:blockbackground: #FFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}
</style>
<center>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<span style="font-size:16color:#ffffont-family:华文行楷">
家穷人丑一米四九，<br>
小学文化农村户口。<br>
破屋三间病猪一头，<br>
冷锅热灶老婆没有。<br>
今日上网广征女友，<br>
革命道路并肓携手。
</span>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
..........................................
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10pxletter-spacing:1px}
#xsnazzy h1 {font-size:2.5emcolor:#fff}
#xsnazzy h2 {font-size:2emcolor:#06aborder:0}
#xsnazzy p {padding-bottom:0.5em}
#xsnazzy h2 {padding-top:0.5em}
#xsnazzy {background: transparentmargin:1em}
.xtop, .xbottom {display:blockbackground:transparentfont-size:1px}
.xb1, .xb2, .xb3, .xb4 {display:blockoverflow:hidden}
.xb1, .xb2, .xb3 {height:1px}
.xb2, .xb3, .xb4 {background:#cccborder-left:1px solid #08cborder-right:1px solid #08c}
.xb1 {margin:0 5pxbackground:#08c}
.xb2 {margin:0 3pxborder-width:0 2px}
.xb3 {margin:0 2px}
.xb4 {height:2pxmargin:0 1px}
.xboxcontent {display:blockbackground:#cccborder:0 solid #08cborder-width:0 1px}
</style>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>圆角边框</h1>
<p>看看吧<br />http://www.ebookit.cn/index.html</p>
<h2>不使用图片的边框</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
//网络转载…
.........................................................
<style type="text/css">
<!--
#ibox01 {
overflow: hidden
height: 1px
margin-right: 5px
margin-left: 5px
background-color: #CC0000
}
#ibox02 {
height: 1px
margin-right: 3px
margin-left: 3px
border-right-width: 2px
border-left-width: 2px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
overflow: hidden
}
#ibox03 {
height: 1px
margin-right: 2px
margin-left: 2px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
overflow: hidden
}
#ibox04 {
overflow: hidden
height: 1px
margin-right: 1px
margin-left: 1px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
#ibox05 {
overflow: hidden
height: 1px
margin-right: 1px
margin-left: 1px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
#boxcon {
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
.testlayer {
height: 200px
width: 300px
}
.testboxbg {
background-color: #666666
}
.testboxcon {
height: 190px
background-color: #666666
position: relative
}
-->
</style>
<div class="testlayer">
<div id="ibox">
<div id="ibox01" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="boxcon" class="testboxcon"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox01" class="testboxbg"></div>
</div>
</div>
</body>
</html>
