作业问题。

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

http://img.mukewang.com/climg/5d6c84c50001402c04480301.jpg

祝学习愉快,望采纳。

0

0 学习 · 40143 问题

查看课程