爱奇艺主界面

最新推荐文章于 2024-05-08 23:23:17 发布

原创最新推荐文章于 2024-05-08 23:23:17 发布 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

本文介绍了一个基于HTML、CSS和JavaScript实现的爱奇艺网页设计案例，通过鼠标悬停在不同列表项上，可以预览相应的图片。此设计包含一个图片展示区和一个列表区域，列表中的每个项目都链接到特定的图片，当鼠标移到列表项上时，展示区的图片会相应地更换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱奇艺</title>
    <link href="爱奇艺.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div>
    <div class="two">
        <img  id="pic" src="秋蝉.png" alt="">
    </div>
    <div class="one">
        <ul>
            <li href="秋蝉.png" onmouseover="changepicture(this)">秋蝉</li>
            <li href="成化十四年.png" onmouseover="changepicture(this)">成化十四年</li>
            <li href="猎狐.png" onmouseover="changepicture(this)">猎狐</li>
            <li href="天醒之路.png" onmouseover="changepicture(this)">天醒之路</li>
            <li href="青你2.png" onmouseover="changepicture(this)">青你2</li>
            <li href="王牌对王牌.png" onmouseover="changepicture(this)">王牌对王牌</li>
            <li href="彼岸花.png" onmouseover="changepicture(this)">彼岸花</li>
        </ul>
    </div>
</div>
<script>
    function changepicture(which) {
        var ph=document.getElementById("pic");
        var link=which.getAttribute("href");
        ph.setAttribute("src",link);
    }
</script>
</body>
</html>

CSS

ul{
    list-style: none;
    background-color: rgba(37, 33, 24, 0.521);
    margin: 0px;
    padding: 0px;
    height: 550px;
    cursor:pointer;
}
li{
    width: 180px;
    height: 25px;
    color: rgb(250, 248, 248);
    font-size: 18px;
    padding-top: 15px;
    margin-left: 34px;
}
img{
    width: 1102px;
    height: 550px;
    cursor:pointer;
}
.one{
    position: absolute;
    left: 860px;
    display: inline-block;
}
.two{
    display: inline-block;
}
li:hover{
    background-color: rgba(30, 26, 26, 0.6);
    transform: scale(1.4);
}

效果图

在这里插入图片描述