前端HTML小米官方网站界面部分实现 |
您所在的位置：网站首页 › 制作小米官网html5 › 前端HTML小米官方网站界面部分实现 |
前端HTML小米官方网站界面部分实现
|
前端HTML小米官方网站界面部分实现
完整代码
效果参考图：
定义与用法 background: rgba(131, 131, 131, 0.6);rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。 RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。 红色（R）0 到 255 间的整数，代表颜色中的红色成分。。 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。 透明度（A）取值 0~1 之间， 代表透明度。 /* banner动画 */ @keyframes move { 33% { margin-left: -1200px; } 66% { margin-left: -2400px; } 100% { margin-left: -3600px; } }在动画方面，具体是把banner里的图片进行水平放置，所以是4张图片共4800px，然后随着33%进度，整体左移1200px,代表左移过一张图片，但是由于overflow: hidden;代表溢出隐藏，所以就会出现轮播图的图片。 li { /* 取消列表默认样 */ list-style: none; }li代表列表，不过存在默认样式，所以仅仅想用列表而不用自带样式时候，可以通过该函数取消默认样式 完整代码 Document /* 重置默认样式 */ * { margin: 0; padding: 0; } li { /* 取消列表默认样 */ list-style: none; } /* 轮播部分 */ .view { width: 1200px; margin: 100px auto; overflow: hidden; /* relative相对位置供绝对位置参考 */ position: relative; } .banners { /* 水平排列 */ display: flex; width: 4800px; /* 背景图片轮播图,无限循环12s */ animation: move 12s infinite; } .banners img { /* 定义图片大小 */ height: 500px; width: 1200px; } /* banner动画 */ @keyframes move { 33% { margin-left: -1200px; } 66% { margin-left: -2400px; } 100% { margin-left: -3600px; } } /* 列表部分 */ .list { /* 绝对定位参照位置view */ position: absolute; width: 230px; background: rgba(131, 131, 131, 0.6); top: 0; left: 0; /* 上下填充 */ padding: 20px 0; } /* 菜单部分 */ .content { display: none; } .list p { line-height: 42px; /* 放置右方向箭头 */ background-image: url(images/arrow.png); /* 背景图片不填充 */ background-repeat: no-repeat; /* 箭头位置 */ background-position: 180px center; background-size: 30px auto; color: rgb(233, 233, 233); font-size: 14px; text-indent: 20px; } .list li:hover p { background-color: tomato; } .content { width: 800px; height: 430px; background-color: white; /* 绝对定位参照位置list */ position: absolute; left: 230px; top: 0; /* box-shadow: 0 0 10px white; */ } .list li:hover .content { display: block; } 手机 电话卡 1 手机 电话卡 2 手机 电话卡 3 手机 电话卡 4 手机 电话卡 5 手机 电话卡 6 手机 电话卡 7 手机 电话卡 7 手机 电话卡 8 手机 电话卡 9 手机 电话卡 10 |
小米官网图： 
【本文地址】
今日新闻 |
推荐新闻 |