【项目3-2】多肉植物网站

最新推荐文章于 2022-09-02 20:45:28 发布

weixin_30682127

最新推荐文章于 2022-09-02 20:45:28 发布

阅读量1.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签：人工智能

原文链接：http://www.cnblogs.com/cimuly/p/7219948.html

本文详细分析了一个多肉植物网站的前端页面结构和样式效果，包括header、商品展示、section和footer的布局，以及使用CSS实现的圆角边框、悬停动画和三角形效果。通过HTML和CSS的结合，为每个商品创建了具有动态显示的文字层和交互效果。

页面结构 / 样式效果分析：

细节分析：

① 页面头部由 header 标签嵌套 img 标签。

② 每个是商品由 div 标签嵌套 img 标签构成，商品上面的文字层由 div 标签嵌套 h3 和 p 标签构成。

③ 商品列表下方的文字由 section 标签嵌套 p 标签构成，页面最下面的部分由 footer 标签嵌套 p 标签和 div 标签构成。

④ “最新肉肉”按钮用 css 圆角边框。

⑤ 当鼠标悬停到每个商品上面时，会显示出文字信息的 div 层，该层上应用了旋转和过渡组合，形成了旋转出现的动画效果，z-index 值设置为 4000，因为要显示在最上面。

⑥ 商品图片层中间还有两个交汇的三角形的效果，它们不是两个 div 构成，而是使用 css 伪选择器 “:before” 和 “:after” 结合 css3 旋转和过渡、定位等给商品 div 前后添加的动画背景。

代码实现：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/succulent.css">
    <title>多肉商城</title>
</head>
<body>
    <header>
        <img src="images/head.jpg">
    </header>
    <div class="border-radius">最新肉肉</div>
    <div class="main">
        <div class="view">
            <img src="images/1.jpg" alt="">
            <div class="hover">
                <h3>多肉仙人掌</h3>
                <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
            </div>
        </div>
        <div class="view">
            <img src="images/7.jpg" alt="">
            <div class="hover">
                <h3>创意组合</h3>
                <p>