HTML+CSS简单实现小米商城

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

代码如下

<!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) ; }

HTML+CSS简单实现小米商城相关推荐

html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
html边框有箭头,css简单实现带箭头的边框
css简单实现带箭头的边框普通边框 .border { width: 100px; height: 50px; border: 1px solid red; } 实现由四个三角形组成的正方形 .tr ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
用HTML+CSS简单做了张简历表格
这里写自定义目录标题用HTML+CSS简单做了张简历表格效果图: 代码块: 用HTML+CSS简单做了张简历表格效果图: 代码块: <!DOCTYPE html> <html& ...
HTML+css简单实现手机邮箱导航网页
HTML+css简单实现手机邮箱导航网页前言基本完成了手机邮箱导航的样式,是很经典的一个试验. 一.邮箱网页代码 <!DOCTYPE html> <html lang=&qu ...
calc()：css简单的数学运算–加减乘除
calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); ...
如何使用CSS简单的制作一个视频网站
如何使用CSS简单的制作一个视频网站 1.主页的设置 <!DOCTYPE html><html lang="en"><head> <met ...
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
css简单实现五角星评分.点赞收藏.展示评分(半颗星.1/3颗星) 1. 前言之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后 ...

HTML+CSS简单实现小米商城

HTML+CSS简单实现小米商城相关推荐

最新文章

热门文章