前端小练习-萌宠相册

一只829

于 2022-03-21 21:14:48 发布

阅读量388

点赞数 2

文章标签： html5 css 前端

本文链接：https://blog.youkuaiyun.com/qq_63533863/article/details/123646240

版权

这篇博客介绍了一个前端小练习，实现了点击小图后上方大图相应变化的效果。HTML用于布局，CSS用于样式设计，JavaScript用于动态更新大图的源。关键点包括将小图a标签的href赋值给大图的src属性，并阻止页面跳转。

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

效果图：

点击小图，上方大图会跟着变。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>萌宠相册001</title>
    
    <link rel="stylesheet" type="text/css" href="css/cute.css" />
	<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
    <div class="contatiner">
        <div class="contatiner-big">
            <img src="img/bigg/1.jpg"  alt="cat1" id="container_big_image">
        </div>
        <ul class="container_small" id="container_small">
            <li><a href="img/bigg/1.jpg"

最低0.47元/天解锁文章