CSS之幻灯片

最新推荐文章于 2021-08-04 01:46:08 发布

靳小霞

最新推荐文章于 2021-08-04 01:46:08 发布

阅读量397

点赞数

分类专栏： Html5 CSS 文章标签： css

本文链接：https://blog.csdn.net/u012493556/article/details/52794403

版权

CSS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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">1</a>
<a href="#a2">2</a>
<a href="#a3">3</a>
<a href="#a4">4</a>
<a href="#a5">5</a>
</div>
    </div>

</body>
</html>

靳小霞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之幻灯片

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; font:normal 12px/1.5em Verda
复制链接

扫一扫