css课后小作业

最新推荐文章于 2025-05-10 09:45:10 发布

码代码的小涛

最新推荐文章于 2025-05-10 09:45:10 发布

阅读量74

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/m0_58425326/article/details/131050260

版权

文章介绍了如何使用HTML和CSS创建商品列表布局，并展示了仿小米Logo的动画效果。在商品列表布局中，详细说明了各个元素的样式设置。在实现仿小米Logo的过渡效果时，利用了CSS的伪元素选择器和过渡属性，通过左右平移达到Logo变换的效果。

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

商品列表布局

项目过于简单，就不多做解释了

<body>
    <div class="goods">
        <img src="images/mobile.jpg" alt="">
        <h5 class="goods_title">Apple苹果iPhone 6s Plus（A1699）32G<br /> 金色 移动联通电信4G手机</h5>
        <!-- 注意这里用中文打出来的￥后面会自带空格，想要解决这个问题只需要alt+0165 -->
        <div class="goods_price">
            <span class="now">¥6088</span>
            <span class="orgin">￥6988</span>
        </div>
        <div class="goods_progress">
            已售<em>87%</em>
            <div class="bar">
                <div class="bar-in"></div>
            </div>
            剩余<i>29</i>件
        </div>
        <a href="#" class="goods_buy">立即抢购</a>
    </div>
</body>

</html>

<style>
        body {
            font: 12px/1.5 'microsoft yahei';
            color: #666;
        }

        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            display: inline-block;
        }

        .goods {
            width: 288px;
            height: 458px;
            /* background-color: pink; */
        }

        img {
            width: 100%;
        }

        .goods_title {
            font-size: 14px;
            color: #666;
            font-weight: 400;
            padding: 10px;
        }

        .goods_price .now {
            font-size: 22px;
            color: #e60012;
            padding-left: 10px;
        }

        .goods_price .orgin {
            font-size: 14px;
            font-weight: 700;
            color: #a4a4a4;
            text-decoration: line-through;
        }

        .goods_progress {
            padding-left: 10px;
        }

        .goods_progress .bar {
            display: inline-block;
            width: 130px;
            height: 10px;
            border: 1px solid red;
            border-radius: 65px;
        }

        .goods_progress .bar-in {
            width: 87%;
            height: 10px;
            background-color: red;
        }

        .goods_progress em,
        i {
            color: #e60012;
        }

        i {
            font-style: normal;
        }

        .goods_buy {
            width: 100%;
            height: 50px;
            background-color: #b1191a;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>

写这个项目的时候也遇到了问题，就是用中文输出的￥后面会自带空格，想要解决这个问题只需要用alt+0165代替￥
最终实现效果
在这里插入图片描述

仿小米logo

思路：
先定义一个父盒子（.xmlogo）用于显示两个图片之间的变化，mi-home在父盒子左边隐藏显示，mi-logo在父盒子上，当我们鼠标一经过就让两个图片同时向右平移55px从而达到效果。
用到的知识：

过渡
伪元素选择器
子绝父相
元素隐藏
伪类选择器
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xmlogo {
            /* 定义父盒子的宽高 */
            width: 55px;
            height: 55px;
            /* 子绝父相,让两张图片在盒子里显示 */
            position: relative;
            /* 由于mi-home.png在父盒子的左边，设置overflow用于隐藏他 */
            overflow: hidden;
        }

        .xmlogo::before {
            position: absolute;
            /* content里面可以没数值,但不能没有 */
            content: '';
            /* 让mi-home在父盒子左侧 */
            left: -55px;
            top: 0;
            width: 55px;
            height: 55px;
            transition: all 0.5s;
            background: #ff6700 url(images/mi-home.png) no-repeat center;
        }

        .xmlogo::after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 55px;
            height: 55px;
            transition: all 0.5s;
            background: #ff6700 url(images/mi-logo.png) no-repeat center;
        }

        /* 让mi-home向右平移55px到mi-logo原先位置 */
        .xmlogo:hover::before {
            left: 0;
        }

        /* mi-logo也向右平移55px,为mi-home腾出空间 */
        .xmlogo:hover::after {
            /* transform: translate(55px, 0); */
            left: 55px;
        }
    </style>
</head>

<body>
    <div class="xmlogo"></div>
</body>

</html>