在设计个人网站的图片面板时，目标是展示一组高质量的图片，同时确保用户能够轻松地浏览和了解每张图片的内容

本文链接：https://blog.youkuaiyun.com/blog_programb/article/details/107186296

在设计个人网站的图片面板时，目标是展示一组高质量的图片，同时确保用户能够轻松地浏览和了解每张图片的内容。以下是一个关于如何设计图片面板的简要指南，包括HTML和CSS代码示例。

设计思路
响应式布局：确保图片面板在不同屏幕尺寸上都能良好地显示。
图片展示：使用标签来展示图片，并考虑添加标题或描述。
布局和样式：使用CSS来控制图片的排列、大小、间距和过渡效果。
交互：考虑添加鼠标悬停效果，如放大或添加阴影。
HTML (index.html)
html

个人网站 - 图片面板

图片1的描述

图片2的描述

CSS (styles.css) css body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 15px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.image-item {
position: relative;
width: calc(50% - 30px); /* 调整为50%来展示两列，如果需要更多列，可以调整这个值 */
margin-bottom: 30px;
}

.image-item img {
width: 100%;
display: block;
transition: transform 0.3s ease; /* 添加过渡效果 */
}

.image-item:hover img {
transform: scale(1.1); /* 鼠标悬停时放大图片 /
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); / 添加阴影 */
}

.image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /* 背景色半透明 /
color: #fff;
padding: 10px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease; / 添加过渡效果 */
}

.image-item:hover .image-caption {
opacity: 1; /* 鼠标悬停时显示标题 */
}

/* 响应式设计 /
@media (max-width: 768px) {
.image-item {
width: 100%; / 在小屏幕上显示单列 */
}
}
这个示例代码创建了一个包含图片和描述的简单图片面板。每张图片都有一个标题（
image-caption
），它在鼠标悬停时显示出来。CSS中的
flex
布局使图片能够灵活地适应不同的屏幕尺寸，而
transition
属性则添加了平滑的动画效果。

请确保将
image1.jpg
和
image2.jpg
替换为你自己的图片路径，并根据需要添加更多的

来展示更多图片。同时，记得在标签的 alt 属性中添加适当的描述性文本，以提高网站的无障碍访问性。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200707173033871.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dfcHJvZ3JhbWI=,size_16,color_FFFFFF,t_70)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="programb" />
<meta name="description" content="programb" />
<title>programb</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>
<script type="text/javascript" src="js/jquery.touchwipe.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="pikachoose">
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="http://www.programb.com" target="_blank"><img src="images/1.jpg"/></a><span>This is an example of the basic theme.</span></li>
        <li><a href="http://www.programb.com" target="_blank"><img src="images/2.jpg"/></a><span>jCarousel is supported and can be integrated with PikaChoose!</span></li>
        <li><a href="http://www.programb.com" target="_blank"><img src="images/3.jpg"/></a><span>Be sure to check out <a href="http://www.programb.com">PikaChoose.com</a> for updates.</span></li>
        <li><a href="http://www.programb.com" target="_blank"><img src="images/4.jpg"/></a><span>You can use any type of html you want with PikaChoose</span></li>
        <li><a href="http://www.programb.com" target="_blank"><img src="images/5.jpg"/></a><span>PikaChoose survives on your donations! Keep the project alive with a donation.</span></li>
    </ul>
</div>
<script language="javascript">
$(document).ready(function (){
        $("#pikame").PikaChoose({carousel:true, carouselVertical:true});
});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0">
    <p>programb：<a href="http://www.programb.com/" target="_blank">programb</a>　programb：<a href="http://www.programb.com/" target="_blank">programb</a>　programb：<a href="http://programb.com/service/" target="_blank">programb</a></p>
    <p>programb</p>
    <p></p>
    <p><p>programb</p><p><br /></p><p>programb：</p><p>programb</p><p>programb&lt;!-- programb --&gt;&lt;!-- programb --&gt;programb</p><p>programb</p></p>
    <p style="margin:20px 0"></p>
</div>
</body>
</html>


body{font-family:Helvetica, sans-serif;}

.pikachoose {width: 520px; margin: 0 auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; }
.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
    float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: middle; overflow: hidden;}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%;}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; 
    color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
    text-align:right; position:absolute; top:15px; right:15px; }

/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
.pika-thumbs li{width: 90px; height:55px;}
.pikachoose{width:680px; position:relative;}
#pikame{width: 150px;}
.pika-thumbs {margin: 10px 0 0 17px; width:250px;position: absolute;top: 10px;right: 30px;}
.pika-thumbs li { margin: 5px 5px;}

/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika{position:absolute;top:35px;right:20px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 125px;height: 230px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width:  125px; height: 230px;}
.jcarousel-skin-pika .jcarousel-item-vertical { margin-top: 10px;}