HTML+CSS简单实现小米商城

最新推荐文章于 2023-06-04 18:47:52 发布
最新推荐文章于 2023-06-04 18:47:52 发布
阅读量3.7k 收藏 92
点赞数 16
文章标签： html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54138158/article/details/123698732
版权

前端初学者，有啥不足的还请指出。

代码如下

<!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>小米商城</title>
    <link rel="icon" href="images/logo.ico" type="images/x-icon">
    
        <link rel="stylesheet" href="css/style.css">
    
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="./images/左边.webp" alt="">
        </div>
        <div class="right">
            <ol>
            <a href="#">
                <li>
                    <img src="./images/1.webp" alt="">
                    <h3 class="title">Redmi K50 Pro</h3>
                    <p class="desc">2K直屏的狠旗舰</p>
                    <p class="price">2999元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="./images/2.webp" alt="">
                    <h3 class="title">Redmi K50</h3>
                    <p class="desc">2K直屏的狠旗舰</p>
                    <p class="price">2399元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="./images/3.webp" alt="">
                    <h3 class="title">Redmi K40S</h3>
                    <p class="desc">口碑真旗舰</p>
                    <p class="price">1799元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="./images/4.webp" alt="">
                    <h3 class="title">Redmi K50 电竞版</h3>
                    <p class="desc">全线拉满的冷血旗舰</p>
                    <p class="price">3299元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="./images/5.webp" alt="">
                    <h3 class="title">Xiaomi 12 Pro</h3>
                    <p class="desc">全新骁龙8｜2K AMOLED屏幕</p>
                    <p class="price">4699元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="./images/6.webp" alt="">
                    <h3 class="title">Xiaomi 12</h3>
                    <p class="desc">全新骁龙8｜5000万主摄</p>
                    <p class="price">3699元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="/mi/images/7.webp" alt="">
                    <h3 class="title">Xiaomi 12X</h3>
                    <p class="desc">骁龙870｜5000万主摄</p>
                    <p class="price">2999元起</p>
                </li>
            </a>
            <a href="#">
                <li>
                    <img src="/mi/images/8.webp" alt="">
                    <h3 class="title">Xiaomi 11 青春活力版</h3>
                    <p class="desc">轻薄5G，内外皆出彩</p>
                    <p class="price">
                        <span class="num">1899</span>元<span>起&nbsp</span>
                        <del><span class="num">1999</span>元</del>
                    </p>
                </li>
            </a>
            </ol>
        </div>
    </div>
</body>
</html>
* {
    padding: 0;
    margin: 0;
}
ol{
    list-style: none;
}
body{
    background-color: #F5F5F5;
}
body .box{
    width: 1226px;
    height: 614px;
    margin: 50px auto;
}
body .box .left{
    width: 234px;
    height: 614px;
    float: left;
}
body .box .right{
    width: 992px;
    height: 614px;
    float: left;
    
}
body .box .right ol li{
    width: 234px;
    height: 260px;
    background-color: white;
    float: left;
    margin-left: 14px;
    margin-bottom: 14px;
    padding: 20px 0px;
}
.box .left img{
    width: 234px;
    height: 614px;
}
img{
    width: 160px;
    height: 160px;
    margin-bottom: 15px;
}
.box .right ol li{
    text-align: center;
}
.right ol li .title{
    display: block;
    margin: 0px 10px 2px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}
.right ol li .desc{
    display: block;
    margin: 0px 10px 10px;
    height: 18px;
    font-weight: 400;
    font-size: 12px;
    color: #b0b0b0;
}
.right ol li .price{
    display: block;
    margin: 0px 10px 14px;
    color: #ff6700;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.right ol li .price del{
    color: #b0b0b0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.right ol a:hover{
    box-shadow: 10px 10px 20px rgba(119, 117, 117, 0.3) ; 
    
}

该编程了
关注
  • 16
    点赞
  • 踩
  • 92
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
css、HTML制作小米商城网页（一）
m0_70516782的博客
07-06 1755
制作首页导航栏属性： float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)代码：
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码
qq_38512792的博客
04-22 371
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
html+css仿小米商城首页搜索页和商品详情页
12-30
作业
Html——小米商城网页实战（二）
weixin_42511413的博客
10-22 3275
接上篇博文内容，完成小米商城首页的简单h5实战。 首先总结一下整个首页中htm+css可能涉及的知识点：首先使用最多的就是定位（position），我们要懂得相对定位和绝对定位的区别（近期会针对该元素总结一篇博文），其次另一个需要注意的就是元素的隐藏与悬停显示，需要通过visibility来设置。除此之外，可能还会涉及元素的选择器:nth-child()属性。做出的效果图如下（可能宽高上与原网页有细微差别）： 本文先展示相关的css设置，最后展示html代码。 一、导航栏（nav-bar） nav-bar.
品优购商品详情页html代码记录
weixin_46427707的博客
06-17 9325
品优购商品详情页html代码
手把手教你做小米商城-商品展示页面
weixin_42839094的博客
04-01 7506
手把手教你做小米商城商品展示页面 思路说明 1 先确定清除基本的默认样式跟基本的css 样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; } a { text-decoration...
小米商场html幻灯片代码,小米商城商品详情页布局(HTML代码太长贴不上去，只能贴jQuery代码)...
weixin_27012007的博客
06-04 1277
摘要：1、jQuery代码// 使用替换class名的方法$(function() {//默认选中第一个版本和第一个颜色 $('.detail_much_left').eq(0).attr('class','detail_much_left checked') $('.detail_1、jQuery代码// 使用替换class名的方法$(function() {//默认选中第一个版本...
小米商城html+css
m0_74031471的博客
06-04 3063
完整的代码包括图片和图标在github。
小米商城html+css+js全代码
热门推荐
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
css、HTML制作小米商城网页（四）
m0_70516782的博客
07-11 464
input:（输入） button（按钮） :focus（选取获得焦点） float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
wap商城html源码
10-16
移动商城html源码各个模块比较齐全，移动商城各模块均有，甚至还有团购、电影院选座等等，值得下载参考；
综合商城手机网站html5静态页面
04-06
综合商城手机网站html5静态页面，收藏的微信商城模版，需要的可以参考参考
仿小米商城前端网页，采用html+css+js,纯原生代码实现完美复刻小米商城
最新发布
08-01
对于学习前端入门的小白是一个很好的练手demo，当然也可以用于完美完成学校前端网页课程结课作业。运用html，css，js完美复刻小米商城官网，可以巩固js轮播图的用法，标签选项卡等技术。
Dreamweaver简单网页——HTML+CSS小米官网首页的设计与实现
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
基于HTML+CSS实现网页滑动门效果
01-19
一、什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它... 简单的CSS基础样式 CSS定位 三、如何实现滑动门 1.准备好一段HTML代码　 手机 电话卡 <div class=div1>
[期末网页作业]-小米官网（html+css+js）
12-20
[期末网页作业]—小米官网（html+css+js） 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕...
小米网页静态实现.rar
06-26
模仿小米网站制作的一个静态网页，采用了html+css+js的方法，内涵详细源码。有些地方使用了bootstrap框架，整体页面设计不错，包含了所有源代码文件以及图片。
html、css制作小米商城左侧导航栏
05-20
下面是一个简单的 HTML 和 CSS 代码来实现小米商城左侧导航栏： HTML 代码： ``` <div class="sidebar"> <ul> <li><a href="#">手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">家电</a></li> <li><a href="#">智能</a></li> </ul> </div> ``` CSS 代码： ``` .sidebar { width: 200px; background-color: #f5f5f5; padding: 20px; } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar li { margin-bottom: 10px; } .sidebar li a { display: block; padding: 10px; color: #333; text-decoration: none; } .sidebar li a:hover { background-color: #ddd; color: #333; } ``` 这段代码将会创建一个宽度为 200px 的侧边栏，该侧边栏包含一个无序列表，其中每个列表项都是一个链接。当鼠标悬停在链接上时，链接的背景颜色将会变成灰色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

该编程了

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

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

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

打赏作者

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

抵扣说明：

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

余额充值