作业问题。
来源:2-10 作业题
滚回去立正坐好
2019-09-01 22:18:47
*{
padding:0;
margin:0;
font-family:'微软雅黑';
}
/*头部*/
.header{
width:100%;
background-color: #07cbc9;
height:80px;
line-height: 80px;
position:fixed;
z-index: 4;
top:0;
}
.header .logo{
float:left;
margin-top:16px;
margin-left:100px;
}
.header .logo img{
width:240px;
height:48px;
}
.header .nav{
float:right;
margin-right:60px;
}
.header .nav ul li{
list-style: none;
display: inline-block;
}
.header .nav ul li a{
color:#fff;
text-decoration: none;
padding:0 35px;
font-weight: bold;
}
.header .nav ul li:hover{
background-color:#000;
cursor:pointer;
}
.clear{
clear:both;
}
/*banner区*/
.banner{
width:100%;
height:600px;
}
.banner img{
width:100%;
height:600px;
}
.bannerlayer{
width:100%;
height:520px;/*?高度疑问,不应该是600px吗*/
background-color:#000;
opacity:0.5;
position:absolute;
top:80px;
left:0;
}
.bannerlayer-1{
width:550px;
height:350px;
/*background-color: blue;*/
position:absolute;
top:340px;
left:50%;
margin-top:-175px;
margin-left:-275px;
z-index:2;
}
.bannerlayer-1 form{
display: block;
text-align: center;
}
.bannerlayer-1 form input{
background-color: transparent;
margin:6px 0;
color:#fff;
border:2px solid #C0C0C0;
}
.bannerlayer-1 form .xinxi1{
width:505px;
height:39px;
}
.bannerlayer-1 form .xinxi2{
width:505px;
height:115px;
}
.bannerlayer-1 form .xinxi3{
width:123px;
height:39px;
}
.xinxi3:hover{
background-color: #07cbc9;
border-width:0;
cursor:pointer;
}
.xinxi1:hover{
border:2px solid #07cbc9;
cursor:pointer;
}
.xinxi2:hover{
border:2px solid #07cbc9;
cursor:pointer;
}
/*about区域*/
.about{
width:100%;
height:auto;
background:#fff;
}
.about .about-top{
width:600px;
height:250px;
margin:0 auto;
}
.word{
font-size:40px;
font-weight:bold;
text-align: center;
padding-top:50px;
}
hr{
border:2px solid #07cbc9;
width:50px;
margin:0 auto;
margin-top:15px;
}
.word-content{
padding-top:15px;
color:#7d7d7f;
font-size:15px;
text-align:center;
}
/*about-middle中部区域*/
/*about中部左边内容*/
.about .about-middle{
width:1250px;
height:465px;
margin:0 auto;
overflow: hidden;
zoom:1;
}
.aboutmiddle-left,.aboutmiddle-middle,.aboutmiddle-right{
float:left;
}
.aboutmiddle-left{
width:370px;
}
.aboutmiddle-left1{
width:210px;
font-size:35px;
text-align: center;
margin-left:90px;
/*为什么移动aboutmiddle-left1的左外边距值,
.aboutmiddle-left2的位置会随之变化呢,是浮动影响的吗。
可是.aboutmiddle-left2设置了绝对定位了啊*/
}
.aboutmiddle-left2{
width:370px;
height:246px;
border:1px solid #C0C0C0;
position:absolute;
margin-left:90px;
background-color: rgba(255,255,255,.5);
z-index:2;
}
.aboutmiddle-left2 form{
padding-left:20px;
}
.aboutmiddle-left2 form input{
background-color:#000;
color:#fff;
width:102px;
height:45px;
}
.aboutmiddle-left2 p{
padding:24px;
}
.aboutmiddle-middle img{
width:568px;
height:380px;
opacity:0.85;
}
/*aboutmiddle-right右部内容*/
.aboutmiddle-right .aboutmiddle-right1,.aboutmiddle-right2{
width:238px;
height:144px;
border:1px solid #07cbc9;
margin-left:30px;
}
.aboutmiddle-right .word1{
font-weight: bold;
font-size: 25px;
text-align: center;
padding-top:25px;
}
.aboutmiddle-right .aboutmiddle-right1 hr,
.aboutmiddle-right .aboutmiddle-right2 hr{
width:40px;
border:1px solid #07cbc9;
margin:0 auto;
margin-top:20px;
}
.aboutmiddle-right .word2{
padding-top:20px;
font-size: 18px;
text-align: center;
}
.aboutmiddle-right .aboutmiddle-right2{
margin-top:20px;
}
.aboutmiddle-left2 .submit2:hover{
background-color:transparent;
border:1px solid #000;
color:#000;
cursor: pointer;
}
/*about底部内容*/
.about-bottom{
width:100%;
min-height: 800px;
color:#fff;
overflow: hidden;
zoom:1;
}
.about-bottom .aboutbottom2{
width:25%;
height:396px;
float:left;
}
.about-bottom > .border1:after{
content:"";
width:0;
height:0;
border:15px solid #07cbc9;
border-color:transparent #07cbc9 transparent transparent;
position:absolute;
/*margin-top:193px;
right:1012px;*/
top:0;
right:0;
margin-top:190.5px;
} /*小三角形border1怎么实现靠图片右边居中显示呢*/
.about-bottom > .border2:after{
content:"";
width:0;
height:0;
border:15px solid #07cbc9;
border-color:transparent #07cbc9 transparent transparent;
position:absolute;
/*margin-top:193px;
right:337px;*/
top:0;
right:0;
margin-top:190.5px;
}
.about-bottom > .border3:before{
content:"";
width:0;
height:0;
border:15px solid #07cbc9;
border-color:transparent transparent transparent #07cbc9;
position:absolute;
/*left:337px;
margin-top:589px;*/
top:0;
left:0;
margin-top:190.5px;
}
.about-bottom > .border4:before{
content:"";
width:0;
height:0;
border:15px solid #07cbc9;
border-color:transparent transparent transparent #07cbc9;
position:absolute;
/*right:308px;
margin-top:589px;*/
top:0;
left:0;
margin-top:190.5px;
}
.about-bottom .aboutbottom1{
position:relative;
width:25%;
height:396px;
float:left;
}
.about-bottom .aboutbottom1 img{
width:100%;
height:396px;
/*display:block;
float:left;*/
}
.about-bottom .aboutbottom2{
background-color: #07cbc9;
}
.aboutbottom2 .word3{
padding-top:50px;
margin-left:50px;
font-size:30px;
}
.aboutbottom2 .word4{
padding-top:30px;
padding-left:50px;
font-size:19px;
}
.aboutbottom2 .word5{
padding-top:25px;
padding-left:50px;
font-size:15px;
}
.aboutbottom2 form{
text-align: center;
padding-top:37px;
}
.aboutbottom2 form input{
background-color:#000;
color:#fff;
width:102px;
height:45px;
}
.aboutbottom2 input:hover{
background-color:rgba(255,255,255,0);
border-style: none;
border:2px solid #000;
color:#000;
cursor: pointer;
}
/*gallery区域*/
.gallery{
width:100%;
height:auto;
}
.gallery-top .word-content p{
width:500px;
margin:0 auto; /*怎么去掉行与行之间的缝隙*/
}
.gallery-bottom{
width:1146px;
height:780px;
margin:0 auto;
overflow: hidden;
zoom:1; /*请问一下gallery-bottom部分居中原理是什么样的
宽度值1146px和padding值设置为10px有什么联系吗。
是拔河效应吗?我把padding-right/left值设置为5px
,好像就不居中了,为什么呢。问得很小白,麻烦了*/
}
.gallery-bottom .gallery-picline1{
padding-top:50px;
}
.gallery-bottom .gallery-picline1 .pic1{
float:left;
padding-right:10px;
padding-left:10px;
font-size:0;
}
.gallery-bottom .gallery-picline2 .pic2{
margin-top: 10px;
padding-right:10px;
padding-left:10px;
float:left;
font-size:0;
}
.gallery-bottom img{
width:360px;
height:240px;
}
.gallery-bottom p{
height:64px;
width:360px;
border:0px solid #000;
background-color: #000;
color:#fff;
text-align: center;
line-height: 64px;
font-size:17px;
}
/*footer底部内容*/
.footer{
width:100%;
height:80px;
background-color: #07cbc9;
font-size: 17px;
color:#fff;
text-align: center;
line-height: 80px;
}怎么去除边框样式。为什么.aboutbottom1的宽度值要设置为25%,而.aboutbottom1 img的宽度值设置为100%。为什么不是.aboutbottom1的宽度值设为100%,.aboutbottom1 img的值设置为25%呢。设置了100%不是就覆盖了整个页面了吗,为什么页面显示图片只占了25%呢。
1回答
好帮手慕夭夭
2019-09-02
你好同学,没有上传html代码,一定要把完整的代码都粘贴到问答区域,以便老师帮助你查找问题。另外,如果代码太多,问题也比较多的时候,可以在作业区域上传作业。会有专门批作业的老师,对作业中存在的问题进行详细指导,并整理成文档发送给同学。这样更便于你对的问题的整理与作业的完善哦。

祝学习愉快,望采纳。
相似问题