Css图像滑块的按钮_Css_Button

Css图像滑块的按钮

css button

Css图像滑块的按钮,css,button,Css,Button,我已经写了一个滑块，现在我想把它变成一个布局。但是我的css不够好我的布局： <!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" xml:lang="en" lang="en"> <head

我已经写了一个滑块，现在我想把它变成一个布局。但是我的css不够好

我的布局：

<!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" xml:lang="en" lang="en">
<head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />


    <style type="text/css">
        body
        {
          margin:0px;
          padding:0px;
          font-family:Tahoma;
          color: #666;
          font-size:13px;
          line-height: 1.6;
          background-color: #cccccc;
          text-align: center; 
        }

        #page_container
        {
          text-align:left;  
          margin: 0 auto;   
          width:900px;
          background-color: #fff;
          border: 1px solid #999999;

        }

        #info_container
        {
          padding: 20px 0px 0px 0px;    
          height:90px;
        }
        #image_container
        {
          height:300px;
          background-color: #ae3;
        }       
        #navi_container
        {
          height:35px;
        }
        #content_container
        {
          padding-top:10px; 
          display: inline-block;      
        }
        #content_left
        {
          padding: 20px 20px 20px 20px; 
          width:560px;
          float:left
        }       
        #content_right
        {
          padding: 20px 20px 20px 20px; 
          width:260px;
          float:left
        }   
        #footer_container
        {
          background-color: #eee;
          border:1px solid #eee;
          padding: 20px 20px 20px 20px;
        }







        #right-fade,
        #left-fade {
            background:#333;
            height:300px;
            width:0px;
        }

        .next,
        .prev {
            cursor:pointer;

        }

        .next {


        }

        .prev {


        } 

        .fader {
            margin:0;
            padding:0;
            list-style:none;
            overflow:hidden;
        }

        .fader li {

            text-align:left;
            display:block;
        }       
        .carousel-pagination li {
            display:block;
            float:left;
            width:10px;
            height:10px;
            margin-right:5px;
            cursor:pointer;
            background:#333;
        }

        .carousel-pagination .carousel-pagination-active {
            background:#ff0000;

        }
        .clear {

            clear:left;
        } 


    </style>

</head>

<body>
<br/>
<div id="page_container">
<div id="info_container">
info
</div>
<div id="navi_container">

    <!-- Menu -->
    <div class="clear"></div>
    <div class="menu">
 navi
    </div>
    <!-- Menu    -->

</div>
<div id="image_container">

    <ul class="fader">
        <li><img src="fader/foto/1.jpg" alt="teaser" border="0" align="left" /></li>
    </ul>

</div>

<ul class="carousel-pagination">
    <li class=""></li>
    <li class=""></li>
    <li class="carousel-pagination-active"></li>
</ul>

<span class="prev">left</span>
<span class="next">right</span>


<div class="clear"></div>
<div id="content_container">
<div id="content_left">

      <h1>left</h1>


</div>
<div id="content_right">

      <h3>right</h3>

</div>
</div>
<div id="footer_container">footer</div>
</div>
<br/>
</body>
</html>


标题
身体
{
边际：0px；
填充：0px；
字体系列：Tahoma；
颜色：#666；
字体大小：13px；
线高：1.6；
背景色：#中交；
文本对齐：居中；
}
#分页容器
{
文本对齐：左对齐；
保证金：0自动；
宽度：900px；
背景色：#fff；
边框：1px实心#999999；
}
#信息容器
{
填充：20px 0px 0px 0px；
高度：90px；
}
#图像容器
{
高度：300px；
背景色：#ae3；
}       
#navi_集装箱
{
高度：35px；
}
#内容容器
{
填充顶部：10px；
显示：内联块；
}
#内容左
{
填充：20px 20px 20px 20px；
宽度：560px；
浮动：左
}       
#内容(右)
{
填充：20px 20px 20px 20px；
宽度：260px；
浮动：左
}   
#页脚容器
{
背景色：#eee；
边框：1px实心#eee；
填充：20px 20px 20px 20px；
}
#右褪色，
#左褪色{
背景：#333；
高度：300px；
宽度：0px；
}
下一个
上一篇{
光标：指针；
}
.下一个{
}
上一篇{
} 
.推子{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
李先生{
文本对齐：左对齐；
显示：块；
}       
.carousel分页li{
显示：块；
浮动：左；
宽度：10px；
高度：10px；
右边距：5px；
光标：指针；
背景：#333；
}
.carousel分页。carousel分页处于活动状态{
背景：#ff0000；
}
.清楚{
清除：左；
} 


信息
纳维








左边
正确的
左边
正确的
页脚

像我的图片一样，在按钮的右角有img和navi的左右按钮。谁能帮帮我吗

编辑：

我成功了

<!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" xml:lang="en" lang="en">
<head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />


    <style type="text/css">
        body
        {
          margin:0px;
          padding:0px;
          font-family:Tahoma;
          color: #666;
          font-size:13px;
          line-height: 1.6;
          background-color: #cccccc;
          text-align: center; 
        }

        #page_container
        {
          text-align:left;  
          margin: 0 auto;   
          width:900px;
          background-color: #fff;
          border: 1px solid #999999;

        }

        #info_container
        {
          padding: 20px 0px 0px 0px;    
          height:90px;
        }
        #image_layer
        {
          height:300px;
        }
        #image_container
        {
          height:300px;
          background-color: #ae3;
          position: absolute;
        }       
        #navi_container
        {
          height:35px;
        }
        #content_container
        {
          padding-top:10px; 
          display: inline-block;      
        }
        #content_left
        {
          padding: 20px 20px 20px 20px; 
          width:560px;
          float:left
        }       
        #content_right
        {
          padding: 20px 20px 20px 20px; 
          width:260px;
          float:left
        }   
        #footer_container
        {
          background-color: #eee;
          border:1px solid #eee;
          padding: 20px 20px 20px 20px;
        }







        #right-fade,
        #left-fade {
            background:#333;
            height:300px;
            width:0px;
        }

        .next,
        .prev {
  display: block;
  position: absolute;
  top: 150px;
  cursor: pointer;

        }

        .next {
            right:-20px;

        }

        .prev {

            left:-20px;
        } 

        .fader {
            margin:0;
            padding:0;
            list-style:none;
            overflow:hidden;
        }

        .fader li {

            text-align:left;
            display:block;
        } 
        .carousel-pagination {
              position: relative;
              top:-40px;
              float:right;
        }       
        .carousel-pagination li {
            display:block;
            float:left;
            width:10px;
            height:10px;
            margin-right:5px;
            cursor:pointer;
            background:#333;
        }

        .carousel-pagination .carousel-pagination-active {
            background:#ff0000;

        }
        .clear {

            clear:left;
        } 


    </style>

</head>

<body>
<br/>
<div id="page_container">
<div id="info_container">
info
</div>
<div id="navi_container">

    <!-- Menu -->
    <div class="clear"></div>
    <div class="menu">
 navi
    </div>
    <!-- Menu    -->

</div>
<div id="image_layer">
<div id="image_container">

    <ul class="fader">
        <li><img src="fader/foto/1.jpg" alt="teaser" border="0" align="left" /></li>
    </ul>


<span class="prev">left</span>
<span class="next">right</span>     
</div></div>
<ul class="carousel-pagination">
    <li class=""></li>
    <li class=""></li>
    <li class="carousel-pagination-active"></li>
</ul>



<div class="clear"></div>
<div id="content_container">
<div id="content_left">

      <h1>left</h1>


</div>
<div id="content_right">

      <h3>right</h3>

</div>
</div>
<div id="footer_container">footer</div>
</div>
<br/>
</body>
</html>


标题
身体
{
边际：0px；
填充：0px；
字体系列：Tahoma；
颜色：#666；
字体大小：13px；
线高：1.6；
背景色：#中交；
文本对齐：居中；
}
#分页容器
{
文本对齐：左对齐；
保证金：0自动；
宽度：900px；
背景色：#fff；
边框：1px实心#999999；
}
#信息容器
{
填充：20px 0px 0px 0px；
高度：90px；
}
#图像层
{
高度：300px；
}
#图像容器
{
高度：300px；
背景色：#ae3；
位置：绝对位置；
}       
#navi_集装箱
{
高度：35px；
}
#内容容器
{
填充顶部：10px；
显示：内联块；
}
#内容左
{
填充：20px 20px 20px 20px；
宽度：560px；
浮动：左
}       
#内容(右)
{
填充：20px 20px 20px 20px；
宽度：260px；
浮动：左
}   
#页脚容器
{
背景色：#eee；
边框：1px实心#eee；
填充：20px 20px 20px 20px；
}
#右褪色，
#左褪色{
背景：#333；
高度：300px；
宽度：0px；
}
下一个
上一篇{
显示：块；
位置：绝对位置；
顶部：150px；
光标：指针；
}
.下一个{
右：-20px；
}
上一篇{
左：-20px；
} 
.推子{
保证金：0；
填充：0；
列表样式：无；
溢出：隐藏；
}
李先生{
文本对齐：左对齐；
显示：块；
} 
.carousel分页{
位置：相对位置；
顶部：-40px；
浮动：对；
}       
.carousel分页li{
显示：块；
浮动：左；
宽度：10px；
高度：10px；
右边距：5px；
光标：指针；
背景：#333；
}
.carousel分页。carousel分页处于活动状态{
背景：#ff0000；
}
.清楚{
清除：左；
} 


信息
纳维



左边
正确的





左边
正确的
页脚

感谢收看。

将#image_容器更改为

位置：相对自.prev和.next是绝对值