小米官网首屏纯css代码

admin管理员组

文章数量:1530842

2024年1月22日发(作者：)

/左侧导航条/.left-nav{/开启绝对定位/position: absolute;height: 440px;width: 234px;padding-top: 20px;background-color: rgba(0,0,0,.6);top: 100px;/left: 0;/margin-left: -55px;z-index: 999;}/设置链接样式/.left-nav li{height: 42px;line-height: 42px;}/设置超链接的样式/.left-nav li a{display: block;height: 42px;color: white;font-size: 14px;padding-left: 30px;}.left-nav li a::after{content: ‘f105’;font-size: 20px;font-family: ‘Font Awesome 5 Free’;font-weight: 900;float: right;margin-right: 30px;}.left-nav li a:hover{background-color: #ff6700;color: #fff;}.header-nav .hide-list{position: absolute;top: 100px;height: 0;overflow: hidden;left: 0;/height: 230px;/width: 100%;background-color: #ffffff;z-index: 333333;

}.header-nav .action-hide:hover ~ .hide-list,.header-nav .action-hide:hover{ border-top: 1px solid #b0b0b0;height: 230px;}.header .search{float: right;margin-top: 25px;position: relative;}.header .search input[type=“text”]{float: left;width: 231px;height: 48px;border: 1px solid #e0e0e0;font-size: 14px;padding: 0 0px 0 10px;outline: none;}/表单的消失/.search input[type=“text”]:focus ,.search input[type=“text”]:focus~button{border-color: #ff6700;}.search input[type=“text”]:focus~.searchdown{display: block;border-color: #ff6700;}.search >form>a{display: block;}.search input[type=“text”]:focus~a{display: none;}.search .searchdown{position: absolute;top:50px;width: 241px;height:200px;border: 1px solid #b0b0b0;display: none;z-index: 1111;}.search .searchdown li a{display: block;text-decoration: none;font-size: 13px;padding-top: 3px;padding-left: 10px;}.search .searchdown li a:hover{color: #ff6700;background-color: #e0e0e0;}

}/表单消失jieshu/.header .search button{float: left;width: 50px;height: 50px;font-size: 20px;color: #616161;background-color: #ffffff;border: 1px solid #e0e0e0;border-left: none;padding: 0;outline: none;}.header .search button:hover{color: #ffffff;background-color: #ff6700;}/点击时表单边框都改变/.header .search input[type=“text”]:focus,.header .search input[type=“text”]:focus+button{border-color:#ff6700;}.header .search .left{position: absolute;font-size: 12px;top: 20px;background-color: #b0b0b0;left: 210px;text-align: center;}.header .search .right{position: absolute;font-size: 12px;margin:auto;left: 150px;top: 20px;text-align: center;background-color: #b0b0b0;}.header .search .right:hover,.header .search .left:hover{background-color: #ff6700;}.banner{height: 460px;width: 1226px;margin: 0 auto;position: relative;}.banner .img-list li{position: absolute;

}.banner img{width: 100%;}.banner .point{position: absolute;right: 26px;bottom: 34px;}.banner .point a{display: block;float: left;width: 6px;height: 6px;border: 2px solid rgba(255,255,255,.3);background-color: rgba(0,0,0,.4);border-radius: 50px;margin-left: 10px;}/.banner .point .active 该点常亮/.banner .point a:hover,.banner .point .active{border-color: rgba(0,0,0,.4);background-color: rgba(255,255,255,.3);}.banner .slide a{position: absolute;width: 41px;height: 69px;background-image: url("…/img/");z-index: 99999;/* 垂直居中*/top: 0;bottom: 0;margin: auto 0;}.slide .prev{position: absolute;left: 234px;background-position: -84px 0;}.slide .next{position: absolute;right: 0;background-position: -125px 0;}.slide .prev:hover{background-position: 0 0;}.slide .next:hover{background-position: -42px 0;}

本文标签： 表单首屏官网设置样式