HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第7章动手实践

7.6 动手实践

学习完前面的内容，下面动手实践一下吧。
请结合给出的素材，运用元素的浮动和定位实现图7-49所示的“焦点图”效果。
在这里插入图片描述

链接：https://pan.baidu.com/s/1H98ySBSkd8h3IRA19AV2mw?pwd=1024
提取码：1024

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>焦点图</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div>
        <img src="images/banner1.jpg" alt="美食" />
        <ul>
            <li></li>
            <li class="one"></li>
            <li></li>
            <li></li>
        </ul>
        <span class="left"></span>
        <span class="right"></span>
    </div>
</body>

</html>

css

@charset "utf-8";

/* CSS Document */
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

div {
    width: 616px;
    height: 237px;
    margin: 20px auto;
    position: relative;
}

ul {
    position: absolute;
    left: 269px;
    top: 212px;
}

li {
    float: left;
    background: url(images/point1.png) no-repeat;
    width: 25px;
    height: 11px;
}

.one {
    background: url(images/point2.png) no-repeat;
}

span {
    display: inline-block;
    background: url(images/arrow1.png) no-repeat;
    width: 49px;
    height: 49px;
    position: absolute;
    left: 20px;
    top: 92px;
}

.right {
    background: url(images/arrow2.png) no-repeat;
    position: absolute;
    left: 550px;
    top: 92px;
}