小米官网静态网页项目实战3

小米商城APP二维码下拉以及过渡效果
结构

<!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>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title><!-- 引入重置样式表 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共样式表 --><link rel="stylesheet" href="./css/base1.css"><!-- 引入图标字体库 --><link rel="stylesheet" href="./fa/css/all.css"><!-- 引入当前页面样式表 --><link rel="stylesheet" href="./css/index1.css"></head>
<body><!-- 创建顶部导航条 --><!-- 创建顶部导航条外部容器 --><div class="topbar-wrapper"><!-- 创建内部容器 --><div class="topbar w clearfix"><!-- 左侧的导航条 --><ul class="service"><li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">loT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证照</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li class="app-wrapper"><a class="app" href="javascript:;">下载app<div class="qrcode"><img src="../mi/img/download.png" alt=""><span>小米商城APP</span></div></a></li><li class="line">|</li><li><a href="javascript:;">Select Location</a></li>               </ul><!-- 购物车 --><ul class="shop-cart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（０）</a></li></ul><!-- 用户登录注册 --><ul class="use-info"><li><a href="javascript:;">登录</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">消息通知</a></li><li class="line">|</li></ul></div></div></body>
</html>

CSS样式文档

    /* 主页index1.html的样式表 *//* 顶部导航条的样式 */.topbar-wrapper{/* 设置宽度全屏 */width: 100%;/* 设置高度和行高 */height: 40px;line-height: 40px;/* 设置背景颜色 */background-color: #333;}/* 设置超链接的颜色 */.topbar a{font-size: 12px;color:#b0b0b0;display: block;}/* 设置超链接移入的效果 */.topbar a:hover{color: #fff;}/* 设置中间分割线 */.topbar .line{font-size: 12px;color: #424242;margin: 0px 8px;margin-top: -1px;}/* 设置左侧导航栏 */.service, .topbar li{float: left;}.app{position: relative;}/* 设置app下的小三角 *//* .app-wrapper:hover > .app::after*/.app::after{ display: none;content: "";/* 设置绝对定位 */position: absolute;width: 0;height: 0;/* 设置四个方向的边框 */border: 8px solid transparent;/* 去除上边框 */border-top: none;/* 单独设置下边框的颜色 */border-bottom-color: #fff;bottom: 0;right: 0;left: 0;margin: auto;}/* .app-wrapper:hover>.app .qrcode{display: block;} */.app:hover .qrcode,.app:hover::after{display: block;height: 148px;}/* 设置下载app二维码的下拉 */.app .qrcode{/* 使其脱离文档流 *//* display: none; */position: absolute;left: -40px;width: 124px;/* height: 148px; */height: 0;overflow: hidden;/* 设置行高 */line-height: 1;/* 使文字居中 */text-align: center;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, .5);/* transition用来为样式设置过渡效果 */transition: height 0.3s;}/* 设置二维码图片 */.app .qrcode img{width: 90px;margin: 17px;margin-bottom: 10px;}/* 设置二维码中的文字 */.app .qrcode span{font-size: 14px;color: #000;}/* 设置右侧导航 */.shop-cart, .use-info{float: right;}/* 设置购物车的内边距 */.shop-cart{margin-left: 26px;}/* 设置购物车（０）这个超链接 */.shop-cart a{width: 120px;background: #424242;/* 设置购物车居中 */text-align: center;}/* 设置图标购物车与购物车之间的距离 */.shop-cart i{margin-right: 2px;}/* 设置超链接购物车移入效果 */.shop-cart:hover a{background-color: #fff;color:#FF6700;}

PS:鼠标移入下载app二维码下拉效果有多种方法。
效果图：

小米官网静态网页项目实战3相关推荐

小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
同济大学官网静态网页图
<!DOCTYPE html> <html lang="en"> <head><meta
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
1.有关项目的基本结构:|--html 文件与 CSS 文件单独设置分开.|--在html中引入:|--重置样式表|--网页基本样式表:所有网页所共有使用的部分:网页宽度.网页字体.颜色.设置最小宽度 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
项目三《小米官网仿写》
文章目录前言一.下载APP 二.下拉菜单三. 小米侧边栏四.登录注册界面五.lation实现界面切换总结前言本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...

小米官网静态网页项目实战3

小米官网静态网页项目实战3相关推荐

最新文章

热门文章