老师帮我看看banner区的表怎样可以居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学习作业</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 网站头部代码开始 -->
<div id="header-top">
<img src="images/logo.png" class="header-logo">
<div class="header-nav">
<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>
<!-- 网站头部代码结束 -->
<!-- 内容区代码开始 -->
<div id="content">
<!-- banner区开始 -->
<div class="content-banner">
<img src="images/banner3.jpg">
<div class="content-input">
<table>
<tr>
<td><input type="text" name="" placeholder="your Name"/></td>
</tr>
<tr>
<td><input type="text" name="" placeholder="your Phone"/></td>
</tr>
<tr>
<td><input type="text" name="" placeholder="your Email"/></td>
</tr>
<tr>
<td>
<textarea rows="5" cols="38" name="" id="" placeholder="Write Your Comment Here"></textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="SEND MESSAGE" class="content-submit"/></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
<!-- banner区结束 -->
<!-- About区开始 -->
<div id="content-about">
<div class="about-top">
<h1>About</h1>
<div class="about-top01"></div>
<p><span>
Lorem Ipsum is simply dummy text of the printing and typeseting<br>
industry.lorem Ipsum has been the industry'standard dummy<br>
text ever since the 1500s
</span></p>
</div>
<div class="about-left">
<h2>A WORD ABOUT US</h2>
<div class="about-left-bottom">
<span>
Praesent dignissim viverra est sed<br>
bibendum ligula congue mon Sed ac nesi<br>
et felis gravida commodo?Suspendisse<br>
etet ullamcorper ipsum.Suspendisse<br>
diam amet.
</span>
<div class="about-left-btn">EXPLORE</div>
</div>
</div>
<div class="about-center"><img src="images/bb3.jpg"></div>
<div class="about-right">
<div class="about-right-topbox">
<h2>7000</h2>
<div class="about-right-line01"></div>
<p>Students</p>
</div>
<div class="about-right-bottombox">
<h2>600</h2>
<div class="about-right-line02"></div>
<p>Faculty</p>
</div>
</div>
</div>
<div class="clear"></div>
<!-- About区结束 -->
<!-- 商品展示区开始 -->
<div id="content-goods">
<ul>
<li><img src="images/b1.jpg"></li>
<li class="weizi">
<h2>Library</h2>
<p><span>Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry
</span></p>
<p>lorem Ipsum has been the industry's standard dummy<br>
lext ever since the 1500s,when an unknown printer book<br>
a galiey of type and scrambled it to make a type<br>
apecimen book.
</p>
<div><a href="#">EXPLORE</a></div>
</li>
<li><img src="images/b2.jpg"></li>
<li class="weizi">
<h2>Computer Lab</h2>
<p><span>Lorem Ipsum is simply dummy text<br>
Printing and typesetting industry
</span></p>
<p>Lerem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<div><a href="#">EXPLORE</a></div>
</li>
<li class="weizi">
<h2>Conference Hall</h2>
<p><span>Lorem Ipsum is simply dummy text<br>
Printing and typesetting industry
</span></p>
<p>Lerem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<div><a href="#">EXPLORE</a></div>
</li>
<li><img src="images/b3.jpg"></li>
<li class="weizi">
<h2>Play Ground</h2>
<p><span>Lorem Ipsum is simply dummy text<br>
Printing and typesetting industry
</span></p>
<p>Lerem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a galley of type and scrambled it to make a type<br>
specimen book.
</p>
<div><a href="#">EXPLORE</a></div>
</li>
<li><img src="images/b4.jpg"></li>
</ul>
</div>
<!-- 商品展示区开始 -->
</div>
</div>
<!-- 内容区代码结束 -->
<!-- 页脚部分代码 -->
<div id="footer"></div>
<!-- 页脚部分代码结束 -->
</body>
</html>
*{padding: 0;margin: 0 ;font-family: Microsoft YaHei UI;}
* a{
text-decoration: none;
}
* li{
list-style: none;
}
* .clear{
content: "";
visibility:hidden;
height:0px;
display:block;
clear:both;
}
/*头部样式开始*/
#header-top{
background-color: #07cbc9;
overflow: hidden;
position:relative;
}
#header-top .header-logo{
width: 260px;
height: 48px;
vertical-align: bottom;
position: absolute;
left: 30px;
}
#header-top .header-nav ul{
width: 550px;
height: 48px;
line-height: 48px;
float: right;
}
#header-top .header-nav ul li{
float: left;
}
#header-top .header-nav ul li+li{
margin-left:20px
}
#header-top .header-nav ul li a{
font-weight: bold;
color: #fff;
}
/*头部样式结束*/
/*内容部分开始*/
#content .content-banner{
width: 100%;
height: 450px;
overflow: hidden;
position:relative;
}
#content .content-banner img{
width: 100%;
height: 450px;
z-index: 10;
position: absolute;
}
#content .content-input{
width: 330px;
height: 290px;
position:absolute;
margin:100px auto;
overflow: hidden;
z-index: 100;
}
#content .content-input table textarea{
width: 317px;
margin-top:10px;
background:transparent;
color: #fff;
font-weight:bold;
border:1px solid #fff;
}
#content .content-input table input{
width: 317px;
height: 30px;
margin-top:10px;
background:transparent;
color: #fff;
font-weight:bold;
overflow: hidden;
border:1px solid #fff;
}
#content .content-input table .content-submit{
position: absolute;
width: 120px;
margin: 10px 100px;
background:transparent;
color: #fff;
font-weight:bold;
border:1px solid #fff;
}
/*about区开始*/
#content-about{
/*background-color: red;*/
width: 80%;
position:relative;
float: left;
margin:0 auto;
left:10%;
}
#content-about .about-top{
width: 100%;
line-height:30px;
float: left;
text-align: center;
padding:20px 0px;
}
#content-about .about-top01{
width: 30px;
height: 10px;
border-bottom:2px solid #07cbc9;
text-align:center;
margin: auto;
}
#content-about .about-left{
/*background-color: yellow;*/
width: 20%;
height:335px;
float: left;
}
#content-about .about-center{
width: 60%;
height:335px;
float: left;
}
#content-about .about-center img{
width: 100%;
height: 335px;
z-index: 10;
}
#content-about .about-right{
/*background-color: green;*/
width: 20%;
height:335px;
float: left;
position: relative;
}
#content-about .about-right .about-right-topbox{
width: 80%;
height:120px;
border:1px solid #fff;
line-height:50px;
text-align:center;
float: right;
margin: 0px 20px;
}
#content-about .about-right .about-right-bottombox{
width: 80%;
height:120px;
border:1px solid #fff;
line-height:50px;
text-align:center;
float: right;
margin: 20px 20px;
}
#content-about .about-right .about-right-line01{
width:20px;
border-bottom:2px solid #07cbc9;
margin: 0 auto;
}
#content-about .about-right .about-right-line02{
width:20px;
border-bottom:2px solid #07cbc9;
margin: 0 auto;
}
#content-about .about-left h2{
width: 160px;
font-size: 30px;
text-indent:10px;
}
#content-about .about-left .about-left-bottom{
width: 380px;
height:230px;
border:1px solid #ccc;
opacity: 0.8;
position: absolute;
color: #000;
line-height:2em;
}
.about-left-bottom span{
position: absolute;
left:20px;
font-size:16px;
}
.about-left-bottom div{
width: 80px;
height: 30px;
position: absolute;
left:20px;
top:160px;
background-color:#000;
color: #fff;
text-align: center;
}
/*about区结束*/
/*商品展示开始*/
#content-goods{
width: 100%;
margin: 30px auto;
}
#content-goods li{
width: 25%;
height:336px;
float: left;
vertical-align: bottom;
}
#content-goods .weizi{
background-color: #07cbc9;
text-align:justify;
line-height: 30px;
font-size:14px;
letter-spacing: -1.5px;
}
#content-goods .weizi p,.weizi h2{
margin: 10px 20px;
color: #fff;
}
#content-goods .weizi span,.weizi h2{
letter-spacing: -0.1px;
font-weight:bold;
}
#content-goods .weizi div{
width: 80px;
height: 30px;
background-color: #000;
margin: auto;
text-align: center;
}
#content-goods .weizi a{
color: #fff;
}
#content-goods li img{
width: 100%;
height:100%;
}
/*内容部分结束*/0
收起
正在回答 回答被采纳积分+1
4回答
相似问题
width值不为固定数值时，如何设置块级元素垂直水平居中
21
0
3
请老师帮忙看看代码
30
0
6
老师，看下代码 谢谢
13
0
4
table中单元格内容水平居中是什么标签？？
17
0
3
登录后可查看更多问答，登录/注册
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星