小米商城阴影+弹起效果

最新推荐文章于 2024-11-15 13:54:42 发布
最新推荐文章于 2024-11-15 13:54:42 发布
阅读量398 收藏 3
点赞数
分类专栏： css 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47010003/article/details/126916110
版权

在这里插入图片描述

<!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>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 14px "Helvetica Neue", Helvetica, Arial;
        }

        .nav {
            width: 1200px;
            height: 350px;
        }

        .lic {
            width: 234px;
            height: 300px;
            border: 2px solid white;
            float: left;
        }

        .brick {
            display: inline-block;
            text-decoration: none;
            width: 234px;
            height: 300px;
            padding: 10px 10px;
            text-align: center;
        }

        img {
            width: 160px;
            height: 160px;
            padding: 0px 0px;
        }

        h3 {
            width: 214px;
            height: 21px;
            color: #333333;
            margin: 0px 10px 2px;
            padding: 0px 0px;

        }

        .desc {
            width: 214px;
            height: 21px;
            color: #b0b0b0;
            margin: 0px 10px 10px;
            font-size: 14px;
        }

        .price {
            width: 214px;
            height: 21px;
            color: #FF6700;
            margin: 0px 10px 14px;
        }

        .lic:hover {
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .25);
            margin-top: -6px;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
    </ul>
    <ul class="nav">
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
        <li type="none" class="lic">
            <a href="#" class="brick">
                <div class="figure">
                    <img src="小米手机.jpg" alt="">
                </div>
                <h3>
                    Xiaomi 125
                </h3>
                <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>
                <p class="price">3999元起</p>
            </a>
        </li>
    </ul>
</body>

</html>
素心如月桠
关注
专栏目录
Android 12.0 rom定制专栏系列解读
安卓兼职framework和app工程师的博客
12-11 3538
在从事android系统rom定制化的这几年里，经历了坎坎坷坷，开发过好几种类型的产品，也随着google对android系统的更新加快，也需要跟随上时代的进步，所以需要把平时工作中遇到的问题总结出来，及时做好记录归纳总结，然后进一步的提升自己能力，本专栏提供给在12.0的rom定制过程中需要寻求帮助的伙伴们给个指引，如有不到之处可以提出来探论，共同进步
前端基础总结--CSS
chenyouleww的博客
07-08 607
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
纯CSS制作小米商城弹出效果
weixin_44030866的博客
07-26 192
纯CSS制作小米商城弹出效果
css3实现小米商城鼠标移动图片上浮阴影效果
weixin_30588827的博客
11-11 1430
今天在编程爱好者编码库看见一个好玩的程序，代码如下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalabl...
css:动画 小米官网盒子阴影 心跳动画
qq_36413371的博客
10-08 524
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <style> *
模仿小米商城浮动效果
zhongshuying的博客
09-02 1539
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .father:hover {
js小米商城商品加入购物车特效代码
03-20
js小米商城商品加入购物车代码是一款鼠标点击商品上的加入购物车按钮，商品自动加入购物车特效。
CSS３实现小米商城的浮动效果 html5&css3
wjm_520的博客
05-01 1770
小米内容栏浮动效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米手机内容详情</title> <link rel="stylesheet" type="text/css" href="css/text1.css" /> ...
小米官网仿写部分代码+实训报告
热门推荐
weixin_44494716的博客
07-04 1万+
小米官网仿写部分代码+实训报告实训报告 实训老师带着做的，很基础，相似的功能只做了一个（下拉菜单、侧导航……），仅供参考，代码有注释。 实训报告 老师课上得讲解+小部分的一些文章的摘抄 一、项目简介 二、项目的技术准备 三、项目的分析与设计 四、关键问题的解决 五、总结与展望 一、项目简介 项目名称：实现“小米商城”页面 随着网络普及和发展，网站作为一种很强大的工具和平台越来越融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有的重视。可以看到前端重构的行业发展潜力巨大，各大知名的网络公司对前端人
类库 (二)
小歪的小铛
12-20 2294
2016_12_19 1.SpaceTabLayout 一个酷炫的tabLayout 2.TextLayoutBuilder FaceBook 开源了一个快速建立文本布局的类库 3.WowSplash .铁塔融云！一个让你的哇哇哇哇闪屏页。 4.android-oss Kickstarter for Android. Bring new ideas to life, anywh
仿小米官网HTML+css,有特效小米.zip
10-09
仿小米官网HTML+css,有特效小米.zip
盒子显隐与阴影
weixin_30487701的博客
01-21 153
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ ​ 下载 => 引入css文件 ​ <i class="fa fa-**"></i> 字体图标是通过类来实现的 所有类的前面必须跟上前缀fa ''' <!DOCTYPE html> <html> <head&...
CSS——小米首页悬浮栏效果
NanChen的博客
10-05 594
这种悬浮效果该如何制作？ <!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"> ...
小米商城练习(鼠标移入阴影偏移 向上抬起 浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离 怎么解决？
pikaqiu420的博客
07-14 373
小米商城练习(鼠标移入阴影偏移 向上抬起 浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离 怎么解决？
2021小米商城主页模仿(HTML，CSS，JavaScript)
fujiaxu666的博客
10-17 1599
用时两天模仿的小米商城主页。没有设计图失真的很烦，各个距离都要慢慢找。 演示地址 大米商城 代码 大米商城代码 总结 通过这个的项目，发现在css的的熟练度还是很不足，对于许多的特性虽然知道，但是做的时候没想起来。 代码也不是很规范，有一些可以写在一起的代码分开写了，浪费了资源，增加了代码的耦合度。 如果两个或者两个元素的元素向右浮动时，若要保证元素的显示顺序，那么在书写元素是应该将元素顺序反着书写，应该代码是从上向下执行的，所以反正写那么就意味着原本在最后的元素先向右浮动，这才能保证顺序。 清除浮动的
小米商城侧导航栏的实现（导航栏的制作）
weixin_65607135的博客
09-01 4204
我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...
CSS3 transition 属性实现小米商城商品展示效果
im_dogg的博客
06-28 4983
前端小白一个，最近学习了CSS3的transition属性，就想做一个效果练练手，下面是参考小米商城的商品展示做的一个动态效果。下面贴上代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小米商品展示css3动画&lt;/title&gt; &am
前端文件优化
最新发布
weixin_62668406的博客
11-15 708
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

素心如月桠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值