HTML+CSS从入门到精通（三）

（9）右侧搜索框
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>小米商城</title></head><body><!--创建顶部导航条--><!--顶部导航条外部容器--><div class="div-class-topBarWrapper"><!--创建内容容器--><div class="div-class-topBar w clearFix"><!-- 左侧导航--><ul class="ul-class-service"><li><a href="javascript:;">小米商城</a></li><li class="li-class-line">|</li><li><a href="javascript:;">MIUI</a></li><li class="li-class-line">|</li><li><a href="javascript:;">IoT</a></li><li class="li-class-line">|</li><li><a href="javascript:;">云服务</a></li><li class="li-class-line">|</li><li><a href="javascript:;">金融</a></li><li class="li-class-line">|</li><li><a href="javascript:;">有品</a></li><li class="li-class-line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="li-class-line">|</li><li><a href="javascript:;">企业团购</a></li><li class="li-class-line">|</li><li><a href="javascript:;">资质证明</a></li><li class="li-class-line">|</li><li><a href="javascript:;">协议规则</a></li><li class="li-class-line">|</li><li><a class="a-class-app" href="javascript:;">下载APP<div class="div-class-qrCode"><img src="./server/小米.jpg" /><span>小米商城APP</span></div></a></li><li class="li-class-line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!--考虑到浮动布局--><!--购物车--><ul class="ul-class-shopCart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车(0)</a></li></ul><!--用户登录注册--><ul class="ul-class-userInfo"><li><a href="javascript:;">登录</a></li><li class="li-class-line">|</li><li><a href="javascript:;">注册</a></li><li class="li-class-line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><!--创建一个头部的外部容器--><div class="div-class-headerWrapper"><div class="div-class-header w clearFix"><h1 class="h1-class-logo" title="小米">小米官网<a class="a-class-home" href="/vue"></a><a class="a-class-mi" href="/vue"></a></h1><!--创建中间导航条的容器--><div class="div-class-navWrapper"><!--创建导航条--><ul class="ul-class-nav clearFix"><li><a class="a-class-allGoods" href="javascript:;">全部商品分类</a></li><li class="li-class-showGoods"><a href="javascript:;">小米手机</a></li><li class="li-class-showGoods"><a href="javascript:;">Red mi红米</a></li><li><a href="javascript:;">电视</a></li><li class="li-class-showGoods"><a href="javascript:;">笔记本</a></li><li class="li-class-showGoods"><a href="javascript:;">家电</a></li><li class="li-class-showGoods"><a href="javascript:;">路由器</a></li><li class="li-class-showGoods"><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!--创建一个弹出层--><div class="div-class-goodsInfo"></div></ul></div><!--创建搜索框的容器--><div class="div-class-searchWrapper"><form class="form-class-search" action="#"><input class="input-class-searchInp" type="text"/><button class="button-class-searchBtn"><i class="fas fa-search"></i></button></form></div></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.导航条*//*设置一个类,表示中间容器的宽度*/.w{/*固定容易宽度*/width: 1226px;/*设置容器居中*/margin: 0 auto;/*不让宽度过小时,容器溢出*/min-width: 1226px;}/*顶部导航条容器*/.div-class-topBarWrapper{/*设置宽度全屏*/width: 100%;/*设置背景色*//*设置行高*/height: 40px;line-height: 40px;background-color: #333333;}/*设置超链接的颜色*/.div-class-topBar a{font-size: 12px;color: #cccccc;display: block;}.div-class-topBar a:hover{color: white;}.div-class-topBar .li-class-line{color: #424242;font-size: 12px;margin: 0 8px;}/*清除a的下划线*/a{text-decoration: none;color: #cccccc;}/*设置左侧导航栏*/.ul-class-service,.div-class-topBar li{float: left;list-style: none;}/*神来之笔,自己牛批*/.div-class-topBar li a{display: block;line-height: 40px;}.ul-class-shopCart,.ul-class-userInfo{float: right;}/*设置购物车的样式*/.ul-class-shopCart a{width: 120px;background-color: #424242;text-align: center;}.ul-class-shopCart:hover a{background-color: white;color: #ff6700;}/*设置下载APP的下拉*/.a-class-app .div-class-qrCode{position: absolute;width: 124px;/*height: 148px;*/height: 0;background-color: white;line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,.3);left: -38px;overflow: hidden;/*display: none;*//* transition:用于设置过渡效果*/transition: height 0.3s;}/*设置二维码的图片*/.a-class-app .div-class-qrCode img{width: 90px;margin: 17px;}/*设置二维码的文字*/.a-class-app .div-class-qrCode span{color: black;font-size: 14px;}/*给app开启相对定位*/.a-class-app{position: relative;}.a-class-app:hover .div-class-qrCode,.a-class-app:hover::after{display: block;height: 148px;}/*设置app下的小三角*//*li:hover .a-class-app::after*/.a-class-app::after{/*设置四个边框为透明颜色*/display: none;content: '';/*开启绝对对位*/position: absolute;width: 0;height: 0;border: 10px solid transparent;/*去除上边框*/border-top: none;border-bottom-color: white;bottom: 0;left: 0;right: 0;margin: auto;}/*li:hover>.a-class-app .div-class-qrCode{display: block;}*//*设置中间的header*/.div-class-header{height: 100px;background-color: #669900;}.div-class-header .h1-class-logo{float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;overflow: hidden;/*为了让写的小米官网不显示,但是要写*/text-indent: -9999px;}.div-class-header .h1-class-logo a{/* display: block;*/position: absolute;width: 55px;height: 55px;background-color: #ff6700;background-image: url("../server/logo.jpg");background-position: center;background-repeat: no-repeat;transition: left 0.3s;left: 0;}.div-class-header .h1-class-logo .a-class-home{left: -55px;background-image:url("../server/home.jpg") ;}/*设置图标引入后的位置*/.div-class-header .h1-class-logo:hover .a-class-mi{left:55px;}.div-class-header .h1-class-logo:hover .a-class-home{left: 0px;}/*头部的导航条*/.div-class-header .div-class-navWrapper{float: left;margin-left: 7px;}/*设置导航条中的li*/.div-class-navWrapper li{float: left;list-style: none;height: 100px;line-height: 100px;}/*设置导航条*/.div-class-header .ul-class-nav{/*width: 850px;*/padding-left: 58px;}.div-class-navWrapper li a{font-size: 16px;margin-right: 20px;color: #333333;}.div-class-navWrapper li a:hover{color: #ff6700;}/*隐藏全部商品*/.a-class-allGoods{/*隐藏且占据位置*/visibility: hidden;}.ul-class-nav .div-class-goodsInfo{width: 100%;height: 0px;background-color: #0086b3;position: absolute;top: 100px;left: 0;overflow: hidden;transition: height 0.3s;z-index: 9999;}/*goodsInfo的相对定位元素*/.div-class-headerWrapper{position: relative;}.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,.div-class-goodsInfo:hover{height: 228px;border-top: 1px solid rgb(224,224,224);box-shadow: 0 5px 3px rgba(0,0,0,.3);}/*搜索框*/.div-class-searchWrapper{width: 296px;height: 50px;background-color: red;float: right;margin-top: 25px;border: 1px solid rgb(224,224,224);}.div-class-searchWrapper .input-class-searchInp{border: none;float: left;height: 50px;width: 224px;padding: 0 10px;font-size: 16px;}.div-class-searchWrapper .button-class-searchBtn{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border-left: 1px solid rgb(224,224,224);}/*设置input获取焦点后的样式*/.div-class-searchWrapper .input-class-searchInp:focus,.div-class-searchWrapper .input-class-searchInp:focus + button{outline: 2px solid #ff6700;}.div-class-searchWrapper .button-class-searchBtn:hover{background-color: #ff6700;color: white;border: none;}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（10）左侧导航条
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>小米商城</title></head><body><!--创建顶部导航条--><!--顶部导航条外部容器--><div class="div-class-topBarWrapper"><!--创建内容容器--><div class="div-class-topBar w clearFix"><!-- 左侧导航--><ul class="ul-class-service"><li><a href="javascript:;">小米商城</a></li><li class="li-class-line">|</li><li><a href="javascript:;">MIUI</a></li><li class="li-class-line">|</li><li><a href="javascript:;">IoT</a></li><li class="li-class-line">|</li><li><a href="javascript:;">云服务</a></li><li class="li-class-line">|</li><li><a href="javascript:;">金融</a></li><li class="li-class-line">|</li><li><a href="javascript:;">有品</a></li><li class="li-class-line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="li-class-line">|</li><li><a href="javascript:;">企业团购</a></li><li class="li-class-line">|</li><li><a href="javascript:;">资质证明</a></li><li class="li-class-line">|</li><li><a href="javascript:;">协议规则</a></li><li class="li-class-line">|</li><li><a class="a-class-app" href="javascript:;">下载APP<div class="div-class-qrCode"><img src="./server/小米.jpg" /><span>小米商城APP</span></div></a></li><li class="li-class-line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!--考虑到浮动布局--><!--购物车--><ul class="ul-class-shopCart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车(0)</a></li></ul><!--用户登录注册--><ul class="ul-class-userInfo"><li><a href="javascript:;">登录</a></li><li class="li-class-line">|</li><li><a href="javascript:;">注册</a></li><li class="li-class-line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><!--创建一个头部的外部容器--><div class="div-class-headerWrapper"><div class="div-class-header w clearFix"><h1 class="h1-class-logo" title="小米">小米官网<a class="a-class-home" href="/vue"></a><a class="a-class-mi" href="/vue"></a></h1><!--创建中间导航条的容器--><div class="div-class-navWrapper"><!--创建导航条--><ul class="ul-class-nav clearFix"><li class="li-allGoodsWrapper"><a class="a-class-allGoods" href="javascript:;">全部商品分类</a><!--创建左侧的导航菜单--><ul class="ul-leftMenu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li><li class="li-class-showGoods"><a href="javascript:;">小米手机</a></li><li class="li-class-showGoods"><a href="javascript:;">Red mi红米</a></li><li><a href="javascript:;">电视</a></li><li class="li-class-showGoods"><a href="javascript:;">笔记本</a></li><li class="li-class-showGoods"><a href="javascript:;">家电</a></li><li class="li-class-showGoods"><a href="javascript:;">路由器</a></li><li class="li-class-showGoods"><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!--创建一个弹出层--><div class="div-class-goodsInfo"></div></ul></div><!--创建搜索框的容器--><div class="div-class-searchWrapper"><form class="form-class-search" action="#"><input class="input-class-searchInp" type="text"/><button class="button-class-searchBtn"><i class="fas fa-search"></i></button></form></div></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.导航条*//*设置一个类,表示中间容器的宽度*/.w{/*固定容易宽度*/width: 1226px;/*设置容器居中*/margin: 0 auto;/*不让宽度过小时,容器溢出*/min-width: 1226px;}/*顶部导航条容器*/.div-class-topBarWrapper{/*设置宽度全屏*/width: 100%;/*设置背景色*//*设置行高*/height: 40px;line-height: 40px;background-color: #333333;}/*设置超链接的颜色*/.div-class-topBar a{font-size: 12px;color: #cccccc;display: block;}.div-class-topBar a:hover{color: white;}.div-class-topBar .li-class-line{color: #424242;font-size: 12px;margin: 0 8px;}/*清除a的下划线*/a{text-decoration: none;color: #cccccc;}/*设置左侧导航栏*/.ul-class-service,.div-class-topBar li{float: left;list-style: none;}/*神来之笔,自己牛批*/.div-class-topBar li a{display: block;line-height: 40px;}.ul-class-shopCart,.ul-class-userInfo{float: right;}/*设置购物车的样式*/.ul-class-shopCart a{width: 120px;background-color: #424242;text-align: center;}.ul-class-shopCart:hover a{background-color: white;color: #ff6700;}/*设置下载APP的下拉*/.a-class-app .div-class-qrCode{position: absolute;width: 124px;/*height: 148px;*/height: 0;background-color: white;line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,.3);left: -38px;overflow: hidden;/*display: none;*//* transition:用于设置过渡效果*/transition: height 0.3s;}/*设置二维码的图片*/.a-class-app .div-class-qrCode img{width: 90px;margin: 17px;}/*设置二维码的文字*/.a-class-app .div-class-qrCode span{color: black;font-size: 14px;}/*给app开启相对定位*/.a-class-app{position: relative;}.a-class-app:hover .div-class-qrCode,.a-class-app:hover::after{display: block;height: 148px;}/*设置app下的小三角*//*li:hover .a-class-app::after*/.a-class-app::after{/*设置四个边框为透明颜色*/display: none;content: '';/*开启绝对对位*/position: absolute;width: 0;height: 0;border: 10px solid transparent;/*去除上边框*/border-top: none;border-bottom-color: white;bottom: 0;left: 0;right: 0;margin: auto;}/*li:hover>.a-class-app .div-class-qrCode{display: block;}*//*设置中间的header*/.div-class-header{height: 100px;background-color: #669900;}.div-class-header .h1-class-logo{float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;overflow: hidden;/*为了让写的小米官网不显示,但是要写*/text-indent: -9999px;}.div-class-header .h1-class-logo a{/* display: block;*/position: absolute;width: 55px;height: 55px;background-color: #ff6700;background-image: url("../server/logo.jpg");background-position: center;background-repeat: no-repeat;transition: left 0.3s;left: 0;}.div-class-header .h1-class-logo .a-class-home{left: -55px;background-image:url("../server/home.jpg") ;}/*设置图标引入后的位置*/.div-class-header .h1-class-logo:hover .a-class-mi{left:55px;}.div-class-header .h1-class-logo:hover .a-class-home{left: 0px;}/*头部的导航条*/.div-class-header .div-class-navWrapper{float: left;margin-left: 7px;}/*设置导航条中的li*/.ul-class-nav > li{float: left;list-style: none;height: 100px;line-height: 100px;}/*设置导航条*/.div-class-header .ul-class-nav{/*width: 850px;*/padding-left: 58px;}.div-class-navWrapper li a{font-size: 16px;margin-right: 20px;color: #333333;}.div-class-navWrapper li a:hover{color: #ff6700;}/*隐藏全部商品*/.a-class-allGoods{/*隐藏且占据位置*/visibility: hidden;}.ul-class-nav .div-class-goodsInfo{width: 100%;height: 0px;background-color: #0086b3;position: absolute;top: 100px;left: 0;overflow: hidden;transition: height 0.3s;z-index: 9999;}/*goodsInfo的相对定位元素*/.div-class-headerWrapper{position: relative;}.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,.div-class-goodsInfo:hover{height: 228px;border-top: 1px solid rgb(224,224,224);box-shadow: 0 5px 3px rgba(0,0,0,.3);}/*搜索框*/.div-class-searchWrapper{width: 296px;height: 50px;background-color: red;float: right;margin-top: 25px;border: 1px solid rgb(224,224,224);}.div-class-searchWrapper .input-class-searchInp{border: none;float: left;height: 50px;width: 224px;padding: 0 10px;font-size: 16px;}.div-class-searchWrapper .button-class-searchBtn{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border-left: 1px solid rgb(224,224,224);}/*设置input获取焦点后的样式*/.div-class-searchWrapper .input-class-searchInp:focus,.div-class-searchWrapper .input-class-searchInp:focus + button{outline: 2px solid #ff6700;}.div-class-searchWrapper .button-class-searchBtn:hover{background-color: #ff6700;color: white;border: none;}/*设置左侧导航条样式*/.li-allGoodsWrapper{position: relative;/*background-color: red;*/}.ul-leftMenu{width: 234px;height: 420px;background-color: rgba(0,0,0,.6);position: absolute;z-index: 999;left: -120px;line-height: 1;padding: 20px 0;}ul.ul-leftMenu li{list-style: none;}ul.ul-leftMenu li a{display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}ul.ul-leftMenu li a:hover{color: white;background-color: #ff6700;}.ul-leftMenu a i{float: right;line-height: 42px;}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（11）完成banner
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>小米商城</title></head><body><!--创建顶部导航条--><!--顶部导航条外部容器--><div class="div-class-topBarWrapper"><!--创建内容容器--><div class="div-class-topBar w clearFix"><!-- 左侧导航--><ul class="ul-class-service"><li><a href="javascript:;">小米商城</a></li><li class="li-class-line">|</li><li><a href="javascript:;">MIUI</a></li><li class="li-class-line">|</li><li><a href="javascript:;">IoT</a></li><li class="li-class-line">|</li><li><a href="javascript:;">云服务</a></li><li class="li-class-line">|</li><li><a href="javascript:;">金融</a></li><li class="li-class-line">|</li><li><a href="javascript:;">有品</a></li><li class="li-class-line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="li-class-line">|</li><li><a href="javascript:;">企业团购</a></li><li class="li-class-line">|</li><li><a href="javascript:;">资质证明</a></li><li class="li-class-line">|</li><li><a href="javascript:;">协议规则</a></li><li class="li-class-line">|</li><li><a class="a-class-app" href="javascript:;">下载APP<div class="div-class-qrCode"><img src="./server/小米.jpg" /><span>小米商城APP</span></div></a></li><li class="li-class-line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!--考虑到浮动布局--><!--购物车--><ul class="ul-class-shopCart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车(0)</a></li></ul><!--用户登录注册--><ul class="ul-class-userInfo"><li><a href="javascript:;">登录</a></li><li class="li-class-line">|</li><li><a href="javascript:;">注册</a></li><li class="li-class-line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><!--创建一个头部的外部容器--><div class="div-class-headerWrapper"><div class="div-class-header w clearFix"><h1 class="h1-class-logo" title="小米">小米官网<a class="a-class-home" href="/vue"></a><a class="a-class-mi" href="/vue"></a></h1><!--创建中间导航条的容器--><div class="div-class-navWrapper"><!--创建导航条--><ul class="ul-class-nav clearFix"><li class="li-allGoodsWrapper"><a class="a-class-allGoods" href="javascript:;">全部商品分类</a><!--创建左侧的导航菜单--><ul class="ul-leftMenu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li><li class="li-class-showGoods"><a href="javascript:;">小米手机</a></li><li class="li-class-showGoods"><a href="javascript:;">Red mi红米</a></li><li><a href="javascript:;">电视</a></li><li class="li-class-showGoods"><a href="javascript:;">笔记本</a></li><li class="li-class-showGoods"><a href="javascript:;">家电</a></li><li class="li-class-showGoods"><a href="javascript:;">路由器</a></li><li class="li-class-showGoods"><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!--创建一个弹出层--><div class="div-class-goodsInfo"></div></ul></div><!--创建搜索框的容器--><div class="div-class-searchWrapper"><form class="form-class-search" action="#"><input class="input-class-searchInp" type="text"/><button class="button-class-searchBtn"><i class="fas fa-search"></i></button></form></div></div></div><!--创建banner的容器--><div class="div-bannerWrapper"><div class="div-banner w"><ul class="ul-imgList"><li><a href="#"><img src="./server/banner1.jpg" /></a></li><li><a href="#"><img src="./server/banner2.jpg" /></a></li><li><a href="#"><img src="./server/banner3.jpg" /></a></li><li><a href="#"><img src="./server/banner4.jpg" /></a></li><li><a href="#"><img src="./server/banner5.jpg" /></a></li></ul><div class="div-pointer"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="div-prevNext"><a class="a-prev" href="javascript:;"><i class="fas fa-chevron-left"></i></a><a class="a-next" href="javascript:;"><i class="fas fa-chevron-right"></i></a></div></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.导航条*//*设置一个类,表示中间容器的宽度*/.w{/*固定容易宽度*/width: 1226px;/*设置容器居中*/margin: 0 auto;/*不让宽度过小时,容器溢出*/min-width: 1226px;}/*顶部导航条容器*/.div-class-topBarWrapper{/*设置宽度全屏*/width: 100%;/*设置背景色*//*设置行高*/height: 40px;line-height: 40px;background-color: #333333;}/*设置超链接的颜色*/.div-class-topBar a{font-size: 12px;color: #cccccc;display: block;}.div-class-topBar a:hover{color: white;}.div-class-topBar .li-class-line{color: #424242;font-size: 12px;margin: 0 8px;}/*清除a的下划线*/a{text-decoration: none;color: #cccccc;}/*设置左侧导航栏*/.ul-class-service,.div-class-topBar li{float: left;list-style: none;}/*神来之笔,自己牛批*/.div-class-topBar li a{display: block;line-height: 40px;}.ul-class-shopCart,.ul-class-userInfo{float: right;}/*设置购物车的样式*/.ul-class-shopCart a{width: 120px;background-color: #424242;text-align: center;}.ul-class-shopCart:hover a{background-color: white;color: #ff6700;}/*设置下载APP的下拉*/.a-class-app .div-class-qrCode{position: absolute;width: 124px;/*height: 148px;*/height: 0;background-color: white;line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,.3);left: -38px;overflow: hidden;/*display: none;*//* transition:用于设置过渡效果*/transition: height 0.3s;z-index: 99999;}/*设置二维码的图片*/.a-class-app .div-class-qrCode img{width: 90px;margin: 17px;}/*设置二维码的文字*/.a-class-app .div-class-qrCode span{color: black;font-size: 14px;}/*给app开启相对定位*/.a-class-app{position: relative;}.a-class-app:hover .div-class-qrCode,.a-class-app:hover::after{display: block;height: 148px;}/*设置app下的小三角*//*li:hover .a-class-app::after*/.a-class-app::after{/*设置四个边框为透明颜色*/display: none;content: '';/*开启绝对对位*/position: absolute;width: 0;height: 0;border: 10px solid transparent;/*去除上边框*/border-top: none;border-bottom-color: white;bottom: 0;left: 0;right: 0;margin: auto;}/*li:hover>.a-class-app .div-class-qrCode{display: block;}*//*设置中间的header*/.div-class-header{height: 100px;background-color: #669900;}.div-class-header .h1-class-logo{float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;overflow: hidden;/*为了让写的小米官网不显示,但是要写*/text-indent: -9999px;}.div-class-header .h1-class-logo a{/* display: block;*/position: absolute;width: 55px;height: 55px;background-color: #ff6700;background-image: url("../server/logo.jpg");background-position: center;background-repeat: no-repeat;transition: left 0.3s;left: 0;}.div-class-header .h1-class-logo .a-class-home{left: -55px;background-image:url("../server/home.jpg") ;}/*设置图标引入后的位置*/.div-class-header .h1-class-logo:hover .a-class-mi{left:55px;}.div-class-header .h1-class-logo:hover .a-class-home{left: 0px;}/*头部的导航条*/.div-class-header .div-class-navWrapper{float: left;margin-left: 7px;}/*设置导航条中的li*/.ul-class-nav > li{float: left;list-style: none;height: 100px;line-height: 100px;}/*设置导航条*/.div-class-header .ul-class-nav{/*width: 850px;*/padding-left: 58px;}.div-class-navWrapper li a{font-size: 16px;margin-right: 20px;color: #333333;}.div-class-navWrapper li a:hover{color: #ff6700;}/*隐藏全部商品*/.a-class-allGoods{/*隐藏且占据位置*/visibility: hidden;}.ul-class-nav .div-class-goodsInfo{width: 100%;height: 0px;background-color: #0086b3;position: absolute;top: 100px;left: 0;overflow: hidden;transition: height 0.3s;z-index: 9999;}/*goodsInfo的相对定位元素*/.div-class-headerWrapper{position: relative;}.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,.div-class-goodsInfo:hover{height: 228px;border-top: 1px solid rgb(224,224,224);box-shadow: 0 5px 3px rgba(0,0,0,.3);}/*搜索框*/.div-class-searchWrapper{width: 296px;height: 50px;background-color: red;float: right;margin-top: 25px;border: 1px solid rgb(224,224,224);}.div-class-searchWrapper .input-class-searchInp{border: none;float: left;height: 50px;width: 224px;padding: 0 10px;font-size: 16px;}.div-class-searchWrapper .button-class-searchBtn{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border-left: 1px solid rgb(224,224,224);}/*设置input获取焦点后的样式*/.div-class-searchWrapper .input-class-searchInp:focus,.div-class-searchWrapper .input-class-searchInp:focus + button{outline: 2px solid #ff6700;}.div-class-searchWrapper .button-class-searchBtn:hover{background-color: #ff6700;color: white;border: none;}/*设置左侧导航条样式*/.li-allGoodsWrapper{position: relative;/*background-color: red;*/}.ul-leftMenu{width: 234px;height: 420px;background-color: rgba(0,0,0,.6);position: absolute;z-index: 999;left: -120px;line-height: 1;padding: 20px 0;}ul.ul-leftMenu li{list-style: none;}ul.ul-leftMenu li a{display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}ul.ul-leftMenu li a:hover{color: white;background-color: #ff6700;}.ul-leftMenu a i{float: right;line-height: 42px;}/*banner的样式*/.div-banner{position: relative;height: 460px;}.div-banner img{width: 1226px;height: 460px;vertical-align: top;}.div-banner .ul-imgList li{position: absolute;list-style: none;}.div-pointer{position: absolute;bottom: 22px;right: 25px;}.div-pointer a{float: left;width: 6px;height: 6px;border: 3px solid rgba(255,0,255,.4);border-radius: 50%;background-color: rgba(0,0,0,.4);margin-left: 6px;}.div-pointer a:hover,.div-pointer a:active{border-color: rgba(0,0,0,.4);background-color: rgba(255,0,255,.4);}.div-prevNext a{width: 38px;height: 69px;background: gray;position: absolute;top: 0;bottom: 0;margin: auto 0;text-align: center;}.div-prevNext a i{height: 69px;line-height: 69px;font-size: large;}.div-prevNext .a-prev{left: 234px;}.div-prevNext .a-next{right: 2px;}.div-prevNext a:hover{background-color: #333333;}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（12）右侧工具条
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>小米商城</title></head><body><!--创建顶部导航条--><!--顶部导航条外部容器--><div class="div-class-topBarWrapper"><!--创建内容容器--><div class="div-class-topBar w clearFix"><!-- 左侧导航--><ul class="ul-class-service"><li><a href="javascript:;">小米商城</a></li><li class="li-class-line">|</li><li><a href="javascript:;">MIUI</a></li><li class="li-class-line">|</li><li><a href="javascript:;">IoT</a></li><li class="li-class-line">|</li><li><a href="javascript:;">云服务</a></li><li class="li-class-line">|</li><li><a href="javascript:;">金融</a></li><li class="li-class-line">|</li><li><a href="javascript:;">有品</a></li><li class="li-class-line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="li-class-line">|</li><li><a href="javascript:;">企业团购</a></li><li class="li-class-line">|</li><li><a href="javascript:;">资质证明</a></li><li class="li-class-line">|</li><li><a href="javascript:;">协议规则</a></li><li class="li-class-line">|</li><li><a class="a-class-app" href="javascript:;">下载APP<div class="div-class-qrCode"><img src="./server/小米.jpg" /><span>小米商城APP</span></div></a></li><li class="li-class-line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!--考虑到浮动布局--><!--购物车--><ul class="ul-class-shopCart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车(0)</a></li></ul><!--用户登录注册--><ul class="ul-class-userInfo"><li><a href="javascript:;">登录</a></li><li class="li-class-line">|</li><li><a href="javascript:;">注册</a></li><li class="li-class-line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><!--创建一个头部的外部容器--><div class="div-class-headerWrapper"><div class="div-class-header w clearFix"><h1 class="h1-class-logo" title="小米">小米官网<a class="a-class-home" href="/vue"></a><a class="a-class-mi" href="/vue"></a></h1><!--创建中间导航条的容器--><div class="div-class-navWrapper"><!--创建导航条--><ul class="ul-class-nav clearFix"><li class="li-allGoodsWrapper"><a class="a-class-allGoods" href="javascript:;">全部商品分类</a><!--创建左侧的导航菜单--><ul class="ul-leftMenu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li><li class="li-class-showGoods"><a href="javascript:;">小米手机</a></li><li class="li-class-showGoods"><a href="javascript:;">Red mi红米</a></li><li><a href="javascript:;">电视</a></li><li class="li-class-showGoods"><a href="javascript:;">笔记本</a></li><li class="li-class-showGoods"><a href="javascript:;">家电</a></li><li class="li-class-showGoods"><a href="javascript:;">路由器</a></li><li class="li-class-showGoods"><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!--创建一个弹出层--><div class="div-class-goodsInfo"></div></ul></div><!--创建搜索框的容器--><div class="div-class-searchWrapper"><form class="form-class-search" action="#"><input class="input-class-searchInp" type="text"/><button class="button-class-searchBtn"><i class="fas fa-search"></i></button></form></div></div></div><!--创建banner的容器--><div class="div-bannerWrapper"><div class="div-banner w"><ul class="ul-imgList"><li><a href="#"><img src="./server/banner1.jpg" /></a></li><li><a href="#"><img src="./server/banner2.jpg" /></a></li><li><a href="#"><img src="./server/banner3.jpg" /></a></li><li><a href="#"><img src="./server/banner4.jpg" /></a></li><li><a href="#"><img src="./server/banner5.jpg" /></a></li></ul><div class="div-pointer"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="div-prevNext"><a class="a-prev" href="javascript:;"><i class="fas fa-chevron-left"></i></a><a class="a-next" href="javascript:;"><i class="fas fa-chevron-right"></i></a></div></div></div><div class="div-backTop"></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.导航条*//*设置一个类,表示中间容器的宽度*/.w{/*固定容易宽度*/width: 1226px;/*设置容器居中*/margin: 0 auto;/*不让宽度过小时,容器溢出*/min-width: 1226px;}/*顶部导航条容器*/.div-class-topBarWrapper{/*设置宽度全屏*/width: 100%;/*设置背景色*//*设置行高*/height: 40px;line-height: 40px;background-color: #333333;}/*设置超链接的颜色*/.div-class-topBar a{font-size: 12px;color: #cccccc;display: block;}.div-class-topBar a:hover{color: white;}.div-class-topBar .li-class-line{color: #424242;font-size: 12px;margin: 0 8px;}/*清除a的下划线*/a{text-decoration: none;color: #cccccc;}/*设置左侧导航栏*/.ul-class-service,.div-class-topBar li{float: left;list-style: none;}/*神来之笔,自己牛批*/.div-class-topBar li a{display: block;line-height: 40px;}.ul-class-shopCart,.ul-class-userInfo{float: right;}/*设置购物车的样式*/.ul-class-shopCart a{width: 120px;background-color: #424242;text-align: center;}.ul-class-shopCart:hover a{background-color: white;color: #ff6700;}/*设置下载APP的下拉*/.a-class-app .div-class-qrCode{position: absolute;width: 124px;/*height: 148px;*/height: 0;background-color: white;line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,.3);left: -38px;overflow: hidden;/*display: none;*//* transition:用于设置过渡效果*/transition: height 0.3s;z-index: 99999;}/*设置二维码的图片*/.a-class-app .div-class-qrCode img{width: 90px;margin: 17px;}/*设置二维码的文字*/.a-class-app .div-class-qrCode span{color: black;font-size: 14px;}/*给app开启相对定位*/.a-class-app{position: relative;}.a-class-app:hover .div-class-qrCode,.a-class-app:hover::after{display: block;height: 148px;}/*设置app下的小三角*//*li:hover .a-class-app::after*/.a-class-app::after{/*设置四个边框为透明颜色*/display: none;content: '';/*开启绝对对位*/position: absolute;width: 0;height: 0;border: 10px solid transparent;/*去除上边框*/border-top: none;border-bottom-color: white;bottom: 0;left: 0;right: 0;margin: auto;}/*li:hover>.a-class-app .div-class-qrCode{display: block;}*//*设置中间的header*/.div-class-header{height: 100px;background-color: #669900;}.div-class-header .h1-class-logo{float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;overflow: hidden;/*为了让写的小米官网不显示,但是要写*/text-indent: -9999px;}.div-class-header .h1-class-logo a{/* display: block;*/position: absolute;width: 55px;height: 55px;background-color: #ff6700;background-image: url("../server/logo.jpg");background-position: center;background-repeat: no-repeat;transition: left 0.3s;left: 0;}.div-class-header .h1-class-logo .a-class-home{left: -55px;background-image:url("../server/home.jpg") ;}/*设置图标引入后的位置*/.div-class-header .h1-class-logo:hover .a-class-mi{left:55px;}.div-class-header .h1-class-logo:hover .a-class-home{left: 0px;}/*头部的导航条*/.div-class-header .div-class-navWrapper{float: left;margin-left: 7px;}/*设置导航条中的li*/.ul-class-nav > li{float: left;list-style: none;height: 100px;line-height: 100px;}/*设置导航条*/.div-class-header .ul-class-nav{/*width: 850px;*/padding-left: 58px;}.div-class-navWrapper li a{font-size: 16px;margin-right: 20px;color: #333333;}.div-class-navWrapper li a:hover{color: #ff6700;}/*隐藏全部商品*/.a-class-allGoods{/*隐藏且占据位置*/visibility: hidden;}.ul-class-nav .div-class-goodsInfo{width: 100%;height: 0px;background-color: #0086b3;position: absolute;top: 100px;left: 0;overflow: hidden;transition: height 0.3s;z-index: 9999;}/*goodsInfo的相对定位元素*/.div-class-headerWrapper{position: relative;}.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,.div-class-goodsInfo:hover{height: 228px;border-top: 1px solid rgb(224,224,224);box-shadow: 0 5px 3px rgba(0,0,0,.3);}/*搜索框*/.div-class-searchWrapper{width: 296px;height: 50px;background-color: red;float: right;margin-top: 25px;border: 1px solid rgb(224,224,224);}.div-class-searchWrapper .input-class-searchInp{border: none;float: left;height: 50px;width: 224px;padding: 0 10px;font-size: 16px;}.div-class-searchWrapper .button-class-searchBtn{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border-left: 1px solid rgb(224,224,224);}/*设置input获取焦点后的样式*/.div-class-searchWrapper .input-class-searchInp:focus,.div-class-searchWrapper .input-class-searchInp:focus + button{outline: 2px solid #ff6700;}.div-class-searchWrapper .button-class-searchBtn:hover{background-color: #ff6700;color: white;border: none;}/*设置左侧导航条样式*/.li-allGoodsWrapper{position: relative;/*background-color: red;*/}.ul-leftMenu{width: 234px;height: 420px;background-color: rgba(0,0,0,.6);position: absolute;z-index: 999;left: -120px;line-height: 1;padding: 20px 0;}ul.ul-leftMenu li{list-style: none;}ul.ul-leftMenu li a{display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}ul.ul-leftMenu li a:hover{color: white;background-color: #ff6700;}.ul-leftMenu a i{float: right;line-height: 42px;}/*banner的样式*/.div-banner{position: relative;height: 460px;}.div-banner img{width: 1226px;height: 460px;vertical-align: top;}.div-banner .ul-imgList li{position: absolute;list-style: none;}.div-pointer{position: absolute;bottom: 22px;right: 25px;}.div-pointer a{float: left;width: 6px;height: 6px;border: 3px solid rgba(255,0,255,.4);border-radius: 50%;background-color: rgba(0,0,0,.4);margin-left: 6px;}.div-pointer a:hover,.div-pointer a:active{border-color: rgba(0,0,0,.4);background-color: rgba(255,0,255,.4);}.div-prevNext a{width: 38px;height: 69px;background: gray;position: absolute;top: 0;bottom: 0;margin: auto 0;text-align: center;}.div-prevNext a i{height: 69px;line-height: 69px;font-size: large;}.div-prevNext .a-prev{left: 234px;}.div-prevNext .a-next{right: 2px;}.div-prevNext a:hover{background-color: #333333;}/*设置回到顶部的元素*/.div-backTop{width: 26px;height: 206px;background-color: orange;/*开启固定定位*/position: fixed;bottom: 360px;right: 50%;margin-right: -639px;}/*布局等式*//*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（13）中间的广告栏
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>小米商城</title></head><body><!--创建顶部导航条--><!--顶部导航条外部容器--><div class="div-class-topBarWrapper"><!--创建内容容器--><div class="div-class-topBar w clearFix"><!-- 左侧导航--><ul class="ul-class-service"><li><a href="javascript:;">小米商城</a></li><li class="li-class-line">|</li><li><a href="javascript:;">MIUI</a></li><li class="li-class-line">|</li><li><a href="javascript:;">IoT</a></li><li class="li-class-line">|</li><li><a href="javascript:;">云服务</a></li><li class="li-class-line">|</li><li><a href="javascript:;">金融</a></li><li class="li-class-line">|</li><li><a href="javascript:;">有品</a></li><li class="li-class-line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="li-class-line">|</li><li><a href="javascript:;">企业团购</a></li><li class="li-class-line">|</li><li><a href="javascript:;">资质证明</a></li><li class="li-class-line">|</li><li><a href="javascript:;">协议规则</a></li><li class="li-class-line">|</li><li><a class="a-class-app" href="javascript:;">下载APP<div class="div-class-qrCode"><img src="./server/小米.jpg" /><span>小米商城APP</span></div></a></li><li class="li-class-line">|</li><li><a href="javascript:;">Select Location</a></li></ul><!--考虑到浮动布局--><!--购物车--><ul class="ul-class-shopCart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车(0)</a></li></ul><!--用户登录注册--><ul class="ul-class-userInfo"><li><a href="javascript:;">登录</a></li><li class="li-class-line">|</li><li><a href="javascript:;">注册</a></li><li class="li-class-line">|</li><li><a href="javascript:;">消息通知</a></li></ul></div></div><!--创建一个头部的外部容器--><div class="div-class-headerWrapper"><div class="div-class-header w clearFix"><h1 class="h1-class-logo" title="小米">小米官网<a class="a-class-home" href="/vue"></a><a class="a-class-mi" href="/vue"></a></h1><!--创建中间导航条的容器--><div class="div-class-navWrapper"><!--创建导航条--><ul class="ul-class-nav clearFix"><li class="li-allGoodsWrapper"><a class="a-class-allGoods" href="javascript:;">全部商品分类</a><!--创建左侧的导航菜单--><ul class="ul-leftMenu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li><li class="li-class-showGoods"><a href="javascript:;">小米手机</a></li><li class="li-class-showGoods"><a href="javascript:;">Red mi红米</a></li><li><a href="javascript:;">电视</a></li><li class="li-class-showGoods"><a href="javascript:;">笔记本</a></li><li class="li-class-showGoods"><a href="javascript:;">家电</a></li><li class="li-class-showGoods"><a href="javascript:;">路由器</a></li><li class="li-class-showGoods"><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!--创建一个弹出层--><div class="div-class-goodsInfo"></div></ul></div><!--创建搜索框的容器--><div class="div-class-searchWrapper"><form class="form-class-search" action="#"><input class="input-class-searchInp" type="text"/><button class="button-class-searchBtn"><i class="fas fa-search"></i></button></form></div></div></div><!--创建banner的容器--><div class="div-bannerWrapper"><div class="div-banner w"><ul class="ul-imgList"><li><a href="#"><img src="./server/banner1.jpg" /></a></li><li><a href="#"><img src="./server/banner2.jpg" /></a></li><li><a href="#"><img src="./server/banner3.jpg" /></a></li><li><a href="#"><img src="./server/banner4.jpg" /></a></li><li><a href="#"><img src="./server/banner5.jpg" /></a></li></ul><div class="div-pointer"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="div-prevNext"><a class="a-prev" href="javascript:;"><i class="fas fa-chevron-left"></i></a><a class="a-next" href="javascript:;"><i class="fas fa-chevron-right"></i></a></div></div></div><!--固定的工具条--><div class="div-backTop"></div><!--创建广告的容器--><div class="div-ad w"><ul class="ul-shortCut"><li><a href="#"><i class="fas fa-clock"></i>小米秒杀</a></li><li><a href="#"><i class="fas fa-building"></i>企业团购</a></li><li><a href="#"><i class="fas fa-frog"></i>F码通道</a></li><li><a href="#"><i class="fas fa-robot"></i>米粉卡</a></li><li><a href="#"><i class="fas fa-keyboard"></i>以旧换新</a></li><li><a href="#"><i class="fas fa-phone"></i>话费充值</a></li></ul><ul class="ul-adImg"><li><a href="#"><img src="./server/ad1.jpg" /></a></li><li><a href="#"><img src="./server/ad2.jpg" /></a></li><li><a href="#"><img src="./server/ad3.jpg" /></a></li></ul></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.导航条*//*设置一个类,表示中间容器的宽度*/.w{/*固定容易宽度*/width: 1226px;/*设置容器居中*/margin: 0 auto;/*不让宽度过小时,容器溢出*/min-width: 1226px;}/*顶部导航条容器*/.div-class-topBarWrapper{/*设置宽度全屏*/width: 100%;/*设置背景色*//*设置行高*/height: 40px;line-height: 40px;background-color: #333333;}/*设置超链接的颜色*/.div-class-topBar a{font-size: 12px;color: #cccccc;display: block;}.div-class-topBar a:hover{color: white;}.div-class-topBar .li-class-line{color: #424242;font-size: 12px;margin: 0 8px;}/*清除a的下划线*/a{text-decoration: none;color: #cccccc;}/*设置左侧导航栏*/.ul-class-service,.div-class-topBar li{float: left;list-style: none;}/*神来之笔,自己牛批*/.div-class-topBar li a{display: block;line-height: 40px;}.ul-class-shopCart,.ul-class-userInfo{float: right;}/*设置购物车的样式*/.ul-class-shopCart a{width: 120px;background-color: #424242;text-align: center;}.ul-class-shopCart:hover a{background-color: white;color: #ff6700;}/*设置下载APP的下拉*/.a-class-app .div-class-qrCode{position: absolute;width: 124px;/*height: 148px;*/height: 0;background-color: white;line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,.3);left: -38px;overflow: hidden;/*display: none;*//* transition:用于设置过渡效果*/transition: height 0.3s;z-index: 99999;}/*设置二维码的图片*/.a-class-app .div-class-qrCode img{width: 90px;margin: 17px;}/*设置二维码的文字*/.a-class-app .div-class-qrCode span{color: black;font-size: 14px;}/*给app开启相对定位*/.a-class-app{position: relative;}.a-class-app:hover .div-class-qrCode,.a-class-app:hover::after{display: block;height: 148px;}/*设置app下的小三角*//*li:hover .a-class-app::after*/.a-class-app::after{/*设置四个边框为透明颜色*/display: none;content: '';/*开启绝对对位*/position: absolute;width: 0;height: 0;border: 10px solid transparent;/*去除上边框*/border-top: none;border-bottom-color: white;bottom: 0;left: 0;right: 0;margin: auto;}/*li:hover>.a-class-app .div-class-qrCode{display: block;}*//*设置中间的header*/.div-class-header{height: 100px;background-color: #669900;}.div-class-header .h1-class-logo{float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;overflow: hidden;/*为了让写的小米官网不显示,但是要写*/text-indent: -9999px;}.div-class-header .h1-class-logo a{/* display: block;*/position: absolute;width: 55px;height: 55px;background-color: #ff6700;background-image: url("../server/logo.jpg");background-position: center;background-repeat: no-repeat;transition: left 0.3s;left: 0;}.div-class-header .h1-class-logo .a-class-home{left: -55px;background-image:url("../server/home.jpg") ;}/*设置图标引入后的位置*/.div-class-header .h1-class-logo:hover .a-class-mi{left:55px;}.div-class-header .h1-class-logo:hover .a-class-home{left: 0px;}/*头部的导航条*/.div-class-header .div-class-navWrapper{float: left;margin-left: 7px;}/*设置导航条中的li*/.ul-class-nav > li{float: left;list-style: none;height: 100px;line-height: 100px;}/*设置导航条*/.div-class-header .ul-class-nav{/*width: 850px;*/padding-left: 58px;}.div-class-navWrapper li a{font-size: 16px;margin-right: 20px;color: #333333;}.div-class-navWrapper li a:hover{color: #ff6700;}/*隐藏全部商品*/.a-class-allGoods{/*隐藏且占据位置*/visibility: hidden;}.ul-class-nav .div-class-goodsInfo{width: 100%;height: 0px;background-color: #0086b3;position: absolute;top: 100px;left: 0;overflow: hidden;transition: height 0.3s;z-index: 9999;}/*goodsInfo的相对定位元素*/.div-class-headerWrapper{position: relative;}.ul-class-nav .li-class-showGoods:hover ~ .div-class-goodsInfo,.div-class-goodsInfo:hover{height: 228px;border-top: 1px solid rgb(224,224,224);box-shadow: 0 5px 3px rgba(0,0,0,.3);}/*搜索框*/.div-class-searchWrapper{width: 296px;height: 50px;background-color: red;float: right;margin-top: 25px;border: 1px solid rgb(224,224,224);}.div-class-searchWrapper .input-class-searchInp{border: none;float: left;height: 50px;width: 224px;padding: 0 10px;font-size: 16px;}.div-class-searchWrapper .button-class-searchBtn{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border-left: 1px solid rgb(224,224,224);}/*设置input获取焦点后的样式*/.div-class-searchWrapper .input-class-searchInp:focus,.div-class-searchWrapper .input-class-searchInp:focus + button{outline: 2px solid #ff6700;}.div-class-searchWrapper .button-class-searchBtn:hover{background-color: #ff6700;color: white;border: none;}/*设置左侧导航条样式*/.li-allGoodsWrapper{position: relative;/*background-color: red;*/}.ul-leftMenu{width: 234px;height: 420px;background-color: rgba(0,0,0,.6);position: absolute;z-index: 999;left: -120px;line-height: 1;padding: 20px 0;}ul.ul-leftMenu li{list-style: none;}ul.ul-leftMenu li a{display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}ul.ul-leftMenu li a:hover{color: white;background-color: #ff6700;}.ul-leftMenu a i{float: right;line-height: 42px;}/*banner的样式*/.div-banner{position: relative;height: 460px;}.div-banner img{width: 1226px;height: 460px;vertical-align: top;}.div-banner .ul-imgList li{position: absolute;list-style: none;}.div-pointer{position: absolute;bottom: 22px;right: 25px;}.div-pointer a{float: left;width: 6px;height: 6px;border: 3px solid rgba(255,0,255,.4);border-radius: 50%;background-color: rgba(0,0,0,.4);margin-left: 6px;}.div-pointer a:hover,.div-pointer a:active{border-color: rgba(0,0,0,.4);background-color: rgba(255,0,255,.4);}.div-prevNext a{width: 38px;height: 69px;background: gray;position: absolute;top: 0;bottom: 0;margin: auto 0;text-align: center;}.div-prevNext a i{height: 69px;line-height: 69px;font-size: large;}.div-prevNext .a-prev{left: 234px;}.div-prevNext .a-next{right: 2px;}.div-prevNext a:hover{background-color: #333333;}/*设置回到顶部的元素*/.div-backTop{width: 26px;height: 206px;background-color: orange;/*开启固定定位*/position: fixed;bottom: 360px;right: 50%;margin-right: -639px;}/*布局等式*//*----------------*/.div-ad{/*background-color: red;*/height: 170px;margin-top: 14px;}.div-ad .ul-shortCut,.div-ad .ul-adImg{float: left;}.div-ad li{float: left;list-style: none;}/*设置左侧的快捷方式*/.div-ad .ul-shortCut{width: 234px;height: 168px;background-color: #5f5750;margin-right: 14px;padding-top: 2px;}/*设置左侧的图片*/.div-ad .ul-adImg li{width: 316px;margin-right: 15px;}.div-ad .ul-adImg li:last-child{margin:0;}.div-ad .ul-adImg img{width: 100%;vertical-align: top;}.div-ad .ul-shortCut a{display: block;color: #cfccca;height: 84px;width: 76px;text-align: center;font-size: 12px;overflow: hidden;}.div-ad .ul-shortCut i{display: block;margin-top: 20px;font-size: 20px;margin-bottom: 6px;}.div-ad .ul-shortCut a:hover{color: #fff;}.div-ad .ul-shortCut li{position: relative;}.div-ad .ul-shortCut li::before{content: '';position: absolute;width: 64px;height: 1px;background-color: #665e57;left: 0;right: 0;top: 0;margin: 0 auto;}/*设置左边框*/.div-ad .ul-shortCut li::after{content: '';position: absolute;width: 1px;height: 70px;background-color: #665e57;left: 0;bottom: 0;top: 0;margin: auto 0;}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（14）项目补充
<!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />7.CSS动画
（1）过渡
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>过渡</title><!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="div-box1"><div class="div-box2"></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.过渡 transition2.通过过渡可以指定一个属性变化时的切换属性3.通过过渡效果可以创建一些非常好的效果,提升用户的体验4.transition-property指定要过渡的属性,多个使用逗号隔开;多个属性可以使用all。大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值过渡到另外一个有效数值。5.transition-duration 指定过渡效果的持续时间;1s=1000ms.6.transition-timing-function过渡的时序函数,是匀速变化还是加速变化。ease默认值:慢速开始,先加速再减速linear:线性的,均速运动ease-in:加速运动ease-out:减速运动ease-in-out:先加速后加速,与ease有点小区别贝赛尔曲线指定。steps()分布执行过渡效果steps(2,start/end)7.transition-delay过渡效果的延迟,等待一段时间后,再执行过渡效果。*/.div-box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.div-box1 div{width: 100px;height: 100px;margin-bottom: 100px;}.div-box2{background-color: #669900;transition: all 2s;/*transition-property: ;transition-duration: ;*//* margin-left: 700px;*//*transition-timing-function: ease-in-out;*//* transition-delay: 2s;*/}.div-box1:hover .div-box2{width: 200px;height: 200px;/* margin-left: 0;*/}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（2）米兔练习
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>过渡</title><!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="div-box1"></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.米兔*/.div-box1{/*279 146*/background-image: url("../server/rabbit.jpg");width: 68px;height: 146px;margin: 0 auto;background-position: 0 0;transition: all 0.3s steps(3);}.div-box1:hover{background-position: -204px 0;}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（3）动画animation
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>动画</title><!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="div-box1"><div class="div-box2"></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>  
/*1.动画:与过渡类似,都可以实现动态效果,过渡需要在某个属性发生变化时才能触发,而动画不需要,可以自动触发。2.设置动画,必须设置关键帧。关键帧规定了动画执行的每个步骤。animation-name:关键帧名字animation-duration:动画的持续时间animation-iteration-count:动画执行的次数,infinite无限执行animation-direction:指定动画运行方向,默认是normal,reverse反向执行/alternate重复执行时反向执行animation-play-state:动画执行/暂停animation-fill-mode:动画填充模式,none执行完毕回到开始位置,forwards:执行到哪里停到哪里/backwards回去/both:结合两种模式*/.div-box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.div-box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.div-box2{background-color: #63a35c;/*transition: 2s;*//*设置box2的动画*/animation-name: test;animation-duration: 2s;/*动画延时*//* animation-delay: 1s;*/animation-iteration-count: 3;/* 动画执行方向*//*animation-direction: normal;*//*动画的执行状态*//*animation-play-state: running;*//* 动画填充模式*//* animation-fill-mode: none;*/}/*.div-box1:hover div{margin-left: 700px;}*/@keyframes test {/*动画开始位置*/from{margin-left: 0;}/*动画的结束位置*/to{margin-left: 700px;}}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;} （4）奔跑的少年
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>奔跑的少年</title><!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="div-box1"></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.奔跑的少年*/.div-box1{/*387*64*/width: 65px;height: 64px;margin: 0 auto;background-image: url("../server/runningMan.jpg");animation: run 1s steps(6) infinite;}/*创建关键帧*/@keyframes run {from{background-position: 0 0;}to{/*由于背景会平铺,所以定位到-387也会显示第一个图片*/background-position: -387px 0;}}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}（5）关键帧
<!--这里就是表示HTML5--><!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org"xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml"><head><!--http-equiv设置http协议--><meta http-equiv="Content-Type"content="application/json;charset=UTF-8"><title>跳跳球</title><!--设置网站的图标,标题栏与收藏栏,一般存在网站的跟目录下,名字叫favicon.ico--><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="div-outer"><div class="div-box1"></div><div class="div-box2"></div><div class="div-box3"></div><div class="div-box4"></div><div class="div-box5"></div><div class="div-box6"></div><div class="div-box7"></div><div class="div-box8"></div><div class="div-box9"></div></div></body><!--自己定义的JS--><script src="./res/Controller.js" ></script><!--自己定义的CSS--><link rel="stylesheet" href="./res/Controller.css" /><!--图标字体库--><link rel="stylesheet" href="./res/css/all.css"/></html>/*1.关键帧*/.div-outer div{height: 100px;width: 100px;border-radius: 50%;background-color: #bfa;animation: ball 0.5s forwards linear infinite alternate;float: left;}.div-outer{height: 500px;border-bottom: 10px black solid;margin: 50px auto;overflow: hidden;}div.div-box2{background-color: yellow;animation-delay: .1s;}div.div-box3{background-color: yellowgreen;animation-delay: .2s;}div.div-box4{background-color: blue;animation-delay: .3s;}div.div-box5{background-color: pink;animation-delay: .4s;}div.div-box6{background-color: tomato;animation-delay: .5s;}div.div-box7{background-color: skyblue;animation-delay: .6s;}div.div-box8{background-color: chocolate;animation-delay: .7s;}div.div-box9{background-color: navajowhite;animation-delay: .8s;}/*创建小球下落的动作*/@keyframes ball {from{margin-top: 0;}to{margin-top: 400px;}/*66%{margin-top: 100px;}20%,60%,to{margin-top:400px;animation-timing-function: ease-in;}*/}/*------------------------------默认的代码*/*{margin: 0px;padding: 0px;font: 14px "Microsoft YaHei UI";}.clearFix::before,.clearFix::after{content: '';display: table;clear: both;}
HTML+CSS从入门到精通（三）

相关文章

变电站综合自动化系统：Modbus-PLC-645转IEC104网关方案

mac用Homebrew安装MySQL并配置远程登录

Vue组合式API进阶:深入了解进阶API

C++——STL容器——vector

深入理解C++中的仿函数（Functors）

【设计模式】使用策略模式优化表单校验逻辑

安全再升级，亚信安慧AntDB数据库与亚信安全二次牵手完成兼容性互认证

R和Python市场篮分析算法及行为分析模型

重学数论1：不定方程的引入

「网络安全常用术语解读」SBOM主流格式SPDX详解

复旦微JFM7VX690计算后IO接口模块，用于雷达信号处理、数据处理等需要高速密集计算的应用场景

Java面试八股之Java中数组有没有length()方法？String呢？为什么？

《Redis使用手册之有序集合》

【redis】Redis数据类型(三)List类型

[笔试强训day06]

Matlab图像处理——基于BP神经网络的车牌标识识别系统

2024 一带一路暨金砖国家技能发展与技术创新大赛【企业信息系统安全赛项】选拔赛样题

element-plus中使用el-switch时，用‘0，1’或者0,1来代替true，false绑定

企业计算机服务器中了rmallox勒索病毒怎么处理，rmallox勒索病毒处理建议

mysql 删除数据，导致存在表空间碎片的解决方法
