作业问题。
来源: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代码,一定要把完整的代码都粘贴到问答区域,以便老师帮助你查找问题。另外,如果代码太多,问题也比较多的时候,可以在作业区域上传作业。会有专门批作业的老师,对作业中存在的问题进行详细指导,并整理成文档发送给同学。这样更便于你对的问题的整理与作业的完善哦。
祝学习愉快,望采纳。
相似问题