CSS之幻灯片


<html>
<head>
   <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
            font:normal 12px/1.5em Verdana ,Lucida,Arial,Helvetica,"宋体",sans-serif;
        }
        .wrapper{
            width: 400px;
            height: 400px;
            border:1px solid #333333;
            background: #CCCCCC;
        }
        .content{
            width: 380px;
            height: 360px;
            margin: 10px auto 0;
            overflow: hidden;
            border:1px solid #999999;
            background: #FFFFFF;
        }
        .box{
            float: left;
            width: 360px;
            height:350px;
            margin-bottom: 10px;
            padding: 10px;
            overflow: auto;
        }
        .pager{
            width: 380px;
            height: 20px;
            margin: 5px auto;
            text-align: right;
        }
        .pager a{
            padding: 2px 4px;
            text-decoration: none;
            color: #FFFFFF;
            background: #FF0000;
        }
        .pager a:hover{
            color: #000000;
            background: #FFFFFF;
        }
    style>
head>
<body>
   <div class="wrapper">
     <div class="content">
    <div class="box" id="a1">
        <h2>幻灯片的简单模拟h2>
        <p>第一屏p>
    div>
        <div class="box" id="a2">
        <h2>幻灯片的简单模拟h2>
        <p>第二屏p>
    div>
        <div class="box" id="a3">
        <h2>幻灯片的简单模拟h2>
        <p>第三屏p>
    div>
        <div class="box" id="a4">
        <h2>幻灯片的简单模拟h2>
        <p>第四屏p>
    div>
    <div class="box" id="a5">
        <h2>幻灯片的简单模拟h2>
        <p>第五屏p>
    div>
    div>
    <div class="pager">
<a href="#a1">1a>
<a href="#a2">2a>
<a href="#a3">3a>
<a href="#a4">4a>
<a href="#a5">5a>
div>
    div>

body>
html>

你可能感兴趣的:(Html5,CSS)