一、轮播图

html

css

.img-box {width: 992px;height: 460px;margin: 0 auto;position: relative;float: left;
}
.img-box>li {width: 992px;height: 460px;position: absolute;
}.img-box img  {width: 992px;height: 460px;
}.a-box {position: absolute;bottom: 20px;left: 30px;z-index: 100;
}
.a-box>li {float: left;
}
.a-box a {display: block;width: 10px;height: 10px;background-color: red;border-radius: 50%;margin-right: 5px;
}
.a-box a:hover {background-color: white;outline: 2px solid black;
}:target {z-index: 10;
}

二手机浮动布局

<!-- 手机浮动布局 --><div class="buju-box"><div class="buju-center"><div class="buju-left"><a href=""><img src="../img/手机浮动/左一.webp" alt=""></a></div><ul class="buju-right"><li><a href=""><img src="../img/手机浮动/右1.webp" alt=""><h3 class="title">xiaomi 12S Ultra</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右二.webp" alt=""><h3 class="title">xiaomi 12S Pro</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右三.webp" alt=""><h3 class="title">xiaomi 12S</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右4.webp" alt=""><h3 class="title">xiaomi 12S 天玑版</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右5.webp" alt=""><h3 class="title">Redmi Note 11T Pro+</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右6.webp" alt=""><h3 class="title">Redmi Note 11T Pro</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右7.webp" alt=""><h3 class="title">Redmi Note 11SE</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li><li><a href=""><img src="../img/手机浮动/右8.webp" alt=""><h3 class="title">xiaomi Civi 1S</h3><p class="desc">这真莱卡|专业莱卡影像</p><p class="price">5999元起</p></a></li></ul></div></div>

css

.buju-box{width: 100%;height: 628px;background-color: #F5F5F5;overflow: hidden;
}
.buju-center{width: 1226px;height: 628px;margin: 0 auto;
}
.buju-left{width: 234px;height: 628px;float: left;line-height: 628px;
}
.buju-left img{width: 234px;height: 614px;/* text-align: center; */
}
.buju-right{width: 992px;height: 614px;float: left;
}
.buju-right li{width: 234px;height: 260px;background-color: white;float: left;margin-left: 14px;margin-bottom: 14px;padding: 20px 0px;text-align: center;
}
.buju-right img {width: 160px;height: 160px;margin-bottom: 15px;
}
.buju-right li .title{display: block;margin: 0px 10px 2px;font-size: 14px;color: #333;
}
.buju-right li .desc{display: block;margin: 10px 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;
}
.buju-right li .price{display: block;margin: 0px 10px 14px;color: #ff6700;font-size: 14px;
}
.buju-right li:hover{box-shadow: 10px 10px 20px rgba(119, 117, 117, 0.3);
}
.buju-left:hover{box-shadow: 10px 10px 20px rgba(119, 117, 117, 0.3);
}

总结

最近练习了网页页面的学习。以上两点是记忆点比较重一点的，希望在后面的学习学到更多的内容，做出跟好的效果

【HTML+CSS之小米商城页面图】相关推荐

使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...
html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...
android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分打开 ...
html、css 实现轮播图的静态样式
最终效果:利用html.css实现轮播图(静态的,我只实现轮播图的基本样式) 一:选取四张图片作为轮播图的素材: html: <div class="banner">& ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

【HTML+CSS之小米商城页面图】

一、轮播图

css

总结

【HTML+CSS之小米商城页面图】相关推荐

最新文章

热门文章