老师gallery部分图片下方黑色部分怎么设置

来源：4-3 项目作业

Wonwayshon

2020-09-03 15:22:54

老师gallery部分图片下方黑色部分怎么设置，我使用span但是img并没有把span块撑开，给span设置底色发现span也没有包裹img

<!DOCTYPE html>
<html>
<head>
	<title>Career Builder</title>
	<link type="text/css" rel="stylesheet" href="cb.css"/>
	<script type="text/javascript" src="cb.js"></script>
</head>
<body>
	<div id="banner">
		<div id="banner-fixed">
			<img id="banner-logo" src="images/logo.png"/>
			<ul>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">EVENTS</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">HOME</a></li>
			</ul>
		</div>
		<div id="banner-top">
			<img id="banner-top-image" src="images/banner3.jpg"/>
			<div id="banner-top-text">
				<form>
					<input id="t1" class="t" type="text" name="yourName" value="YOUR NAME"/>
					<input id="t2" class="t" type="text" name="yourPhone" value="YOUR PHONE"/>
					<input id="t3" class="t" type="text" name="yourEmail" value="YOUR EMAIL"/>
					<textarea id="t4" name="yourComment"/>WRITE YOUR COMMENT HERE</textarea> 
					<input id="t5" type="submit" name="send" value="SEND MESSAGE"/>
			    </form>
			</div>
		</div>
	</div>
	<div id="about">
		<h1 id="h1-about">ABOUT</h1>
		<div id="p1">
			<label id="line1"></label>
			<p id="about-text-top">
				The professional skill appraising center was set up in our college in 2003, and was approved by the Labor Department of Anhui province. 166 of the staff have acquired the qualification for assessor of professional skill. 
			</p>
			<img src="images/bb3.jpg" id="about-image"/>
			<div id="about-left">
				<p id="about-text-left1">
					A WORD ABOUT US
				</p>
				<div id="about-block-left">
					<p id="about-text-left2">
						The professional qualification tests for 20 different kinds of professions, such as fitter, wireless assembler, electrician and turner, can be carried out here. 3500 students can take their professional skill appraising examinations here every year.
					</p>
					<button id="about-btn1" href="#">EXPLORE</button>
				</div>
				<div id="about-right">
					<div id="about-block-right1">
						<h1>70000</h1>
						<label id="line2"></label>
						<p class="block-right">Students</p>
					</div>
					<div id="about-block-right2">
						<h1>600</h1>
						<label id="line3"></label>
						<p class="block-right">Faculty</p>
					</div>
				</div>
			</div>
		</div>
		<div id="detail">
			<img class="detail-image" src="images/b1.jpg">
			<div id="detail-t1" class="detail-textblock">
				<p class="detail-textblock-title">Library</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.	
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b2.jpg">
			<div id="detail-t2" class="detail-textblock">
				<p class="detail-textblock-title">Computer Lab</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.	
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<div id="detail-t3" class="detail-textblock">
				<p class="detail-textblock-title">Conference Hall</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b3.jpg">
			<div id="detail-t4" class="detail-textblock">
				<p class="detail-textblock-title">Playground</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b4.jpg">
		</div>
	</div>
	<div id="gallery">
		<h1 id="h1-gallery">GALLERY</h1>
		<div id="p2">
			<label id="line3"></label>
			<p id="gallery-text-top">
				The professional skill appraising center was set up in our college in 2003, and was approved by the Labor Department of Anhui province. 166 of the staff have acquired the qualification for assessor of professional skill. 
			</p>
			<div id="gallery-images">
				<span class="gallery-image-span"><img class="gallery-image" src="images/03-01.jpg"></span>
				<span class="gallery-image-span">
					<img class="gallery-image" src="images/03-02.jpg">
				</span>
				<span class="gallery-image-span">
					<img class="gallery-image" src="images/03-03.jpg">
				</span>
				<span class="gallery-image-span">
					<img class="gallery-image" src="images/03-04.jpg">
				</span>
				<span class="gallery-image-span">
					<img class="gallery-image" src="images/03-05.jpg">
				</span>
				<span class="gallery-image-span">
					<img class="gallery-image" src="images/03-06.jpg">
				</span>
			</div>
		</div>
	</div>
</body>
</html>


/*全页面格式设置*/
*{
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: "Microsoft YaHei UI";
}
/*Banner区块格式设置*/
#banner #banner-fixed{
	width: 100%;
	height: 66px;
	background-color: #07cbc9;
	position: fixed;
	z-index: 100;
}
/*Banner区图片格式设置*/
#banner #banner-fixed #banner-logo{
	float: left;
	margin-left: 60px;
	position: relative;
	top: 9px;
}
/*Banner区列表总格式设置*/
#banner #banner-fixed ul{
	margin-right:60px;
	overflow: hidden;
}
/*Banner区列表格式设置*/
#banner #banner-fixed ul li{
	list-style: none;
	float: right;
	overflow: hidden;
	width: 95px;
	text-align: center;
}
/*Banner区列表鼠标悬浮格式变化*/
#banner #banner-fixed ul li:hover{
	background-color: black;
}
/*Banner区列表内文字格式设置*/
#banner #banner-fixed ul li a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	line-height: 66px;
}
/*Banner文本区底图设置*/
#banner #banner-top #banner-top-image{
	margin-top: 65px;
	width: 100%;
	height: 500px;
	float: left;
	z-index: 80;
	margin-bottom: 50px
}
/*Banner文本区块格式设置*/
#banner #banner-top #banner-top-text{
	float: left;
	position: absolute;
	z-index: 90;
	top: 120px;
	width: 34%;
	left: 33%;
	text-align: center;
}
/*Banner文本框批量格式设置*/
#banner #banner-top #banner-top-text .t{
	width: 100%;
	margin-top: 18px;
	height: 26px;
	opacity: 0.4;
	padding: 6px;
	background-color: black;
	color: white;
	border-color: #ffffff;
}
/*Banner文本框提交按钮格式设置*/
#banner #banner-top #banner-top-text #t5{
	opacity: 0.4;
	height: 36px;
	width: 120px;
	background-color: black;
	color: white;
	border-color: #ffffff;
	margin: 12px auto;
}
/*Banner大文本框格式设置*/
#banner #banner-top #banner-top-text textarea{
	width: 100%;
	margin-top: 18px;
	height: 90px;
	opacity: 0.4;
	padding: 6px;
	background-color: black;
	color: white;
	resize: none;
	border-color: #ffffff;
}
/*ABOUT区块标题格式设置*/
#about #h1-about{
	text-align: center;
}
/*ABOUT区块p1总格式设置*/
#about #p1{
	height: 620px;
}
/*ABOUT区简介文字格式设置*/
#about #p1 #about-text-top{
	margin-top: -10px;
	margin-left: 26%;
	margin-bottom: 20px;
	text-align: center;
	width: 48%;
	opacity: 0.4;
}
/*ABOUT区短横线格式设置*/
#about #p1 #line1{
	background-color: #07cbc9;
	width: 2%;
	height: 2px;
	margin: 18px auto;
	display: block;
}
/*ABOUT区简介图片格式设置*/
#about #p1 #about-image{
	margin-left: 25%;
	margin-right: auto;
	float: left;
}
/*ABOUT左侧标题格式设置*/
#about #p1 #about-text-left1{
	font-size: 30px;
	text-align: center;
	width: 200px;
	position: absolute;
	left: 9%;
}
/*ABOUT左侧说明框格式设置*/
#about #p1 #about-block-left{
	border: solid;
	border-color: rgba(0,0,0,0.4);
	position: absolute;
	left: 10%;
	top: 835px;
	width: 400px;
	height: 260px;
	background-color: rgba(255,255,255,0.4);

}
/*ABOUT左侧说明框文本格式设置*/
#about #p1 #about-text-left2{
	margin:20px;
	line-height: 23px
}
/*ABOUT左侧说明框按钮格式设置*/
#about #p1 #about-btn1{
	opacity: 1;
	width: 90px;
	height: 40px;
	margin-left:20px;
	color: white;
	background-color: black;
}
/*ABOUT右侧说明框上格式设置*/
#about #p1 #about-right #about-block-right1{
	border: solid; 
	border-color: #07cbc9;
	position: absolute;
	width: 220px;
	height: 110px;
	text-align: center;
	margin-left: 77%;
	padding: 25px;
}
/*ABOUT右侧说明框上短横线设置*/
#about #p1 #about-right #about-block-right1 #line2{
	background-color: #07cbc9;
	width: 16%;
	height: 2px;
	margin: 20px auto 12px auto;
	display: block;
}
/*ABOUT右侧说明框下格式设置*/
#about #p1 #about-right #about-block-right2{
	border: solid; 
	border-color: #07cbc9;
	position: absolute;
	width: 220px;
	height: 110px;
	text-align: center;
	margin-left: 77%;
	padding: 25px;
	margin-top: 200px;
}
/*ABOUT右侧说明框下短横线设置*/
#about #p1 #about-right #about-block-right2 #line3{
	background-color: #07cbc9;
	width: 16%;
	height: 2px;
	margin: 20px auto 12px auto;
	display: block;
}
/*ABOUT右侧说明框内文字批量设置*/
#about #p1 #about-right .block-right{
	font-weight: bold;
	font-size: 18px;
}
/*ABOUT部分Detail区块设置*/
#about #detail{
	width: 100%;
	padding-bottom: 50%;
	background-color: #07cbc9;
	margin-bottom: 60px;
}
/*ABOUT部分Detail区块图片批量设置*/
#about #detail .detail-image{
	vertical-align: top;
	width: 25%;
	float: left;
}
/*ABOUT部分Detail区块文字块批量设置*/
#about #detail .detail-textblock{
	width: 25%;
	height: 329px;
	float: left;
	background-color: rgba(0,0,0,0);
}
/*ABOUT部分Detail区块文字块标题批量设置*/
#about #detail .detail-textblock-title{
	color: white;
	font-size: 26px;
	margin-top: 20px;
	margin-left: 20px;
}
/*ABOUT部分Detail区块文字块内容1批量设置*/
#about #detail .detail-textblock-content1{
	color: white;
	font-size: 16px;
	margin-left: 20px;
	margin-right: 18px;
	margin-top: 20px;
	font-weight: 400;
	line-height: 25px;
}
/*ABOUT部分Detail区块文字块内容2批量设置*/
#about #detail .detail-textblock-content2{
	color: white;
	font-size: 14px;
	margin-left: 20px;	
	margin-right: 18px;
	margin-top: 10px;
	font-weight: 200;
	line-height: 22px;
}
/*ABOUT部分Detail区块文字块按钮批量设置*/
#about #detail .about-btn2{
	opacity: 1;
	width: 100px;
	height: 36px;
	margin-left:34%;
	margin-top: 20px;
	color: white;
	background-color: black;
	font-size: 10px;
}
/*Gallery区块标题格式设置*/
#gallery #h1-gallery{
	text-align: center;
}
/*Gallery区短横线格式设置*/
#gallery #p2 #line3{
	background-color: #07cbc9;
	width: 2%;
	height: 2px;
	margin: 18px auto;
	display: block;
}
/*Gallery区简介文字格式设置*/
#gallery #p2 #gallery-text-top{
	margin-top: -10px;
	margin-left: 26%;
	margin-bottom: 20px;
	text-align: center;
	width: 48%;
	opacity: 0.4;
}
/*Gallery区图片总格式设置*/
#gallery #gallery-images{
	text-align: center;
}
/*Gallery区图片span总设置*/
#gallery .gallery-image-span{
	height: 500px;
	width: 25%;
	padding-bottom: 25%;
	background-color: black;
}
/*Gallery区图片格式批量设置*/
#gallery .gallery-image{
	width: 25%;
}

写回答

2回答

好帮手慕小尤

2020-09-03

已采纳

同学你好，建议同学使用div进行实现，设置6个小div，在div中定义img与span标签，然后为其设置样式布局。修改后代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<title>Career Builder</title>
	<link type="text/css" rel="stylesheet" href="cb.css"/>
	<script type="text/javascript" src="cb.js"></script>
</head>
<body>
	<div id="banner">
		<div id="banner-fixed">
			<img id="banner-logo" src="images/logo.png"/>
			<ul>
				<li><a href="#">CONTACT</a></li>
				<li><a href="#">EVENTS</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">HOME</a></li>
			</ul>
		</div>
		<div id="banner-top">
			<img id="banner-top-image" src="images/banner3.jpg"/>
			<div id="banner-top-text">
				<form>
					<input id="t1" class="t" type="text" name="yourName" value="YOUR NAME"/>
					<input id="t2" class="t" type="text" name="yourPhone" value="YOUR PHONE"/>
					<input id="t3" class="t" type="text" name="yourEmail" value="YOUR EMAIL"/>
					<textarea id="t4" name="yourComment"/>WRITE YOUR COMMENT HERE</textarea> 
					<input id="t5" type="submit" name="send" value="SEND MESSAGE"/>
			    </form>
			</div>
		</div>
	</div>
	<div id="about">
		<h1 id="h1-about">ABOUT</h1>
		<div id="p1">
			<label id="line1"></label>
			<p id="about-text-top">
				The professional skill appraising center was set up in our college in 2003, and was approved by the Labor Department of Anhui province. 166 of the staff have acquired the qualification for assessor of professional skill. 
			</p>
			<img src="images/bb3.jpg" id="about-image"/>
			<div id="about-left">
				<p id="about-text-left1">
					A WORD ABOUT US
				</p>
				<div id="about-block-left">
					<p id="about-text-left2">
						The professional qualification tests for 20 different kinds of professions, such as fitter, wireless assembler, electrician and turner, can be carried out here. 3500 students can take their professional skill appraising examinations here every year.
					</p>
					<button id="about-btn1" href="#">EXPLORE</button>
				</div>
				<div id="about-right">
					<div id="about-block-right1">
						<h1>70000</h1>
						<label id="line2"></label>
						<p class="block-right">Students</p>
					</div>
					<div id="about-block-right2">
						<h1>600</h1>
						<label id="line3"></label>
						<p class="block-right">Faculty</p>
					</div>
				</div>
			</div>
		</div>
		<div id="detail">
			<img class="detail-image" src="images/b1.jpg">
			<div id="detail-t1" class="detail-textblock">
				<p class="detail-textblock-title">Library</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.	
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b2.jpg">
			<div id="detail-t2" class="detail-textblock">
				<p class="detail-textblock-title">Computer Lab</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.	
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<div id="detail-t3" class="detail-textblock">
				<p class="detail-textblock-title">Conference Hall</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b3.jpg">
			<div id="detail-t4" class="detail-textblock">
				<p class="detail-textblock-title">Playground</p>
				<p class="detail-textblock-content1">
					The center has a capacity of 1250 where students can do experiments and training. 
				</p>
				<p class="detail-textblock-content2">
					 97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
				</p>
				<button class="about-btn2" href="#">EXPLORE</button>
			</div>
			<img class="detail-image" src="images/b4.jpg">
		</div>
	</div>
	<div id="gallery">
		<h1 id="h1-gallery">GALLERY</h1>
		<div id="p2">
			<label id="line3"></label>
			<p id="gallery-text-top">
				The professional skill appraising center was set up in our college in 2003, and was approved by the Labor Department of Anhui province. 166 of the staff have acquired the qualification for assessor of professional skill. 
			</p>
			<div id="gallery-images">
				<div class="icon2 ">
					<img src="images/03-01.jpg" alt="">
					<div class="des1">Science Lab</div>
				</div>
				<div class="icon2">
					<img src="images/03-02.jpg" alt="">
					<div class="des1">Indoor Stadium</div>
				</div>
				<div class="icon2">
					<img src="images/03-03.jpg" alt="">
					<div class="des1">Transportation</div>
				</div>
				<div class="icon2 ">
					<img src="images/03-04.jpg" alt="">
					<div class="des1">Kids Room</div>
				</div>
				<div class="icon2">
					<img src="images/03-05.jpg" alt="">
					<div class="des1">Meditation Classes</div>
				</div>
				<div class="icon2">
					<img src="images/03-06.jpg" alt="">
					<div class="des1">Kids Play Ground</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

好帮手慕小尤

2020-09-03

css代码如下所示：

/*全页面格式设置*/
*{
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: "Microsoft YaHei UI";
}
/*Banner区块格式设置*/
#banner #banner-fixed{
	width: 100%;
	height: 66px;
	background-color: #07cbc9;
	position: fixed;
	z-index: 100;
}
/*Banner区图片格式设置*/
#banner #banner-fixed #banner-logo{
	float: left;
	margin-left: 60px;
	position: relative;
	top: 9px;
}
/*Banner区列表总格式设置*/
#banner #banner-fixed ul{
	margin-right:60px;
	overflow: hidden;
}
/*Banner区列表格式设置*/
#banner #banner-fixed ul li{
	list-style: none;
	float: right;
	overflow: hidden;
	width: 95px;
	text-align: center;
}
/*Banner区列表鼠标悬浮格式变化*/
#banner #banner-fixed ul li:hover{
	background-color: black;
}
/*Banner区列表内文字格式设置*/
#banner #banner-fixed ul li a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	line-height: 66px;
}
/*Banner文本区底图设置*/
#banner #banner-top #banner-top-image{
	margin-top: 65px;
	width: 100%;
	height: 500px;
	float: left;
	z-index: 80;
	margin-bottom: 50px
}
/*Banner文本区块格式设置*/
#banner #banner-top #banner-top-text{
	float: left;
	position: absolute;
	z-index: 90;
	top: 120px;
	width: 34%;
	left: 33%;
	text-align: center;
}
/*Banner文本框批量格式设置*/
#banner #banner-top #banner-top-text .t{
	width: 100%;
	margin-top: 18px;
	height: 26px;
	opacity: 0.4;
	padding: 6px;
	background-color: black;
	color: white;
	border-color: #ffffff;
}
/*Banner文本框提交按钮格式设置*/
#banner #banner-top #banner-top-text #t5{
	opacity: 0.4;
	height: 36px;
	width: 120px;
	background-color: black;
	color: white;
	border-color: #ffffff;
	margin: 12px auto;
}
/*Banner大文本框格式设置*/
#banner #banner-top #banner-top-text textarea{
	width: 100%;
	margin-top: 18px;
	height: 90px;
	opacity: 0.4;
	padding: 6px;
	background-color: black;
	color: white;
	resize: none;
	border-color: #ffffff;
}
/*ABOUT区块标题格式设置*/
#about #h1-about{
	text-align: center;
}
/*ABOUT区块p1总格式设置*/
#about #p1{
	height: 620px;
}
/*ABOUT区简介文字格式设置*/
#about #p1 #about-text-top{
	margin-top: -10px;
	margin-left: 26%;
	margin-bottom: 20px;
	text-align: center;
	width: 48%;
	opacity: 0.4;
}
/*ABOUT区短横线格式设置*/
#about #p1 #line1{
	background-color: #07cbc9;
	width: 2%;
	height: 2px;
	margin: 18px auto;
	display: block;
}
/*ABOUT区简介图片格式设置*/
#about #p1 #about-image{
	margin-left: 25%;
	margin-right: auto;
	float: left;
}
/*ABOUT左侧标题格式设置*/
#about #p1 #about-text-left1{
	font-size: 30px;
	text-align: center;
	width: 200px;
	position: absolute;
	left: 9%;
}
/*ABOUT左侧说明框格式设置*/
#about #p1 #about-block-left{
	border: solid;
	border-color: rgba(0,0,0,0.4);
	position: absolute;
	left: 10%;
	top: 835px;
	width: 400px;
	height: 260px;
	background-color: rgba(255,255,255,0.4);

}
/*ABOUT左侧说明框文本格式设置*/
#about #p1 #about-text-left2{
	margin:20px;
	line-height: 23px
}
/*ABOUT左侧说明框按钮格式设置*/
#about #p1 #about-btn1{
	opacity: 1;
	width: 90px;
	height: 40px;
	margin-left:20px;
	color: white;
	background-color: black;
}
/*ABOUT右侧说明框上格式设置*/
#about #p1 #about-right #about-block-right1{
	border: solid; 
	border-color: #07cbc9;
	position: absolute;
	width: 220px;
	height: 110px;
	text-align: center;
	margin-left: 77%;
	padding: 25px;
}
/*ABOUT右侧说明框上短横线设置*/
#about #p1 #about-right #about-block-right1 #line2{
	background-color: #07cbc9;
	width: 16%;
	height: 2px;
	margin: 20px auto 12px auto;
	display: block;
}
/*ABOUT右侧说明框下格式设置*/
#about #p1 #about-right #about-block-right2{
	border: solid; 
	border-color: #07cbc9;
	position: absolute;
	width: 220px;
	height: 110px;
	text-align: center;
	margin-left: 77%;
	padding: 25px;
	margin-top: 200px;
}
/*ABOUT右侧说明框下短横线设置*/
#about #p1 #about-right #about-block-right2 #line3{
	background-color: #07cbc9;
	width: 16%;
	height: 2px;
	margin: 20px auto 12px auto;
	display: block;
}
/*ABOUT右侧说明框内文字批量设置*/
#about #p1 #about-right .block-right{
	font-weight: bold;
	font-size: 18px;
}
/*ABOUT部分Detail区块设置*/
#about #detail{
	width: 100%;
	/*padding-bottom: 50%;*/
	background-color: #07cbc9;
	margin-bottom: 60px;
	height: 660px;
}
/*ABOUT部分Detail区块图片批量设置*/
#about #detail .detail-image{
	vertical-align: top;
	width: 25%;
	height: 330px;
	float: left;
}
/*ABOUT部分Detail区块文字块批量设置*/
#about #detail .detail-textblock{
	width: 25%;
	height: 330px;
	float: left;
	background-color: rgba(0,0,0,0);
}
/*ABOUT部分Detail区块文字块标题批量设置*/
#about #detail .detail-textblock-title{
	color: white;
	font-size: 26px;
	margin-top: 20px;
	margin-left: 20px;
}
/*ABOUT部分Detail区块文字块内容1批量设置*/
#about #detail .detail-textblock-content1{
	color: white;
	font-size: 16px;
	margin-left: 20px;
	margin-right: 18px;
	margin-top: 20px;
	font-weight: 400;
	line-height: 25px;
}
/*ABOUT部分Detail区块文字块内容2批量设置*/
#about #detail .detail-textblock-content2{
	color: white;
	font-size: 14px;
	margin-left: 20px;	
	margin-right: 18px;
	margin-top: 10px;
	font-weight: 200;
	line-height: 22px;
}
/*ABOUT部分Detail区块文字块按钮批量设置*/
#about #detail .about-btn2{
	opacity: 1;
	width: 100px;
	height: 36px;
	margin-left:34%;
	margin-top: 20px;
	color: white;
	background-color: black;
	font-size: 10px;
}
/*Gallery区块标题格式设置*/
#gallery #h1-gallery{
	text-align: center;
}
/*Gallery区短横线格式设置*/
#gallery #p2 #line3{
	background-color: #07cbc9;
	width: 2%;
	height: 2px;
	margin: 18px auto;
	display: block;
}
/*Gallery区简介文字格式设置*/
#gallery #p2 #gallery-text-top{
	margin-top: -10px;
	margin-left: 26%;
	margin-bottom: 20px;
	text-align: center;
	width: 48%;
	opacity: 0.4;
}
/*Gallery区图片总格式设置*/
#gallery #gallery-images{
	width: 1170px;
	margin:0 auto;
	text-align: center;
}
#gallery #gallery-images .icon2{
	float: left;
	margin:15px;
	background: #000;
}
#gallery #gallery-images .icon2 .des1{
	padding: 20px 15px;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
} 
#gallery #gallery-images .icon2 .des2{
	color: #BDBDBC;
	padding: 10px 0;
}

0 学习 · 9666 问题

查看课程

相似问题

gallery部分的问题

回答 2

老师能看看有什么问题吗

回答 3

about区域的定位在不同显示器下差距很大

回答 2

老师..header 部分应该怎么固定

回答 1

遮罩层。总是大出那么一些。。这是为啥

回答 2

打开慕课网App查看更多内容