Dreamweaver图片轮播代码应该怎么设CSS样式?
在使用DivCss页面制作过程中,经常会遇到翻页效果制作,对于没有做过的朋友来讲,用Div+Css做翻页效果的确是件难事,不过一旦找到正确的方法,难处即会迎刃而解,而且可以重复利用,可谓一劳永逸。 本文为您介绍一个简单的翻页效果制作方法,希望可以对您有所帮助。
首先,预想一下翻页效果的样式,如图一所示,页码首尾是上一页和下一页的翻页,当上一页为不可点击时状态为灰色,当前页和鼠标悬浮为黑色背景。
第二步,编写Html代码如下:
<div class="black">
<span class="disabled"> < </sp...全部
在使用DivCss页面制作过程中,经常会遇到翻页效果制作,对于没有做过的朋友来讲,用Div+Css做翻页效果的确是件难事,不过一旦找到正确的方法,难处即会迎刃而解,而且可以重复利用,可谓一劳永逸。
本文为您介绍一个简单的翻页效果制作方法,希望可以对您有所帮助。
首先,预想一下翻页效果的样式,如图一所示,页码首尾是上一页和下一页的翻页,当上一页为不可点击时状态为灰色,当前页和鼠标悬浮为黑色背景。
第二步,编写Html代码如下:
<div class="black">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#page2">2</a>
<a href="#page3">3</a>
<a href="#page4">4</a>
<a href="#page5">5</a>
<a href="#page6">6</a>
<a href="#page7">7</a>
。
。。
<a href="#page199">99</a>
<a href="#page200">100</a>
<a href="#page22"> > </a>
</div>
看以上代码的黑体字部分,这两处没有链接,所以使用了内联元素标签span,由于上一页的箭头是不可点击的灰色,所以需要给它添加特殊样式disabled,第一页页码是当前状态,需要添加特殊样式current。
第三步,编写CSS样式,代码如下:
<style type="text/css">
<!--
body {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
。
black {
margin:3px;
padding:7px;
text-align:center;
}
。black a {
border:1px solid #000;
color:#000;
margin:2px;
padding:2px 5px;
text-decoration:none;
}
。
black a:hover {
background:#000;
border:1px solid #000;
color:#FFFFFF;
}
。black span。current {
background:#000;
border:1px solid #000;
color:#FFF;
font-weight:bold;
margin:2px;
padding:2px 5px;
}
。
black span。disabled {
border:1px solid #EEE;
color:#DDD;
margin:2px;
padding:2px 5px;
}
-->
</style>
以上代码中几点需要注意的是:
1。
。black的样式中必须带有text-align:center;才能让所有页面居中显示;
2。black a中的外间距margin和内间距padding是关键,它们决定页面间的距离;
3。
div中的链接不能加浮动float,否则所有页码都会偏向float的方向;
将这些代码复制到页面中,然后预览,翻页效果应该就会出现了,而且大家可以举一反三重复利用,修改翻页的背景和间距,以及悬浮效果等。
收起