H5练习：小米部分页面实现

最新推荐文章于 2024-08-12 16:19:20 发布
最新推荐文章于 2024-08-12 16:19:20 发布
阅读量357 收藏
点赞数
分类专栏： 前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45725778/article/details/122336188
版权

小米部分页面

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        a{
            text-decoration: none;
        }
        td{
            -webkit-transform: scale(1);
            -webkit-transition-duration: 0.5s;
        }
        td:hover{
            -webkit-transtorm:scale(1.1);
            -webkit-box-shadow:0px 0px 30px gray;
        }
    </style>

</head>
<body bgcolor="#F5F5F5">
    <h2>手机</h2>
    <table cellspacing="15" height="600" width="1200" align="center">
        <tr bgcolor="#FFFFFF" align="center">
            <td rowspan="2" colspan="1">
                <a href="https://www.mi.com/mixfold">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=351&h=921&f=webp&q=90" alt="" height="580">
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/mi12pro">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a7382271e3a677bf188679ca38d68a42.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Xiaomi 12 Pro</p>
                    <p style="font-size: smaller;color: #B0B0B7;">全新一代 骁龙8</p>
                    <p><font color="#FF6700">4699元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/mi12">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e870129c5c374088bf7cc46be0b7ace2.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Xiaomi 12</p>
                    <p style="font-size: smaller;color: #B0B0B7;">全新一代 骁龙8</p>
                    <p><font color="#FF6700">3699元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/mi12x">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/63e15f377e87212d460592b4a1369ccd.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Xiaomi 12X</p>
                    <p style="font-size: smaller;color: #B0B0B7;">小尺寸，大升级</p>
                    <p><font color="#FF6700">3199元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/mi11le-5g-ne">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d4b362431de4bdda03315ffdbc7b32a.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Xiaomi 11 青春活力版</p>
                    <p style="font-size: smaller;color: #B0B0B7;">轻薄5G，内外皆出彩</p>
                    <p><font color="#FF6700">1999元起</font></p>
                </a>
            </td>
        </tr>
        <tr align="center" bgcolor="#FFFFFF">
            <td>
                <a href="https://www.mi.com/redminote11pro">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Redmi Note 11 Pro系列</p>
                    <p style="font-size: smaller;color: #B0B0B7;">Redmi Note 11 Pro系列</p>
                    <p><font color="#FF6700">1799元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/redminote11">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50da95e9e4496dcac8704da2deb94f6e.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Redmi Note 11 5G</p>
                    <p style="font-size: smaller;color: #B0B0B7;">5000mAh大电量</p>
                    <p><font color="#FF6700">1199元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/redminote11-4g">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c001ebc4aee69bc9ff6fae9ecf9137d0.jpg?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">Redmi Note 11 4G</p>
                    <p style="font-size: smaller;color: #B0B0B7;">5000mAh大电量</p>
                    <p><font color="#FF6700">999元起</font></p>
                </a>
            </td>
            <td>
                <a href="https://www.mi.com/blackshark4spro">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3490cfc52dc7c9abf9badfa1dc2d0eae.png?thumb=1&w=300&h=300&f=webp&q=90" alt="" height="200">
                    <p style="color: #000000;">黑鲨4S Pro</p>
                    <p style="font-size: smaller;color: #B0B0B7;">磁动力升降肩键</p>
                    <p><font color="#FF6700">4799元起</font></p>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>
珵、、、雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5网页设计练习
m0_66168318的博客
04-11 562
最终效果图： 素材： 更多>> 奥斯卡影后的纽约俭约豪宅奥斯卡影后娜塔莉—波特曼的这间公寓，整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感… 流光溢彩 施华洛世奇系列珠宝璀璨耀巴世：巴黎古董双年展金融巨头眼中的十大品牌名表 思路： 1.文字部分分为四个区域，即四个盒子（外面还有一个大盒子，共五个div），使用块元素里的div标签，分别给类名（标签语义化）。 2.添加背景图。background，盒子的宽度和高度等于图片的宽度和高度。 3.左上角如何到达目标位置？用小盒.
两个简单h5小页面布局-练习弹性盒模型
qq_45428582的博客
05-19 329
效果（chrome环境下） 页面1：仿小米分类导航布局 点击导航可达对应目录 页面2：仿公众号效果 底部点击显示弹窗 <!-- 页面1 实现导航页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
【H5】网页入门练习
weixin_44760675的博客
09-23 216
<!DOCTYPE html> <html> <head> <meta cahrset=utf-8""/> <title>入门练习项目</title> </head> <body> <h1>论&nbsp;&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;&nbsp;学的重要性</h1> <!--
H5的初步练习
一叶障目的博客
11-25 1065
其实我也是个白，也是几天刚自学的，说的不对的地方还希望见谅！废话不多说，开始了！ 首先，你想开发H5就需要有开发工具，但是工具不是唯一的，比如（Hbuilder、APICloud等）。Hbuilder链接、APICloud的下载就进入其官网（APICloud官网）。 A、首先当然是注册。 B、然后逐步解压，这就是我们的开发工具！ C、打开工具新建我们的第一个项目。新建一个APICloud项
【H5】网页入门练习案例二
weixin_44760675的博客
09-23 215
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>网页入门案例二</title> </head> <body> <h1>科技<img src="img/icon-mark.png"/></h1> <hr> <ul> <li><a
h5builder:webpack多页面h5壳工程
05-19
项目介绍使用webpack + babel + zepto ，专门用于打造的h5页面的壳工程项目目录技术简介1. 自适应使用postcss 以rem /vw 为单位，在375px像素的设备上设计对应各大尺寸设备的页面2. webpack-dev-server多入口配置3. ...
h5template:上传图片生成h5页面
05-10
【标题】"h5template:上传图片生成H5页面"是一个基于JavaScript的工具，它允许用户上传图片并自动生成互动式的H5活动页面。这个工具可能是由Node.js驱动的，因为提到了`npm install`和`npm start`这两个命令，它们...
react-h5sdk:React练习
05-29
一个基于 的react练手项目，Node版本13.5.0 主要内容：本地请求代理、区分环境打包、注解支持、scss支持等 技术栈：react + react-router + mobx + axios 开发环境启动 npm start 打包命令 ...主要页面
h5-damping-effect:H5页面滚动阻尼效果实现
05-10
页面滚动阻尼效果实现 功能描述 要求 页面分为AB两个区域 当手机可视区的底部接触到 “阻尼带” 的时候，有个上拉弹性过程 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部，让可视区从B区开始显示 当上拉...
h5实现静态的登录页面
11-30
在本文中，我们将深入探讨如何使用HTML5（简称H5）来实现一个静态的登录页面。HTML5作为现代网页开发的基石，提供了丰富的语义化元素、更好的表单控制以及强大的多媒体支持，使得创建交互式的登录界面变得既简单又...
h5+css3 小练习
11-30
H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
移动端/仿小米商城/H5页面
05-17
仿写小米商城，加入购物车，商品信息展示，登录页面，详情页面
H5仿小米商场
12-17
仿小米商场的网站设计，全代码为纯手工，页面精美高大，与原版相差无二，有喜欢的可以下载试试
Html——小米商城网页实战（二）
weixin_42511413的博客
10-22 3296
接上篇博文内容，完成小米商城首页的简单h5实战。 首先总结一下整个首页中htm+css可能涉及的知识点：首先使用最多的就是定位（position），我们要懂得相对定位和绝对定位的区别（近期会针对该元素总结一篇博文），其次另一个需要注意的就是元素的隐藏与悬停显示，需要通过visibility来设置。除此之外，可能还会涉及元素的选择器:nth-child()属性。做出的效果图如下（可能宽高上与原网页有细微差别）： 本文先展示相关的css设置，最后展示html代码。 一、导航栏（nav-bar） nav-bar.
原生HTML+CSS像素级还原小米商城首页
加油哇
02-19 298
预览：https://lanshiliang.github.io/mi/ 源码：https://github.com/LanShiLiang/LanShiLiang.github.io/tree/master/mi 未使用JS与任何库还原小米商城首页的所有交互效果(轮播图，下拉框，缓动动画 等)与布局 使用了大量transition动画，伪类，flex布局，处理了大量CSS优先级匹配以及层叠 问题 ...
html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接
热门推荐
采菊东篱下，Python满乾坤！
09-03 5万+
素材地址： 链接: https://pan.baidu.com/s/17aHx1VQpI5yjc67TFoq1yQ 提取码: bk1s 先来看一下效果图： 主要要求： 注：最下面有素材链接地址可以自己练习使用 /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */ /* 1.1login内容部分设置 高20 宽1200 居中*...
H5页面测试注意点
斩落千山
06-12 4699
H5页面测试注意点 1、 基本功能测试，功能是否符合设计要求和业务流程 2、 适配多个浏览器，Android和ios自带浏览器，UC浏览器，百度浏览器，QQ浏览器。 3、 加载速度（要清除浏览器缓存）可使用webpagetest 来测试 4、 浏览器进行刷新，页面是否仍处于当前页面 5、 手机自带返回键，进行测试，点击一次，和点击多次，会不会按顺序返回期望页面 6、 直接...
css实现水滴效果图
最新发布
yinge0508的博客
08-12 794
【代码】css实现水滴效果图。
前端开发基础：高保真页面实现
"大厂H5开发实战手册的首个章节聚焦于基础页面开发，强调了前端开发者必须具备根据设计稿和交互需求，运用JavaScript、...通过不断练习和实战，开发者可以不断提升自己在这方面的技能，从而制作出更高质量的H5页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值