<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
html的示例网页文件
</body>
</html>
css文件 放在和html文件的同一个目录
style.css
html body{
margin:0 auto
}
不知道可不可以用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>
