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

清风微泫

于 2024-04-07 12:28:06 发布

阅读量1.3k

点赞数 6

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_59633478/article/details/137458688

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文指导读者通过HTML和CSS代码实现图7-49所示的焦点图效果，涉及元素浮动、定位以及CSS样式设置，适合初学者实战练习。

摘要由CSDN通过智能技术生成

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;
}