정적 윤파도 배치

코드를 바로 붙였어요.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>       title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .tab li{
            list-style: none;
        }
        .box{
            width: 653px;
            height: 350px;
            border: 3px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .box .tab{
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -68px;
            overflow: hidden;
            background-color: aqua;
            width: 130px;
            border-radius: 20px;
        }
        .box .tab li{
            width: 10px;
            height: 10px;
            margin: 5px 10px;
            background: snow;
            float: left;
            border-radius: 50%;
            cursor: pointer;
        }
        .box .tab li.active{
            background-color: red;
        }

        .box .btn li{
            position: absolute;
            width: 30px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            font-weight: bolder;
            top: 50%;
            margin-top: -15px;
            display: none;

        }
        .box .btn .left{
            left: -5px;
            border-radius: 0 50% 50% 0;
        }
        .box .btn .right{
            right: -5px;
            border-radius: 50% 0 0 50%;
        }
        .box:hover .btn li{
            display: block;
        }
        .box .btn li:hover{
            background: rgba(0,0,0,0.8);
            color: white;
            cursor: pointer;
        }










    style>
head>
<body>

<div class="box">
    <img src="//img.alicdn.com/tfs/TB1N6Dqff9TBuNjy0FcXXbeiFXa-520-280.jpg_q90" width="653" height="350">
    <ul class="tab">
        <li>li>
        <li class="active">li>
        <li>li>
        <li>li>
    ul>

    <ul class="btn">
        <li class="left"><li>
        <li class="right">>li>
    ul>
div>


body>
html>
정적 윤파도 배치

좋은 웹페이지 즐겨찾기
