怎么做HTML焦点图+实例练习

最新推荐文章于 2022-09-21 22:34:26 发布

隐_

最新推荐文章于 2022-09-21 22:34:26 发布

阅读量8.9k

点赞数 4

分类专栏：学习过程实例案例文章标签： HTML CSS 实例焦点图学习

本文链接：https://blog.csdn.net/u012843081/article/details/80376336

版权

本文介绍了如何使用HTML和CSS创建一个焦点图效果，通过实例练习详细讲解了每个步骤，帮助读者掌握焦点图的实现技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图</title>
    <style>
        /* 清空默认边距 */
        *{
            margin:0;
            padding:0;
        }


        div{
            width: 520px;
            height: 280px;
            border: 2px solid #404040;
            margin: 100px auto;
            position:relative;
        }

        /* 左右指引箭头 */
        span{
            width:25px;
            background-color: rgba(15, 15, 15, 0.5);
            font-size:30px;
            color:white;
            text-align:center;
            line-height:45px; /* 用行高撑起盒子的高度  */
        }
        div .left-arrow{
            position:absolute;
            top:117px;
            left:0;
        }
        div .right-arrow{
            position:absolute;
            top:117px;
            right:0;
        }
        /* 左右指引箭头结束 */

        /* 底部导航栏*/
        div ol{