4-3作业中gallery中的图片列表显示有问题
来源：4-3 项目作业
慕724
2020-06-06 23:49:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/career.js"></script>
<link rel="stylesheet" type="text/css" href="css/career.css">
</head>
<body >
<!--页眉-->
<div class="head">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="auth">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<!--banner区-->
<div class="banner">
<!-- banner区的遮罩层-->
<div class="banner-block"></div>
<div class="message">
<form action="" method="post">
<ul>
<li><input type="text" name="" value="Your Name"></li>
<li><input type="text" name="" value="Your Phone"></li>
<li><input type="text" name="" value="Your Email"></li>
<li><textarea>Write Your Comment Here</textarea></li>
<li><input type="submit" name="submit" id ="submit" value="SEND MESSAGE"></li>
</ul>
</form>
</div>
</div>
<!--About区-->
<div class="about">
<div class="about-top">
<h3 >ABOUT</h3>
<p class="line1"></p><br>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="about-center">
<!--about中部左边的内容-->
<div class="about-left">
<!--about左边标题-->
<div class="about-left-h">
<h4>A WORD ABOUT US</h4>
</div>
<!--about左边内容-->
<div class="about-left-content">
<p class="p1">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p><br>
<button>EXPLORE</button>
</div>
</div>
<!--about中部中间的图片-->
<div class="about-center-img">
<img src="images/bb3.jpg">
</div>
<!--about中部右边的内容-->
<div class="about-right">
<!--about右边上部分的内容-->
<div class="about-right1">
<h3>70000</h3>
<p class="line1"></p>
<h4>Students</h4>
</div>
<!--about右边上部分的内容-->
<div class="about-right2">
<h3>600</h3>
<p class="line1"></p>
<h4>Faculty</h4>
</div>
</div>
</div>
<!--about下半部分的内容-->
<div class="about-low">
<!--图书馆图片以及文字说明-->
<div class="about-low-img">
<img src="images/b1.jpg">
</div>
<div class="about-low-info">
<h3>Library</h3>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's sandard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<!--about下部computer Lab图片以及说明-->
<div class="about-low-img">
<img src="images/b2.jpg">
</div>
<div class="about-low-info">
<h3>Computer Lab</h3>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's sandard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<!--about下部Conference Hall图片以及说明-->
<div class="about-low-info">
<h3>Conference Hall</h3>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's sandard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="about-low-img">
<img src="images/b3.jpg">
</div>
<!--about下部Play Ground图片以及说明-->
<div class="about-low-info">
<h3>Play Ground</h3>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's sandard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="about-low-img">
<img src="images/b4.jpg">
</div>
</div>
</div>
<div class="gallery">
<!--gallery区上部分文字说明-->
<div class="gallery-top">
<h3 >GALLERY</h3>
<p class="line"></p><br>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<!--gallery区下部分图片列表-->
<div class="gallery-img">
<div class="content">
<img src="images/03-01.jpg">
<div class="info"><p>SCIENCE LAB</p> </div>
</div>
<div class="content">
<img src="images/03-02.jpg">
<div class="info"><p>INDOOR STADIUM</p> </div>
</div>
<div class="content">
<img src="images/03-03.jpg">
<div class="info"><p>TRANSPORTATION</p> </div>
</div>
<div class="content">
<img src="images/03-04.jpg">
<div class="info"><p>KIDS ROOM</p> </div>
</div>
<div class="content">
<img src="images/03-05.jpg">
<div class="info"><p>MEDITATION CLASSES</p> </div>
</div>
<div class="content">
<img src="images/03-06.jpg">
<div class="info"><p>KIDS PLAY GROUND</p> </div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0px;
padding: 0px;
font-family:"微软雅黑";
}
/*导航栏没有固定在顶部，使用position: fixed;
将导航栏固定在顶部，在使用z-index将导航栏覆盖到最上层*/
.head{
width: 100%;
height: 48px;
background-color: #07cbc9;
position: fixed;
z-index: 500;
}
.head .logo{
float:left;
}
.head .auth{
right: 80px;
float: right;
}
.head .auth ul li{
list-style: none;
float:left;
margin-right: 10px;
margin-top: 15px;
}
.head .auth a{
color: #fff;
text-decoration: none;
display: block;
}
.head .auth a:hover{
background-color: #000;
}
.banner {
width: 100%;
height: 800px;
background:url("../images/banner3.jpg");
background-size: 100% 800px;
}
/*遮罩层设置*/
.banner .banner-block{
background-color: #000;
opacity: 0.4;
z-index: 1;
position: absolute;
top: 48px;
width: 100%;
height: 750px;
}
.banner .message{
width: 400px;
height: 300px;
position: relative;
float: left;
left: 50%;
margin-top:250px ;
margin-left: -200px;
}
.banner .message ul li{
list-style: none;
margin-top: 20px;
}
.banner .message input{
background-color: transparent;
color: #fff;
width: 400px;
height: 30px;
border:1px solid #fff;
padding-left:5px;
}
.banner .message textarea{
background-color: transparent;
color: #fff;
width: 400px;
height: 80px;
border:1px solid #fff;
padding-left:5px;
}
.banner .message [type="text"]:hover{
border:1px solid #07cbc9;
}
.banner .message textarea:hover{
border:1px solid #07cbc9;
}
.banner .message input[type="submit"]{
width:150px;
margin-left:130px;
}
.banner .message input[type="submit"]:hover{
background: #07cbc9;
}
.about {
width: 100%;
height: 1200px;
/* background-color: blue;*/
}
/*about上部标题*/
.about .about-top{
width: 550px;
height: 150px;
float: left;
left: 50%;
padding-top: 20px;
margin-left: -275px;
position: relative;
}
.about .about-top h3{
text-align: center;
font-size: 30px;
}
.about .about-top .line1{
width: 28px;
height: 2px;
left:47%;
margin-top: 8px;
position: absolute;
background: #07cbc9;
}
.about .about-top .p1{
text-align: center;
}
/*about中部区域的设置*/
.about .about-center{
width: 100%;
height: 600px;
}
/*about中部左侧文字*/
.about .about-center .about-left{
width:360px;
height: 300px;
float: left;
position: relative;
margin-top:180px;
margin-left: -170px;
z-index: 20;
}
.about .about-center .about-left .about-left-h{
width:200px;
height: 90px;
font-size: 30px;
}
.about .about-center .about-left .about-left-content{
width: 320px;
height: 160px;
border: 1px solid #C5C5C5;
padding:20px 20px;
background-color: #fff;
opacity: 0.7;
}
.about .about-center .about-left .about-left-content button{
background-color:#000;
color: white;
padding:5px;
}
/*about中部图片*/
.about .about-center .about-center-img{
width: 650px;
height: 435px;
float: left;
left: 50%;
position: absolute;
margin-top:150px;
margin-left: -325px;
z-index: 10;
}
/*about中部右侧*/
.about .about-center .about-right{
width: 200px;
height: 350px;
float: right;
margin-top:170px;
margin-right: 120px;
}
/*about中部右边上面的方框*/
.about .about-center .about-right .about-right1{
width: 200px;
height: 150px;
float: left;
border: 1px solid #07cbc9;
}
.about .about-center .about-right .about-right1 h3{
text-align: center;
padding-top: 20px;
}
.about .about-center .about-right .about-right1 .line1{
width: 28px;
height: 2px;
margin-top:20px;
margin-left: 86px;
background: #07cbc9;
}
.about .about-center .about-right .about-right1 h4{
text-align: center;
padding-top: 20px;
}
/*about中部右边下面的方框*/
.about .about-center .about-right .about-right2{
width: 200px;
height: 150px;
float: left;
margin-top: 30px;
border: 1px solid #07cbc9;
}
.about .about-center .about-right .about-right2 h3{
text-align: center;
padding-top: 20px;
}
.about .about-center .about-right .about-right2 .line1{
width: 28px;
height: 2px;
margin-top:20px;
margin-left: 86px;
background: #07cbc9;
}
.about .about-center .about-right .about-right2 h4{
text-align: center;
padding-top: 20px;
}
/*about下部设置*/
.about .about-low{
width:100%;
height:730px;
}
.about .about-low .about-low-img img{
width: 25%;
height: 360px;/*385*/
float:left;
}
.about .about-low .about-low-info{
width: 25%;
height: 360px;
float:left;
background-color: #07cbc9;
}
.about .about-low .about-low-info h3{
font-size: 25px;
color: #fff;
margin-top:20px;
margin-left: 20px;
}
.about .about-low .about-low-info .p1{
font-size: 15px;
color: #fff;
margin-top:20px;
margin-left: 20px;
opacity: 0.8;
}
.about .about-low .about-low-info .p2{
font-size: 12px;
color: #fff;
margin-top:20px;
margin-left: 20px;
opacity: 0.6;
}
.about .about-low .about-low-info button{
background-color:#000;
color: white;
padding:5px;
position: relative;
left: 50%;
margin-top:20px;
margin-left: -30px;
cursor: pointer;
}
.gallery {
width: 1200px;
height: 800px;
float: left;
position:relative;
left: 50%;
margin-left: -600px;
background-color: green;
}
/*gallery上部标题*/
.gallery .gallery-top{
width: 550px;
height: 150px;
float: left;
left: 50%;
padding-top: 20px;
margin-left: -275px;
position: relative;
}
.gallery .gallery-top h3{
text-align: center;
font-size: 30px;
}
.gallery .gallery-top .line{
width: 28px;
height: 2px;
left:47%;
margin-top: 8px;
position: relative;
background: #07cbc9;
}
.gallery .gallery-top .p1{
text-align: center;
}
.gallery .gallery-img{
width: 1200px;
height:600px;
margin-top: 160px;
background-color: red;
}
.gallery .gallery-img .content{
width: 360px;
height: 270px;
float: left;
margin-top: 10px;
margin-right:10px;
position: relative;
}
.gallery .gallery-img .content img{
width: 360px;
height: 240px;
}
.gallery .gallery-img .content .info{
width: 320px;
height: 30px;
background-color: #000;
color: #fff;
margin-top: -5px;
}gallery中的图片列表显示有问题
写回答
1回答
-
好帮手慕阿园
2020-06-07
同学你好，同学设置的gallery-top上内边距的值为20，这样就会超出gallery-top设置的大小，导致content区的样式失效
同学将padding-top的值设为10，这样就不会超出gallery-top区域
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题