anchor.diff:  		rs = stmt.executeQuery(sql);
   		while (rs.next()){
   		%>
  -		<div >
  -		
  -		<a style="width:200px" href="view.jsp?email=<%out.print(rs.getString("email"));%>"><%out.print(rs.getString("username"));%></a>&nbsp;Gender: <%out.print(rs.getString("sex"));%>&nbsp;Date of birth: <%out.print(rs.getString("year"));%>/<%out.print(rs.getString("month"));%>/<%out.print(rs.getString("day"));%>
  +		<section style="height:200px" class="blur-container blur-8 justify-content-center align-items-center">
  +  <div style="position: reletive center" class="blur-box">
  +    
  +		<a style="display:block;width:160px ;color:#FFFFFF;background-color:rgb(150,170,180);text-algn:center;text-decoration:none;padding:4px;;font-weight:bold;" href="view.jsp?email=<%out.print(rs.getString("email"));%>">
  +			<%out.print(rs.getString("username"));%></a></br>&nbsp &nbsp &nbsp Gender: <%out.print(rs.getString("sex"));%></br></br>&nbsp&nbsp&nbsp&nbsp&nbsp;Date of birth: <%out.print(rs.getString("year"));%>/<%out.print(rs.getString("month"));%>/<%out.print(rs.getString("day"));%>
   
   		<span id="<%out.print(rs.getString("email"));%>"><input type="button" value="Follow" onclick="addFriend('<%out.print(rs.getString("email"));%>')" /></span>
   
   		
   		</div>
  +	</section>
   		<%
   		}
   	}
  
positive.code: 	</SCRIPT>
  </head>
  
  <body  align="center">
  	
  	 <ul>
      	<li> <a href="main.jsp">hi,<%
  	sql= "SELECT * FROM `working`.`user` where email='"+email+"' LIMIT 15";
  	System.out.println(sql);
  	//取得结果
  	ResultSet rs = stmt.executeQuery(sql);
  	if (rs.next()){
  		out.println(rs.getString("UserName"));
  	}%></a>
  	    </li>
      	<li> <a href="myFriends.jsp">Following</a></li>
      	<li> <a href="personalInfo.jsp">Profile</a></li> 
      	<form action="search.jsp" method="post">
      		<li>
      		 <a><input type="text" name="searchName" maxlength="20" style="width:120"/></a>   
      	</li>
      	<li> 	
      	   <a><input type="submit" value="Find friends"/></a>
      	</li>
      	<li><a href="logout.jsp">Sign out</a></li>
      	</form> 
      </ul> 
      
  	
  	<hr  style="width:700" />
  	<%
  	if (searchName!=null){
  
  
negative.code: 	<title>Find friends</title>
  	<meta http-equiv="content-Type" content="text/html;charset=UTF-8">
  	<style>
  			section {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  
  .blur-container {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  .blur-container::before, .blur-container::after {
    top: 0px;
    left: 0px;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
  .blur-container .container-fluid {
    z-index: 10;
    width: 100%;
    height: 100%;
  }
  .blur-container .blur-box {
    display: block;
    position: relative;
  }
  .blur-container .blur-box::before, .blur-container .blur-box::after {
    top: 0px;
    left: 0px;
   // content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
  
  .blur-container.blur-8 {
    --bg: url(background2.jpg);
    overflow: hidden;
    background-image: var(--bg);
  }
  .blur-container.blur-8::after {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.8;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    background-image: var(--bg);
  }
  
  .blur-container.blur-8 .blur-box {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    width: 100%;
    height: 90%;
    z-index: 11;
    max-width: 600px;
    max-height: 400px;
    border-radius: 10px;
    background-image: var(--bg);
    box-shadow: 0px 0px 30px #333;
  }
  
  .btn {
      display: inline-block;
      font-weight: 400;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border: 1px solid transparent;
      padding: .5rem 1rem;
      font-size: 1rem;
      border-radius: .25rem;
      -webkit-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
  }
  
  a {
      background-color: transparent;
      -webkit-text-decoration-skip: objects;
  }
  
  
  .blur-container.blur-5 {
    --bg: url(background2.jpg);
    background-image: var(--bg); 
    
  }
  .blur-container.blur-5::after {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.1;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    background-image: var(--bg);
  }
  .blur-container.blur-5 .blur-box {
    
    width: 100%;
    height: 100px;
    overflow: hidden;
    
    
  }
  .blur-container.blur-5 .blur-box .btn {
    color: #fff;
    -webkit-transition: 0s;
    transition: 0s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 10px 40px;
    border: 2px solid #fff;
    text-decoration: none;
  }
  .blur-container.blur-5 .blur-box .btn span {
    position: relative;
    z-index: 10;
  }
  .blur-container.blur-5 .blur-box .btn::before, .blur-container.blur-5 .blur-box .btn::after {
    content: '';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: absolute;
  }
  .blur-container.blur-5 .blur-box .btn:hover::before {
    opacity: 0.2;
    background-color: #999;
  }
  .blur-container.blur-5 .blur-box .btn:hover::after {
    -webkit-filter: blur(4px) brightness(120%);
            filter: blur(4px) brightness(120%);
  }
  .blur-container.blur-5 .blur-box .btn::before {
    z-index: 10;
    opacity: 0.4;
    background-color: #333;
  }
  .blur-container.blur-5 .blur-box .btn::after {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-image: var(--bg);
    -webkit-filter: blur(4px) brightness(70%);
            filter: blur(4px) brightness(70%);
  }
  .blur-container.blur-5 .blur-box::before {
    z-index: 10;
    opacity: 0.4;
    background-color: #333;
  }
  .blur-container.blur-5 .blur-box::after {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-image: var(--bg);
    -webkit-filter: blur(4px) brightness(70%);
            filter: blur(4px) brightness(70%);
  }
  .align-items-center {
      -webkit-box-align: center !important;
      -webkit-align-items: center !important;
      -ms-flex-align: center !important;
      align-items: center !important;
  }
  .justify-content-center {
      -webkit-box-pack: center !important;
      -webkit-justify-content: center !important;
      -ms-flex-pack: center !important;
      justify-content: center !important;
  }
  		
  	}
  	</style>
  	<SCRIPT type="text/javascript">
  		function addFriend(email){
  			if (email!=""){
  