老师边框怎么加边框，怎么让文字漂浮在图片上

<!DOCTYPE>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="commen.css">
</head>
<body>
<div class="header">
<div class="img"><img src="../images/logo.png"></div>
<div class="title">
<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 class="content">
<div class="img2">
<img src="../images/banner3.jpg" class="banner-img">
</div>
<div class="from">
<form>
<div class="from1">
<tr>
<td>
<input type="text" name="" placeholder="your name " class="input1">
</td>
</tr>
</div>
<div class="from2">
<tr>
<td>
<input type="text" name="" placeholder="your phone" class="input2">
</td>
</tr>
</div>
<div class="from3">
<tr>
<td>
<input type="text" name="" placeholder="your email" class="input3">
</td>
</tr>
</div>
<div class="from4">
<tr>
<td>
<textarea type="text" placeholder="write your commeten Here" class="input4"></textarea>
</td>
</tr>
</div>
<div class="from5">
<tr>
<td>
<input type="submit" value="SEND MESSAGE" class="input5">
</td>
</tr>
</div>
</form>
</div>
</div>

<div class="aubot">

<div class="top-content">
<h3 class="aubot-h">AUBOT</h3>
<p class="aubot-p">
Lorem Ipsum is simply dummy text of the printing and<br> typesetting  industry. Lorem Ipsum has been the indus<br>try's
standard dummy text ever since the 1500s.
</p>
</div>

<div class="content">
<div class="content-h"><h3>A WORD A BOUT US</h3></div>
<div class="content-p">
<p>Praesent dignissim viverr  bibendum<br> ligula congue et felis gravida commode e<br> get ullamcorper ipsum. diam amet.</p>
<input type="submit" value="EXPLORE" class="subim">
</div>
<div class="content-img">
<img src="../images/bb3.jpg">
</div>
<div class="num">
<div class="num1">
<div >70000</div>
<p>Students</p>
</div>
<div class="num2">
<div >600</div>
<p> faculty</p>
</div>
</div>
</div>

<div></div>
</div>
</body>
</html>

*{
margin:0px;
padding:0px;
}
.header{
width:100%;
height:80px;
background-color:#07cbc9;
}
.header .img{

float:left;
padding-top:25px;
padding-left:150px;
}
.header .title{

float:right;
padding-top:9px;
padding-right:150px;
}
.header .title ul li{
float:right;
list-style:none;
margin-top:30px;
margin-left:20px;
}
.header .title ul li a{
text-decoration:none;
color:white;
}
.content{
width:100%;
/*background-color: red;*/
}
.content .img2 .banner-img {

width:100%;
height:800px;
/*background-color: red;*/
background-color: transparent;

}
.content .from {
z-index: 1;
width: 300px;
position: absolute;
top: 350px;
margin-top:-150px;
right: 50%;
margin-right: -200px;
text-align: center;
opacity: 0.5;
}
.content .from .input1{
height: 40px;
width: 300px;
}

.content .from .input2{
height: 40px;
width: 300px;
}

.content .from .input3{
height: 40px;
width: 300px;
}
.content .from .input4{
height: 40px;
width: 300px;
}
.content .from .input5{
height: 40px;
width: 100px;
}
.content .from .from1{
height: 50px;
width: -600px;
}
.content .from .from2{
height: 50px;
}

.content .from .from3{
height: 50px;
}

.content .from .from4{
height: 50px;
}

.content .from .from5{
z-index: 1;
width: 300px;
position: absolute;
top: 350px;
margin-top:-150px;
right: 50%;
margin-right: -150px;
text-align: center;

}
.aubot{
width: 100%;
height: auto;
/*background-color: red;*/
}
.aubot .top-content{
position: relative;
left: 800px;
top: 50px;
}
.aubot .top-content .aubot-h{
position: relative;
left: 150px;
font-family: 微软雅黑;
font-size: 40px;
text-decoration: underline;
}
.aubot .content .content-h{
position: relative;
left:550px ;
top: 90px;

}
.aubot .content .content-p{
position: relative;
left:500px ;
top: 100px;
/*opacity: 0.4;*/
}
.aubot .content .content-p input{
position: relative;
left:100px ;
top: 0px;
/*opacity: 0.4;*/

}
.aubot .content .content-img{
position: relative;
left:700px ;
margin-top: -10px;
}
.aubot .content .num .num1{
position: relative;
left: 1400px;
top: -440px;
}
.aubot .content .num .num2{
position: relative;
left: 1400px;
top: -300px;
}