淘宝产品图片展示：要求提供一个完整的图文混排页面 1、动态显示图片： （1）鼠标悬停在小图片上，小图片加载边框，自动显示大图片； （2）鼠标移动出去以后，小图片上边框消失； 2、自行设计，图文混排，布局合理。可以使用Frameset或Div。

淘宝产品图片展示的图文混排页面设计通常会采用HTML和CSS技术来实现动态效果。以下是关键步骤：

1. **HTML结构**:
使用`<div>`标签创建一个包含商品信息和图片展示区域的基本容器。你可以将图片分为两个部分：
- 小图（thumbnail），如 `<img src="small.jpg" class="hover-image">`
- 大图（large-image），初始隐藏，设置样式如 `style="display:none;"`

2. **CSS样式**:
- `.hover-image` 类用于小图，添加`:hover`伪类处理悬停事件：

     .hover-image:hover {
         border: 1px solid #ccc; /* 边框效果 */
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 加入阴影效果 */
     }
     .hover-image:hover + .large-image { /* 父元素选择器 */
         display: block; /* 当鼠标悬停时，显示大图 */
     }

   - `.large-image` 类用于大图，隐藏默认并设置适当的宽高和位置：

.large-image {
display: none;
width: 80%; /* 或者其他适合的比例 */
height: auto;
margin-top: -10px; /* 调整垂直对齐 */
}

3. **JavaScript (optional)**:
   如果想保持纯前端操作，可以利用CSS的`transition`属性做平滑切换效果。如果需要更复杂的交互，可以编写一些简单的JavaScript来控制图片切换。

4. **图文混排**:
   使用`<p>`, `<span>`, 和 CSS 的 flexbox 或 grid 布局技术来混排文字和图片。比如，你可以设置`.product-info`类作为包含文字的部分，调整其宽度并与图片区分开。

示例代码片段：

<div class="product-container">
<img class="hover-image" src="small.jpg" alt="小图">
<img class="large-image" src="big.jpg" style="display:none;">
<div class="product-info">
<h2>产品名称</h2>
<p>产品描述...</p>
</div>
</div>

<style>
...（上面提到的CSS样式）
</style>