感谢老师的提醒，效果实现了，但是却发现不了自己在哪设置的隐藏。一直对base.css很疑惑
css.css到按钮部分代码
.header-top{
min-width: 1152px;
height: 150px;
background-color: rgb(228, 187, 187);
}
.A{
min-width: 1152px;
height: 32px;
background-color: #2A2A2A ;
line-height: 32px;
}
.header-top .A .center-wrap{
}
.header-top .A .center-wrap .right .iconfont{
float: right;
margin-right: 16px;
line-height: 32px;
}
.header-top .A .center-wrap .right .iconfont:first-child{
margin-right: 0;
}
.header-top .A .center-wrap .right .dr,.zc{
font-size: 12px;
color: #FFFFFF;
text-align: justify;
line-height: 32px;
}
.header-top .A .center-wrap .A1{
float: left;
}
.header-top .A .center-wrap .A1> ul> li{
/* 大于号表示父亲的第一任儿子 */
font-size: 14px;
float: left;
margin-right: 18px;
}
.header-top a{
font-family: PingFangSC-Regular;
color: #FFFFFF;
text-align: justify;
line-height: 18px;
}
.header-top .A .center-wrap .A1> ul> li.a1{
/* li里面本身的一个a1元素用交集 */
padding-right:12px;
position: relative;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu{
/* 应该用top这样盒子就会在a1顶部往下延伸 */
position: absolute;
top:32px;
left: 0;
width: 121px;
background-color:rgba(0,0,0,0.20) ;
display: none;
box-shadow: 0 4px 8px 0;
z-index: 9999;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua2{
width: 72px;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua2 a{
color: black;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu .menua3{
}
.header-top .A .center-wrap .A1>ul>li:hover .menu{
display: block;
}
.header-top .A .center-wrap .A1> ul> li.a1 .B{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform 0.2s linear 0s;
}
.header-top .A .center-wrap .A1> ul> li.a1:hover .B{
transform:rotate(180deg)
}
/* 先两个盒子使用绝对定位然后微调，然后大盒子hover，
之后控制大盒子transition旋转速度 */
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa1{
position: absolute;
left: 2px;
top: 4px;
width: 6px;
height: 6px;
background-color: rgb(248, 248, 246);
transform: rotate(45deg);
}
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa2{
position: absolute;
top: 2px;
left: 2px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.main-nav{
min-width: 1152px;
background-color: #20BD9A;
height: 40px;
}
.main-nav .center-wrap ul li{
float: left;
margin-right: 18px;
line-height: 40px;
font-size: 16px;
position: relative;
}
.main-nav .center-wrap ul li .ddwl{
position: absolute;
width: 172px;
top:40px;
left: 0;
background-color: rgb(207, 231, 100);
display: none;
z-index: 9999;
}
.main-nav .center-wrap ul li .ddwl a{
/* 自己权重上a标签不要写错了 */
color: black;
}
.main-nav .center-wrap ul li:hover .ddwl{
display: block;
}
.main-nav .center-wrap ul li{
padding-right: 16px;
}
.main-nav .center-wrap ul li .b1{
position: absolute;
right: 0;
top: 50%;
margin-top: 0px;
/* transparent透明色 */
border: 8px solid transparent;
border-top-color:white;
border-bottom: none;
transition: transform 0.2s linear 0s;
}
.main-nav .center-wrap ul li:hover .b1{
transform: rotate(180deg);
}
.log-area{
height: 78px;
background-color: #fff;
}
.log-area h1{
float: left;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 78px;
margin-right: 20px;
}
.log-area input{
float: left;
width: 373px;
height: 30px;
opacity: 0.3;
border: 1px solid #20BD9A;
border-radius: 8px 0 0 8px;
margin-top: 24px;
/* 取消默认的外线（外线是文本框特有的东西） */
outline: none;
}
.log-area .iconfont{
float: left;
margin-top: 24px;
width: 32px;
height: 30px;
background-color: #20BD9A;
border-radius: 0 4px 4px 0;
font-size: 20px;
text-align: center;
line-height: 30px;
}
.banner{
position: relative;
width: 100%;
height: 100%;
}
.banner img{
min-width: 1152px;
width: 100%;
height: 100%;
/* 这是一个小技巧，添加后就不会产生小缝隙了 */
vertical-align: middle;
}
.banner .center-wrap{
position: absolute;
background-color: rgb(216, 240, 145);
width: 1152px;
height: 100%;
top: 0;
left: 50%;
margin-left:-576px;
//隐藏可见
//overflow: visible;
}
.banner .center-wrap .left-btn{
position: absolute;
width: 28px;
height: 44px;
background:url(../images/icons.png) no-repeat -21px -94px;
left:-38px;
top: 50%;
margin-top: -22px;
}
.banner .left-btn:hover{
opacity: 0.8;
}
.banner .right-btn{
position: absolute;
width: 28px;
height: 44px;
/* 精灵技术先导入图片 */
background:url(../images/icons.png) no-repeat -21px -29px;
right: 0px;
top: 50%;
margin-top: -22px;
}
.banner .right-btn:hover{
opacity: 0.8;
}
base.css里面的设置
.clearfix {
overflow: hidden;
}
/* 给这个类名赋予了清除浮动的功能 */
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
p{
margin: 0;
padding: 0;
}
.tac {
text-align: center;
}
/* 给这个类名赋予了居中的功能 */
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
a {
text-decoration: none;
}
body{
font-family: PingFangSC-Regular;
}
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff2') format('woff2'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img{
display: block;
}
在这里输入代码，可通过选择【代码语言】突出显示
正在回答
同学你好，base.css里面存放重设浏览器默认的样式和通用的css样式，这样能减少代码量，使代码更精简，复用率提高；同学在使用这个base.css的时候，如果没有使用里面的类名.clearfix的话，是不会影响到页面效果的。同学的代码效果实现了，建议先不去纠结自己在哪里设置了样式，老师建议同学把出现问题的部分，单独拎出来多练习几遍，这样效果做的多了，以后再遇到类似的问题，就能够很好的把问题解决掉；
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星