老师能看看有什么问题吗

<!DOCTYPE html>
<html>
<head>
<title>商城</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="top">
<div class="top-logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="top-navigation">
<ul>
<li class="bian">
<div class="one">
<a href="#">HOME</a>
</div>
</li>
<li class="bian"><a href="#">ABOUT</a></li>
<li class="bian"><a href="#">GALLERY</a></li>
<li class="bian"><a href="#">FACULTY</a></li>
<li class="bian"><a href="#">EVENTS</a></li>
<li class="bian"><a href="#">CONCACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg" class="banner-img">
<form class="banner-form">
<input type="text" name="" placeholder="your Name" id="lie"><br>
<input type="text" name="" placeholder="your phone" id="lie"><br>
<input type="text" name="" placeholder="your Email" id="lie"><br>
<textarea cols="30" rows="5" id="lie1" placeholder="Write Your Comment Here"></textarea><br>
<input type="submit" name="" placeholder="SEND MESSAGE" id="lie2"><br>
</form>
</div>
<div class="about">
<div class="about-h3">
<h3 class="about-h33">ABOUT</h3>
</div>
<div class="about-p">
<P class="about-pp">
Lorem Ipsum is sumply dummy text of the printing and rypesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</P>
</div>
<div class="center">
<div class="center-img">
<img src="images/bb3.jpg" class="center-bb3">
</div>
<div class="center-left">
<div class="center-p1">
<p>A WORD ABOUT US</p>
</div>
<div class="center-p2">
<div class="center-p22">
<p class="center-p222">Praesent dignissim est,sed bibendeum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisseeget ullamcorper ipsum.Suspendisseeget ullamcorper ipsum.Supendisse diam amet.
</p>
</div>
<div class="center-button">
<input type="button" name="" value="EXPLORE" id="bu">
</div>
</div>
</div>
<div class="center-right">
<div class="center-p3">
<p class="p33">70000</p>
<p>Students</p>
</div>
<div class="center-p4">
<p class="p44">600</p>
<p>Faculty</p>
</div>
</div>
</div>
<div class="lower">
<table align='center' style="border-collapse:collapse;">
<tr>
<td>
<img src="images/b1.jpg" id="b1" class="b1">
</td>
<td>
<div class="lower-b11">
<p id="b111">Library</p>
<p id="b222">Lorem Ipsum is simplu dummy text of the printing and typesetting industry</p>
<p id="b333">Lorem Ipsum has been the industry's standard 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>
<div class="but1">
<input type="submit" name="" value="EXPLORE" id="butt1">
</div>
</div>
</td>
<td>
<img src="images/b2.jpg" id="b2" class="b2">
</td>
<td>
<div class="lower-b22">
<p id="b111">Library</p>
<p id="b222">Lorem Ipsum is simplu dummy text of the printing and typesetting industry</p>
<p id="b333">Lorem Ipsum has been the industry's standard 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>
<div class="but1">
<input type="submit" name="" value="EXPLORE" id="butt1">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="lower-b33">
<p id="b111">Library</p>
<p id="b222">Lorem Ipsum is simplu dummy text of the printing and typesetting industry</p>
<p id="b333">Lorem Ipsum has been the industry's standard 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>
<div class="but1">
<input type="submit" name="" value="EXPLORE" id="butt1">
</div>
</div>
</td>
<td>
<img src="images/b3.jpg" id="b3" class="b3">
</td>
<td>
<div class="lower-b44">
<p id="b111">Library</p>
<p id="b222">Lorem Ipsum is simplu dummy text of the printing and typesetting industry</p>
<p id="b333">Lorem Ipsum has been the industry's standard 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>
<div class="but1">
<input type="submit" name="" value="EXPLORE" id="butt1">
</div>
</div>
</td>
<td>
<img src="images/b4.jpg" id="b4" class="b4">
</td>
</tr>
</table>
</div>
<div class="galley">
<div class="galley-top">
<div class="galley-h3">
<h3 class="galley-h33">GALLERY</h3>
</div>
<div class="galley-p">
<P class="galley-pp">
Lorem Ipsum is sumply dummy text of the printing and rypesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</P>
</div>
</div>
<div class="img-content">
<ul>
<li>
<img src="images/03-01.jpg">
<div class="img-info">
<p>SCIENCE LAB</p>
</div>
</li>
<li>
<img src="images/03-02.jpg">
<div class="img-info">
<p>INDOOR STADIUM</p>
</div>
</li>
<li>
<img src="images/03-03.jpg">
<div class="img-info">
<p>TRANSPORTATION</p>
</div>
</li>
<li>
<img src="images/03-04.jpg">
<div class="img-info">
<p>KIDS ROOM</p>
</div>
</li>
<li>
<img src="images/03-05.jpg">
<div class="img-info">
<p>MEDITATION CLASS</p>
</div>
</li>
<li>
<img src="images/03-06.jpg">
<div class="img-info">
<p>KIDS PLAY GROUNDS</p>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<p><img draggable="false" class="moco-emoji" alt="©" src="https://www.imooc.com/static/moco/v1.0/images/face/36x36/a9.png" data-src="©" style="cursor: pointer;">2016 imooc.com 京ICP备13046642号</p>
</div>
</body>

</html>

*{
margin: 0;
padding: 0;
}
/*字体设置*/
body{
font-family: Microsoft YaHei UI;
/*width: 1300px;
margin-left: 120px;
margin-top: 50px;*/
}
/*顶部*/
.top{
width: 100%;
height: 68px;
background-color: #07cbc9;
line-height: 68px;
overflow: hidden;
}
/*logo设置*/
.top .top-logo{
float: left;
margin-left: 180px;
margin-right: 480px;
margin-top: 7px;
}
/*导航栏设置*/
.top .top-navigation ul li{
float: left;
list-style: none;
margin-right: 20px;
}
/*导航栏设置离右边距离*/
.top .top-navigation ul{
margin-right: 40px;
height: 68px;
}
/*导航栏设置去下划线*/
.top .top-navigation ul a{
text-decoration:none;
color: white;
}
/*伪类设置鼠标移动到导航栏背景变色*/
.top .top-navigation ul a:hover{
background-color: #000;
display: block;
}
/*banner区*/
/*背景图片设置项*/
.banner{
width: 100%;
height: 600px;
overflow: hidden;
}
/*背景图片*/
.banner .banner-img{
width: 100%;
height: 600px;
margin-top: 0px;
float: left;
opacity:0.9;
}
/*表单设置*/
.banner .banner-form{
width: 550px;
position: absolute;
text-align: center;
height: 380px;
line-height: 70px;
left: 50%;
margin-top: 100px;
margin-left: -275px;
}
/*input标签*/
#lie{
width: 400px;
height: 30px;
line-height:30px;
background-color: transparent;
color: white
}
/*多行输入框*/
#lie1{
width: 400px;
height: 70px;
line-height:30px;
border: 1px solid white;
background-color: transparent;
color: white
}
/*提交按钮*/
#lie2{
width: 110px;
height: 30px;
line-height:30px;
border: 1px solid white;
background-color: transparent;
color: white
}
/*表单设置*/
.banner .banner-form form{
margin: 70px 650px;
line-height:60px;
height: 60px;
}
/*伪类设置*/
#lie:hover{
border:1px solid #07cbc9;
}
#lie1:hover{
border:1px solid #07cbc9;
}
#lie2:hover{
background-color: #07cbc9;
border:none;
}
/*ABOUT区*/
/*ABOUT区上部设置*/
.about{
width: 100%;
}
/*ABOUT区上部标题设置*/
.about .about-h3{
width: 100%;
height:150px;
overflow: hidden;
font-size: 50px;
}
.about .about-h3 .about-h33{
border-bottom: 1px solid #07cbc9;
padding-bottom: 20px;
margin: 30px auto;
width: 200px;
}
/*ABOUT区上部文字设置*/
.about .about-p{
width: 100%;
height:75px;
text-align: center;
}
.about .about-p .about-pp{
width: 490px;
height:60px;
margin: 5px auto;
}
/*ABOUT区中部设置*/
.center{
margin: 10px auto;
overflow: hidden;
}
/*中间图片的div设置*/
.center .center-img{
position: absolute;
text-align: center;
width: 100%;
height: 435px;
margin: 0px auto;
}
/*左边块设置*/
.center .center-left{
width: 400px;
height:435px;
float: left;
position: relative;
left: 70px;
top:0px;
}
/*左边块首文字*/
.center .center-left .center-p1{
font-size: 40px;
width: 250px;
left: 20px;
position: relative;
}
/*左边下文字与按钮设置*/
.center .center-left .center-p2{
width: 350px;
height:200px;
background-color: rgba(255, 255, 255, 0.4);
border:1px solid #ADADAD;
top: 30px;
position: relative;
}
/*左边下文字设置*/
.center .center-left .center-p2 .center-p222{
padding-top: 25px;
padding-left: 25px;
line-height:20px;
position: relative;
}
/*按钮块设置*/
.center .center-left .center-button{
height: 77px;
}
/* 按钮普通状态设置*/
.center .center-left .center-p2 .center-button input{
height: 40px;
width: 80px;
background-color: black;
color: white;
border: none;
left: 20px;
top: 20px;
position: relative;
}
/*鼠标移入按钮背景透明*/
#bu:hover{
border: 1px solid black;
background-color: rgba(255, 255, 255, 0.4);
color: black;
}
/*右边块设置*/
.center .center-right{
width: 250px;
height:345px;
text-align: center;
position: relative;
right: 40px;
float: right;
}
/*右边student的div*/
.center .center-right .center-p3{
width: 250px;
height:150px;
border: 1px solid #07cbc9;
font-size: 40px;
line-height: 70px;
text-align: center;
}
/*右边facul的div*/
.center .center-right .center-p4{
width: 250px;
height:150px;
border: 1px solid #07cbc9;
font-size: 40px;
line-height: 70px;
top: 40px;
position: relative;
}
.center .center-right .center-p3 .p33{
height: 70px;
width: 150px;
border-bottom: 1px solid #07cbc9;
margin: 0 auto;
}
.center .center-right .center-p4 .p44{
height: 70px;
width: 150px;
border-bottom: 1px solid #07cbc9;
margin: 0 auto;
}
/*ABOUT下部分区*/
.lower{
width: 100%;
top: 80px;
position: relative;
}
.lower table{
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
}
.lower table tr {
width: 100%;
}
.lower table tr td{
padding: 0px;
width:25%;
height: 300px;
background-color: #07cbc9;
color: white;
}
/*图片设置*/
.b1,.b2,.b3,.b4{
height: 300px;
width: 100%;
}
#b111{
font-size: 25px;
left: 20px;
top: -20px;
position: relative;
}
#b222{
left: 20px;
position: relative;
font-size: 15px;
}
#b333{
width: 80%;
height: 20px;
left: 20px;
position: relative;
font-size: 10px;
top: 10px;
}
/*按钮设置*/
#butt1{
position: relative;
top:70px;
width: 90px;
height: 40px;
background-color: black;
color: white;
border:none;
}
/*鼠标移入按钮效果*/
#butt1:hover{
border: 1px solid black;
background-color: rgba(255, 255, 255, 0.4);
color: black;
}
.but1{
text-align: center;
}
/*GALLERY区*/
.galley{
/*width: 100%;*/
width: 1200px;
position: relative;
padding-top: 50px;
margin: 0px auto;
top: 80px;
}
.galley .galley-h3{
width: 100%;
height:150px;
overflow: hidden;
font-size: 50px;
}
.galley .galley-h3 .galley-h33{
border-bottom: 1px solid #07cbc9;
padding-bottom: 20px;
margin: 30px auto;
width: 200px;
}
/*ABOUT区上部文字设置*/
.galley .galley-p{
width: 100%;
height:75px;
text-align: center;
}
.galley .galley-p .galley-pp{
width: 490px;
height:60px;
margin: 5px auto;
}
.galley .img-content ul li{/*设置六张图片从靠左一竖列到一排三个*/
float: left;
width: 360px;
margin:0 40px 20px 0;
list-style-type:none;
}
.footer{
margin-top: 690px;
width: 100%;
height: 88px;
background-color: #07cbc9;
text-align: center;
line-height: 88px;
color: white;
}

慕后端2033046 2019-09-12

源自：前端油画商城案例 4-3 项目作业

收起

3回答

好帮手慕珊回答被采纳获得+3积分 2019-09-16 09:50:21

你好！可以设置如下样式，添加到你的css文件底部即可

.img-info{
    /*设置背景颜色为黑色*/
    background-color:#000;
    /*设置div的高度*/
    height:50px;
    /*设置左内边距，使得文字不是紧挨着左侧边界*/
    padding-left:10px;
}
.img-info p{
    /*设置字体为白色*/
    color:#fff;
    /*设置行高,与img-info的height属性一致才能垂直居中*/
    line-height:50px;
    /*设置文字垂直居中*/
    vertical-align: middle;
}

效果如下：