小米上称右侧悬浮菜单

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米商城右侧悬浮菜单</title><link rel="stylesheet" href="iconfont/iconfont.css"><style type="text/css">body {background-color: #ddd;height: 2000px;margin: 0;padding: 0;}ul,p {margin: 0;padding: 0;list-style: none;}a {text-decoration: none;}.sidebar {width: 85px;/* height: 500px; *//* background-color: white; */position: fixed;/* 固定定位，相对于浏览器移动*/right: 20px;bottom: 100px;}.sidebar ul {/* border: 1px solid red; */}.sidebar ul li {border-bottom: 1px solid #ddd;width: 85px;height: 85px;background-color: white;position: relative;}.sidebar ul li:last-child {margin-top: 20px;}.sidebar ul li span {width: 85px;height: 50px;/* background-color: aquamarine; */display: block;font-size: 28px;color: #666;text-align: center;line-height: 50px;}.sidebar ul li p {font-size: 14px;text-align: center;color: #666;}.sidebar ul li:hover span,.sidebar ul li:hover p {color: hotpink;}.sidebar ul li .wxin {width: 100px;height: 100px;background: #fff;position: absolute;top: 0;left: -130px;padding: 15px;display: none;}.sidebar ul li:hover .wxin {display: block;}</style></head><body><div class="sidebar"><ul><li><a href=""><span class="iconfont icon-shouji"></span><p>手机APP</p></a><div class="wxin"><img src="data:images/wx.png" alt="" width="100"></div></li><li><a href=""><span class="iconfont icon-gerenzhongxin"></span><p>个人中心</p></a></li><li><a href=""><span class="iconfont icon-shouhouwuyou"></span><p>售后服务</p></a></li><li><a href=""><span class="iconfont icon-kefu"></span><p>人工客服</p></a></li><li><a href=""><span class="iconfont icon-gouwuchekong"></span><p>购物车</p></a></li><li><span class="iconfont icon-fanhuidingbu"></span><p>回顶部</p></li></ul></div></body>
</html>

效果图

自动轮播图效果

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>自动轮播图效果</title><style type="text/css">body ul {margin: 0;padding: 0;}ul {list-style: none;}.banner {width: 1000px;height: 466px;margin: 50px auto 0;background-color: aqua;position: relative;overflow: hidden;}.banner ul {/* border: 2px solid red; */width: 10000px;position: absolute;left: 0;top: 0;}.banner ul li {/* border: 2px solid #000; */width: 1000px;height: 466px;float: left;}.banner .prev,.banner .next {width: 41px;height: 69px;/* border: 2px solid red; */position: absolute;top: 50%;margin-top: -35px;background: url('images/icon-slides.png');}.banner .prev {left: 0;background-position:-83px 0;}.banner .next {right: 0;background-position:-125px 0;}.banner .prev:hover {background-position: 0 0;}.banner .next:hover {background-position: -42px 0;}.banner .button{width: 100%;height: 50px;background-color: rgba(0, 0, 0, 0.5);position: absolute;bottom: 0;left: 0;font-size: 0;/* 去除圆点之间的间隙 */text-align: center;line-height: 50px;}.banner .button span{width: 10px;height: 10px;background-color: white;display: inline-block;border-radius: 50%;margin: 0 3px;vertical-align: middle;}.button span.current{background-color: hotpink;}</style></head><body><div class="banner"><ul><li><img src="data:images/slide-1.png" alt=""></li><li><img src="data:images/slide-2.png" alt=""></li><li><img src="data:images/slide-3.png" alt=""></li><li><img src="data:images/slide-4.png" alt=""></li><li><img src="data:images/slide-5.png" alt=""></li></ul><div class="prev"></div><div class="next"></div><div class="button"><span class="current"></span><span></span><span></span><span></span><span></span></div></div></body>
</html>

效果图

小米商城二级下拉菜单效果

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>二级下拉菜单效果</title><style type="text/css">body,ul {margin: 0;padding: 0;}ul {list-style: none;}a {text-decoration: none;}.clearfix::after {/* 清除ul标签的塌陷问题 */content: '';display: block;clear: both;}.menu {width: 100%;height: 60px;background-color: #fd6a88;}.menu .menu-con {width: 1000px;height: 60px;/* background-color: aqua; */margin: 0 auto;/* 水平居中 */}.menu .menu-con ul {/* border: 2px solid red; */}.menu .menu-con ul li {/* border: 1px solid blue; *//* width: 100px; */height: 60px;float: left;position: relative;}.menu .menu-con ul li a {display: block;height: 60px;color: white;padding: 0 40px;line-height: 60px;text-align: center;}.menu .menu-con ul li:hover {/* 如果此处悬停改为a标签,顶部悬浮效果会消失 */background-color: #ee4d75;}.menu .menu-con ul li div {width: 200px;/* height: 400px; */background-color: #fd6a88;position: absolute;left: 50%;margin-left: -100px;top: 60px;display: none;}.menu .menu-con ul li div a {height: 40px;line-height: 40px;padding: 0;font-size: 14px;}.menu .menu-con ul li div a:hover {background-color: #ee4d75;}.menu .menu-con ul li:hover div{display: block;}</style></head><body><div class="menu"><div class="menu-con"><ul class="clearfix"><li><a href="#">小米手机</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">Redmi小米</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">电视</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">笔记本</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">平板</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li><li><a href="#">路由器</a><div><a href="">Xiaomi Pro 12</a><!-- 样式继承 --><a href="">Xiaomi 12</a><a href="">Xiaomi 青春活力版</a><a href="">Xiaomi 12X</a><a href="">Xiaomi civi</a></div></li></ul></div></div></body>
</html>

效果图

时间轴效果

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>时间轴效果展示</title><style type="text/css">body{margin: 0;padding: 0;background-image: linear-gradient(to right,#fdf1d8,#b2bcf9);}body,ul,h3{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;}.clearfix::after{/* 清除浮动 ，解决塌陷问题*/content: '';display: block;clear: both;}.time-axis{width: 804px;/* height: 700px; *//* border: 1px solid red; */margin: 50px auto 0;}.time-axis .left{width: 400px;/* height: 300px; *//* background-color: beige; */float: left;border-right: 4px solid #b1bbf9;position: relative;}.time-axis .right{width: 400px;/* height: 300px; *//* background-color: azure; */float: right;border-left: 4px solid #b1bbf9;position: relative;}.time-axis .dot{ /* 共用样式 */width: 10px;height: 10px;background-color: #fff;display: block;border-radius: 100%;border: 2px solid #b1bbf9;position: absolute;top: 50%;margin-top: -7px;}.time-axis .left .dot{right: -9px;}.time-axis .right .dot{left: -9px;}.time-axis .jiantou{ /* 共用样式 */width: 32px;height: 32px;/* border: 1px solid red; */display: block;position: absolute;top: 50%;margin-top: -18px;}.time-axis .left .jiantou{background: url('images/r-jiantou.png');right: 0;}.time-axis .right .jiantou{background: url('images/l-jiantou.png');left: 0;}.time-axis .con{ /* 共用样式 *//* height: 200px; */background-color: #fff;padding: 15px;border-radius: 10px;text-align: center;}.time-axis .left .con{margin-right: 22px;}.time-axis .right .con{margin-left: 22px;}.time-axis .con h3{font-weight: 400;}.time-axis .con h3 span{font-size: 38px;font-family: Arial;color: #b1bbf9;font-weight: 800;}</style></head><body><div class="time-axis clearfix"><div class="left"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3><img src="data:images/axis01.jpg" alt="" width="300"></div></div><div class="right"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3></div></div><div class="left"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3></div></div><div class="right"><span class="dot"></span><span class="jiantou"></span><div class="con"><h3><span>“</span> 春季腹泻要当心，益生菌要这样... <span>”</span></h3><img src="data:images/axis02.jpg" alt="" width="300"></div></div></div></body>
</html>

效果图

QQ音乐排行榜效果

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>音乐排行榜效果</title><style type="text/css">body {margin: 0;padding: 0;}a{text-decoration: none;}.music-top {width: 800px;/* height: 700px; *//* border: 2px solid red; */margin: 50px auto 0;}table {width: 100%;/* border: 2px solid #000; */border-spacing: 0;border-collapse: collapse;}table tr th {/* border: 1px solid red; */height: 80px;}table tr td {/* border: 1px solid red; */height: 80px;}.col1 {/* background-color: red;*/width: 60px;}.col2 {/* background-color: aqua; */width: 80px;}.col3 {/* background-color: #000*/wid}.col4 {/* background-color: yellow;*/width: 120px;}.col5 {/* background-color: bisque; */width: 60px;}/* 表格奇数行 */table tr:nth-of-type(odd) {background-color: white;}/* 表格偶数行 */table tr:nth-of-type(even) {background-color: #f7f7f7;}table tr th {background-color: #31c272;color: #fff;font-size: 16px;font-weight: 400;text-align: left;}table tr td:nth-child(1) {font-size: 24px;color: #333;text-align: center;}table tr td:nth-child(1) span {color: #ff4222;}table tr td:nth-child(2) {font-size: 12px;color: #999;}table tr td:nth-child(2) img {display: block;margin-left: 10px;}table tr td:nth-child(4),table tr td:nth-child(5) {font-size: 14px;color: #999;}.con {height: 70px;/* border: 2px solid red; */position: relative;}.con .txt {height: 70px;/* width: 300px; *//* background-color: aquamarine; */position: absolute;left: 90px;top: 0;right: 0;/* 处理文字超出部分 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 70px;}.con .txt a{color: #333;}.con .txt span {color: #999;}.con .button {width: 140px;height: 36px;/* border: 2px solid blue; */position: absolute;right: 0;top: 17px;display: none;}.con .button i {width: 36px;height: 36px;/* border: 1px solid red; */display: inline-block;background-image: url('images/icon-music.png');}.con .button i.play {}.con .button i.add {background-position: 0 -80px;}.con .button i.word {background-position: 0 -40px;}.con .button i.play:hover {background-position: -40px 0;}.con .button i.add:hover {background-position: -40px -80px;}.con .button i.word:hover {background-position: -40px -40px;}table tr:hover .con .button {display: block;}table tr:hover .con .txt {right: 180px;}</style></head><body><div class="music-top"><table><colgroup><col span="1" class="col1"><col span="1" class="col2"><col span="1" class="col3"><col span="1" class="col4"><col span="1" class="col5"></colgroup><tr><th></th><th>排行</th><th>歌曲</th><th>歌手</th><th>时长</th></tr><tr><td><span>1</span></td><td><img src="data:images/up-jiantou.png" alt="">158%</td><td><div class="con"><img src="data:images/music-img1.webp" alt="" height="70"><div class="txt">爱丫爱丫<span>《爱情是从告白开始的》电视剧插曲</span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>BY2</td><td>03:51</td></tr><tr><td><span>2</span></td><td><img src="data:images/up-jiantou.png" alt="">128%</td><td><div class="con"><img src="data:images/music-img2.webp" alt="" height="70"><div class="txt">春泥(女版)<span></span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>旺仔小乔</td><td>03:03</td></tr><tr><td><span>3</span></td><td><img src="data:images/up-jiantou.png" alt="">118%</td><td><div class="con"><img src="data:images/music-img3.webp" alt="" height="70"><div class="txt">孤勇者(Live)<span>《英雄联盟：双城》</span></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>永彬Ryan.B</td><td>03:14</td></tr><tr><td><span>4</span></td><td><img src="data:images/up-jiantou.png" alt="">108%</td><td><div class="con"><a href=""><img src="data:images/music-img4.webp" alt="" height="70"></a><div class="txt"><a href="">爱丫爱丫<span>《爱情是从告白开始的》电视剧插曲</span></a></div><div class="button"><i class="play"></i><i class="add"></i><i class="word"></i></div></div></td><td>张韶涵/信</td><td>04:30</td></tr></table></div></body>
</html>

效果图

资源包获取

所有图片和代码，持续更新…

30个HTML+CSS前端开发案例（三）相关推荐

30个HTML+CSS前端开发案例（五）
30个HTML+CSS前端开发案例(21-25) 本人说明全屏加载动画效果代码实现效果吃豆豆动画效果代码实现效果鼠标悬停3D翻转效果代码实现效果 3D旋转木马效果代码实现效果 f ...
30个HTML+CSS前端开发案例（二）
30个HTML+CSS前端开发案例(6-10) 常用的选项卡菜单效果网页框架布局酷狗音乐热榜小米商城首页产品栏酷狗精选歌单效果常用的选项卡菜单效果 <!DOCTYPE html> ...
30个HTML+CSS前端开发案例（完结篇）
30个HTML+CSS前端开发案例(完结篇) flex弹性布局-今日头条首页热门视频栏代码实现效果 flex弹性布局-微博热搜榜单代码实现效果 grid网格布局-360图片展示代码实现效果 ...
30个HTML+CSS前端开发案例（四）
30个HTML+CSS前端开发案例(17-20) 鼠标移入文字加载动画效果代码实现效果鼠标悬停缩放效果实现代码效果鼠标移入旋转动画实现代码效果 loding加载动画实现代码效果资 ...
30个HTML+CSS前端开发案例（一）
30个前端小案例(1-5) 三角形百度新闻热榜仿小米商城左侧菜单产品展示效果精美分页效果三角形 <!DOCTYPE html> <html><head>& ...
通过weui-1.1.3源码学习前端开发（三）从example看起-src/index.html文件
通过weui-1.1.3源码学习前端开发(三)从example看起前面已经看过了gulp的构建文件gulpfile.js,下面我们就从weui提供的一个example开始看看吧先看看src/exa ...
js前端开发案例教程之DOM购物车（动手实践：购物车）
js前端开发案例教程之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...
超详细前端开发案例：品优购商场项目(二)
目录续前一篇内容 10. 品优购首页布局 10.4 nav 导航栏制作 10.5 footer 底部制作 10.6 mod_service 服务模块制作 10.7 main 主体模块制作 10.8 ...
零基础一个月学会这些就能成为初级CSS前端开发工程师
一个月的时间,成为一个初级的css前端开发工程师?作为一个混迹前端圈几年的码界小姐姐的我来说,我觉得还是蛮难的,毕竟前端这个东西技术的含金量还是蛮高的,不然你觉得关于程序员月入几万都是大风吹来的吗,虽 ...

30个HTML+CSS前端开发案例（三）

30个HTML+CSS前端开发案例（11-15）

小米上称右侧悬浮菜单

实现代码

效果图

自动轮播图效果

实现代码

效果图

小米商城二级下拉菜单效果

实现代码

效果图

时间轴效果

实现代码

效果图

QQ音乐排行榜效果

实现代码

效果图

资源包获取

30个HTML+CSS前端开发案例（三）相关推荐

最新文章

热门文章