为什么我的链接在我的网站上泄露了我的个人资料图片？

时间：2016-05-21 16:12:47

标签： javascript jquery html css

我有一个显示教师信息的div。点击他们的用户名或图片，用户将转到他们的教师页面。但是，当我将鼠标悬停在教师图片上时，会出现一条蓝线，我注意到有一整段泄露的链接信息。

＆＃13;
＆＃13; 
/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* courses.php */

/* course intro */

#course_body {
  background: #F4F4F4;
}

#course_intro {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: 40px;
  left: 50px;
}

#intro_title {
  width: 562px;
  position: relative;
  top: 2px;
}

#intro_video {
  width: 375px;
  height: 210px;
  position: relative;
  top: -7px;
}

/* end of course intro */

/* course facts */

#course_facts {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: -311px;
  left: 750px;
  font-size: 20px;
  height: 115px;
}

  .Rating {
  position: relative;
  width: 125px;
  height: 25px;
  top: -5px;
}
.Rating svg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}
.Rating meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
  background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
  background: #FF7867;
}

#facts_ratings {
  position: relative;
  top: -6px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_length {
  position: relative;
  top: -57px;
  left: 200px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_time {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 18px;
  color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
  position: relative;
  top: -84px;
  left: 280px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.fillSquare, .emptySquare {
  display: inline-block;
  position: relative;
  left: 80px;
}

.fillSquare {
  width: 12px;
  height: 12px;
  background: #666;
}

.emptySquare {
  width: 12px;
  height: 12px;
  background: #B8B8B8;
}

#skill_level {
  position: relative;
  left: 85px;
  top: -2px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  color: #2E3D49;
}

/* end of skill level */

/* Wish List button */

#course_wish {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  position: absolute;
  width: 87px;
  padding: 5px;
  position: relative;
  top: -65px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
  border-radius: 3px;
}

#empty_heart {
  color: #FF827F;
}

#course_wish_text {
  position: relative;
  left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
  width: 326px;
  border: 1px solid #ddd;
  background: white;
  position: relative;
  left: 1002px;
  padding: 15px;
  top: -280px;
}

#teacher_picture {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  position: relative;
  left: 120px;
  top: 3px;
}

#teacher_name {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: -15px;
  width: 325px;
}

#teacher_div a {
  text-decoration: none;
  color: #00698C;
}

#teacher_div a:hover {
  text-decoration: underline;
}

#teacher_tagLine {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #999;
  text-align: center;
  width: 325px;
  position: relative;
  top: -15px;
}

/* End of Teacher div */

/* end of courses.php */
＆＃13; 
<?php

require "connect.php";

?>

<!DOCTYPE html>
<html>
  <head>
    <title> Hacked Genius </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='main.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src='main.js'></script>
  </head>

  <body id='course_body'>
    <!-- nav -->
      <div id='nav'>

      </div>
    <!-- end of nav -->

    <!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Apps</a></li>
      <li><a href="#">Programming Languages</a></li>
      <li><a href="#">Game Development</a></li>
      <li><a href="#">Databases</a></li>
      <li><a href="#">Software Testing</a></li>
      <li><a href="#">Software Engineering</a></li>
      <li><a href="#">Development Tools</a></li>
      <li><a href="#">E-Commerce</a></li>
    </ul>
  </li>
  <li><a href="#">Business</a>
    <ul>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Entrepreneurship</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Management</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Strategy</a></li>
      <li><a href="#">Operations</a></li>
      <li><a href="#">Project Management</a></li>
      <li><a href="#">Business Law</a></li>
      <li><a href="#">Data and Anylytics</a></li>
      <li><a href="#">Home Business</a></li>
      <li><a href="#">Human Resources</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li><a href="#">IT & Software</a>
    <ul>
      <li class="dir"><a href="#">IT Certification</a></li>
      <li class="dir"><a href="#">Network & Security</a>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Operating Systems</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
    <ul>
      <li class="dir"><a href="#">Microsoft</a></li>
      <li class="dir"><a href="#">Apple</a>
      <li><a href="#">Google</a></li>
      <li><a href="#">SAP</a></li>
      <li><a href="#">Intuit</a></li>
      <li><a href="#">Salesforce</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
    <ul>
      <li class="dir"><a href="#">Personal Transformation</a></li>
      <li class="dir"><a href="#">Productivity</a>
      <li><a href="#">Leadership</a></li>
      <li><a href="#">Personal Finance</a></li>
      <li><a href="#">Career Development</a></li>
      <li><a href="#">Parenting & Relationships</a></li>
      <li><a href="#">Happiness</a></li>
      <li><a href="#">Religion & Spirituality</a></li>
      <li><a href="#">Personal Brand Building</a></li>
      <li><a href="#">Creativity</a></li>
      <li><a href="#">Influence</a></li>
      <li><a href="#">Self Esteem</a></li>
      <li><a href="#">Stress Management</a></li>
      <li><a href="#">Memory and Study Skills</a></li>
      <li><a href="#">Motivation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
    <ul>
      <li class="dir"><a href="#">Web Design</a></li>
      <li class="dir"><a href="#">Graphic Design</a>
      <li><a href="#">Design Tools</a></li>
      <li><a href="#">User Experience</a></li>
      <li><a href="#">Game Design</a></li>
      <li><a href="#">Design Thinking</a></li>
      <li><a href="#">3D & Animation</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Architectural Design</a></li>
      <li><a href="#">Interior Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
    <ul>
      <li class="dir"><a href="#">Digital Marketing</a></li>
      <li class="dir"><a href="#">Search Engine Optimization</a>
      <li><a href="#">Social Media Marketing</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Marketing Fundamentals</a></li>
      <li><a href="#">Analystics & Automation</a></li>
      <li><a href="#">Public Relations</a></li>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Video & Mobile Marketing</a></li>
      <li><a href="#">Content Marketing</a></li>
      <li><a href="#">Non-Digital Marketing</a></li>
      <li><a href="#">Growth Hacking</a></li>
      <li><a href="#">Affiliate Marketing</a></li>
      <li><a href="#">Product Marketing</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
    <ul>
      <li class="dir"><a href="#">Life Hacks</a></li>
      <li class="dir"><a href="#">Arts & Crafts</a></li>
      <li class="dir"><a href="#">Food & Beverage</a>
      <li><a href="#">Beauty & Makeup</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Gaming</a></li>
      <li><a href="#">Home Improvement</a></li>
      <li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
    <ul>
      <li class="dir"><a href="#">Digital Photography</a></li>
      <li class="dir"><a href="#">Photography Fundamentals</a></li>
      <li class="dir"><a href="#">Portraits</a>
      <li><a href="#">Landscape</a></li>
      <li><a href="#">Black & White</a></li>
      <li><a href="#">Photography Tools</a></li>
      <li><a href="#">Mobile Photography</a></li>
      <li><a href="#">Travel Photography</a></li>
      <li><a href="#">Commercial Photography</a></li>
      <li><a href="#">Wedding Photography</a></li>
      <li><a href="#">Video Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
    <ul>
      <li class="dir"><a href="#">Fitness</a></li>
      <li class="dir"><a href="#">General Health</a></li>
      <li class="dir"><a href="#">Sports</a>
      <li><a href="#">Nutrition</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Mental Health</a></li>
      <li><a href="#">Dieting</a></li>
      <li><a href="#">Self Defense</a></li>
      <li><a href="#">Safety & First Aid</a></li>
      <li><a href="#">Dance</a></li>
      <li><a href="#">Meditation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
    <ul>
      <li class="dir"><a href="#">English</a></li>
      <li class="dir"><a href="#">Spanish</a></li>
      <li class="dir"><a href="#">German</a>
      <li><a href="#">French</a></li>
      <li><a href="#">Japanese</a></li>
      <li><a href="#">Portuguese</a></li>
      <li><a href="#">Chinese</a></li>
      <li><a href="#">Russian</a></li>
      <li><a href="#">Latin</a></li>
      <li><a href="#">Arabic</a></li>
      <li><a href="#">Hebrew</a></li>
      <li><a href="#">Italian</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
    <ul>
      <li class="dir"><a href="#">Instruments</a></li>
      <li class="dir"><a href="#">Production</a></li>
      <li class="dir"><a href="#">Music Fundamentals</a>
      <li><a href="#">Vocal</a></li>
      <li><a href="#">Music Techniques</a></li>
      <li><a href="#">Music Software</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
    <ul>
      <li class="dir"><a href="#">Social Science</a></li>
      <li class="dir"><a href="#">Math & Science</a></li>
      <li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
 <!-- end of info nav -->
 
    <!-- Course Introduction -->
      <div id='course_intro'>
        <div id='intro_title'>
          Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
        <video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
      </div>
    <!-- End of Course Introduction -->
    
    <!-- Course Facts -->
      <div id='course_facts'>
        <!-- Star Ratings -->
         <span id='facts_ratings'> 400 Ratings </span>
                  <div class="Rating">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
            <defs>
              <path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
            </defs>
            <use fill="white" fill-rule="evenodd" xlink:href="#a"/>
          </svg>
        
          <meter min="0" max="5" value="1.73"></meter>
        </div>
        <!-- End of Star Ratings -->
        
        <!-- Length -->
         <span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
        <!-- End of Length -->
        
        <!-- Skill Level -->
         <span id='course_skillText'> Skill Level <br> <span id='course_skill'>
         
         <!-- Skill Boxes -->
          <div class='fillSquare'></div> <div class='fillSquare'></div>  <div class='emptySquare'></div>
         <!-- End of Skill Boxes -->
         
         <span id='skill_level'> Intermediate </span>
         
         </span> </span>
        <!-- End of Skill Level -->
        
        <!-- Wish List Button -->
          <div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
        <!-- End of Wish List Button -->
        
      </div>
                <!-- End of Course Facts -->
                
                
                <!-- Teacher Div -->
                  <div id='teacher_div'>
                    <a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
                    
                   <br> <br> <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
                   
                   <div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div>
                   
                  </div>
                <!-- End of Teacher Div -->
＆＃13;
＆＃13;
＆＃13;

泄露的链接内容的屏幕截图

Visual Aid

换句话说，如果您将鼠标悬停在此特定部分上，则会有一个链接。这是个错误。我只想要教师姓名及其图片的链接。 如何修复此错误？

SIDE注意：由于某种原因，Stack Overflow编辑器不会渲染＆＃34;技能等级＆＃34;正确定位和定位愿望清单按钮。这些错误不会以任何方式与链接泄漏相关联......

1 个答案:

答案 0 :(得分：2)

我对你的css进行了一些编辑，问题已得到修复，但请注意，当你想要居中元素时，你应该使用text-align:center，而不是按left和{{1}更改其位置}。

right
/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* courses.php */

/* course intro */

#course_body {
  background: #F4F4F4;
}

#course_intro {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: 40px;
  left: 50px;
}

#intro_title {
  width: 562px;
  position: relative;
  top: 2px;
}

#intro_video {
  width: 375px;
  height: 210px;
  position: relative;
  top: -7px;
}

/* end of course intro */

/* course facts */

#course_facts {
  border: 1px solid #DDDDDD;
  background: white;
  width: 568px;
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding: 20px 20px 10px 20px;
  position: relative;
  top: -311px;
  left: 750px;
  font-size: 20px;
  height: 115px;
}

  .Rating {
  position: relative;
  width: 125px;
  height: 25px;
  top: -5px;
}
.Rating svg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
}
.Rating meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
  background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
  background: #FF7867;
}

#facts_ratings {
  position: relative;
  top: -6px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_length {
  position: relative;
  top: -57px;
  left: 200px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

#course_time {
  letter-spacing: 0;
  font-weight: bold;
  font-size: 18px;
  color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
  position: relative;
  top: -84px;
  left: 280px;
  text-transform: uppercase;
  font-size: 14px;
  word-spacing: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.fillSquare, .emptySquare {
  display: inline-block;
  position: relative;
  left: 80px;
}

.fillSquare {
  width: 12px;
  height: 12px;
  background: #666;
}

.emptySquare {
  width: 12px;
  height: 12px;
  background: #B8B8B8;
}

#skill_level {
  position: relative;
  left: 85px;
  top: -2px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: normal;
  color: #2E3D49;
}

/* end of skill level */

/* Wish List button */

#course_wish {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  position: absolute;
  width: 87px;
  padding: 5px;
  position: relative;
  top: -65px;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
  border-radius: 3px;
}

#empty_heart {
  color: #FF827F;
}

#course_wish_text {
  position: relative;
  left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
  width: 326px;
  border: 1px solid #ddd;
  background: white;
  position: relative;
  left: 1002px;
  padding: 15px;
  top: -280px;
  text-align:center;
}

#teacher_picture {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

#teacher_name {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
}

#teacher_div a {
  text-decoration: none;
  color: #00698C;
}

#teacher_div a:hover {
  text-decoration: underline;
}

#teacher_tagLine {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #999;
  text-align: center;
  width: 325px;
}

/* End of Teacher div */

/* end of courses.php */

我从这些元素<?php require "connect.php"; ?> <!DOCTYPE html> <html> <head> <title> Hacked Genius </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link rel='stylesheet' href='main.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script src='main.js'></script> </head> <body id='course_body'> <!-- nav --> <div id='nav'> </div> <!-- end of nav --> <!-- info nav --> <nav id="primary_nav_wrap"> <ul> <li><a href="#">Development</a> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">Mobile Apps</a></li> <li><a href="#">Programming Languages</a></li> <li><a href="#">Game Development</a></li> <li><a href="#">Databases</a></li> <li><a href="#">Software Testing</a></li> <li><a href="#">Software Engineering</a></li> <li><a href="#">Development Tools</a></li> <li><a href="#">E-Commerce</a></li> </ul> </li> <li><a href="#">Business</a> <ul> <li><a href="#">Finance</a></li> <li><a href="#">Entrepreneurship</a></li> <li><a href="#">Communications</a></li> <li><a href="#">Management</a></li> <li><a href="#">Sales</a></li> <li><a href="#">Strategy</a></li> <li><a href="#">Operations</a></li> <li><a href="#">Project Management</a></li> <li><a href="#">Business Law</a></li> <li><a href="#">Data and Anylytics</a></li> <li><a href="#">Home Business</a></li> <li><a href="#">Human Resources</a></li> <li><a href="#">Industry</a></li> <li><a href="#">Media</a></li> <li><a href="#">Real Estate</a></li> <li><a href="#">Other</a></li> </ul> </li> <li><a href="#">IT & Software</a> <ul> <li class="dir"><a href="#">IT Certification</a></li> <li class="dir"><a href="#">Network & Security</a> <li><a href="#">Hardware</a></li> <li><a href="#">Operating Systems</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Office Productivity</a> <ul> <li class="dir"><a href="#">Microsoft</a></li> <li class="dir"><a href="#">Apple</a> <li><a href="#">Google</a></li> <li><a href="#">SAP</a></li> <li><a href="#">Intuit</a></li> <li><a href="#">Salesforce</a></li> <li><a href="#">Oracle</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Personal Development</a> <ul> <li class="dir"><a href="#">Personal Transformation</a></li> <li class="dir"><a href="#">Productivity</a> <li><a href="#">Leadership</a></li> <li><a href="#">Personal Finance</a></li> <li><a href="#">Career Development</a></li> <li><a href="#">Parenting & Relationships</a></li> <li><a href="#">Happiness</a></li> <li><a href="#">Religion & Spirituality</a></li> <li><a href="#">Personal Brand Building</a></li> <li><a href="#">Creativity</a></li> <li><a href="#">Influence</a></li> <li><a href="#">Self Esteem</a></li> <li><a href="#">Stress Management</a></li> <li><a href="#">Memory and Study Skills</a></li> <li><a href="#">Motivation</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Design</a> <ul> <li class="dir"><a href="#">Web Design</a></li> <li class="dir"><a href="#">Graphic Design</a> <li><a href="#">Design Tools</a></li> <li><a href="#">User Experience</a></li> <li><a href="#">Game Design</a></li> <li><a href="#">Design Thinking</a></li> <li><a href="#">3D & Animation</a></li> <li><a href="#">Fashion</a></li> <li><a href="#">Architectural Design</a></li> <li><a href="#">Interior Design</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Marketing</a> <ul> <li class="dir"><a href="#">Digital Marketing</a></li> <li class="dir"><a href="#">Search Engine Optimization</a> <li><a href="#">Social Media Marketing</a></li> <li><a href="#">Branding</a></li> <li><a href="#">Marketing Fundamentals</a></li> <li><a href="#">Analystics & Automation</a></li> <li><a href="#">Public Relations</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Video & Mobile Marketing</a></li> <li><a href="#">Content Marketing</a></li> <li><a href="#">Non-Digital Marketing</a></li> <li><a href="#">Growth Hacking</a></li> <li><a href="#">Affiliate Marketing</a></li> <li><a href="#">Product Marketing</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Lifestyle</a> <ul> <li class="dir"><a href="#">Life Hacks</a></li> <li class="dir"><a href="#">Arts & Crafts</a></li> <li class="dir"><a href="#">Food & Beverage</a> <li><a href="#">Beauty & Makeup</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Gaming</a></li> <li><a href="#">Home Improvement</a></li> <li><a href="#">Pet Care & Training</a></li> </ul> <li><a href="#">Photography</a> <ul> <li class="dir"><a href="#">Digital Photography</a></li> <li class="dir"><a href="#">Photography Fundamentals</a></li> <li class="dir"><a href="#">Portraits</a> <li><a href="#">Landscape</a></li> <li><a href="#">Black & White</a></li> <li><a href="#">Photography Tools</a></li> <li><a href="#">Mobile Photography</a></li> <li><a href="#">Travel Photography</a></li> <li><a href="#">Commercial Photography</a></li> <li><a href="#">Wedding Photography</a></li> <li><a href="#">Video Design</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Health & Fitness</a> <ul> <li class="dir"><a href="#">Fitness</a></li> <li class="dir"><a href="#">General Health</a></li> <li class="dir"><a href="#">Sports</a> <li><a href="#">Nutrition</a></li> <li><a href="#">Yoga</a></li> <li><a href="#">Mental Health</a></li> <li><a href="#">Dieting</a></li> <li><a href="#">Self Defense</a></li> <li><a href="#">Safety & First Aid</a></li> <li><a href="#">Dance</a></li> <li><a href="#">Meditation</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Language</a> <ul> <li class="dir"><a href="#">English</a></li> <li class="dir"><a href="#">Spanish</a></li> <li class="dir"><a href="#">German</a> <li><a href="#">French</a></li> <li><a href="#">Japanese</a></li> <li><a href="#">Portuguese</a></li> <li><a href="#">Chinese</a></li> <li><a href="#">Russian</a></li> <li><a href="#">Latin</a></li> <li><a href="#">Arabic</a></li> <li><a href="#">Hebrew</a></li> <li><a href="#">Italian</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Music</a> <ul> <li class="dir"><a href="#">Instruments</a></li> <li class="dir"><a href="#">Production</a></li> <li class="dir"><a href="#">Music Fundamentals</a> <li><a href="#">Vocal</a></li> <li><a href="#">Music Techniques</a></li> <li><a href="#">Music Software</a></li> <li><a href="#">Other</a></li> </ul> <li><a href="#">Academics</a> <ul> <li class="dir"><a href="#">Social Science</a></li> <li class="dir"><a href="#">Math & Science</a></li> <li class="dir"><a href="#">Humanities</a> </ul> </ul> </nav> <!-- end of info nav --> <!-- Course Introduction --> <div id='course_intro'> <div id='intro_title'> Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br> <video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video> </div> <!-- End of Course Introduction --> <!-- Course Facts --> <div id='course_facts'> <!-- Star Ratings --> <span id='facts_ratings'> 400 Ratings </span> <div class="Rating"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100"> <defs> <path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/> </defs> <use fill="white" fill-rule="evenodd" xlink:href="#a"/> </svg> <meter min="0" max="5" value="1.73"></meter> </div> <!-- End of Star Ratings --> <!-- Length --> <span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span> <!-- End of Length --> <!-- Skill Level --> <span id='course_skillText'> Skill Level <br> <span id='course_skill'> <!-- Skill Boxes --> <div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div> <!-- End of Skill Boxes --> <span id='skill_level'> Intermediate </span> </span> </span> <!-- End of Skill Level --> <!-- Wish List Button --> <div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div> <!-- End of Wish List Button --> </div> <!-- End of Course Facts --> <!-- Teacher Div --> <div id='teacher_div'> <a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a> <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a> <div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div> </div> <!-- End of Teacher Div -->，#teacher_picture和#teacher_name

中移除了所有位置（顶部，左侧） 
#teacher_tagLine

然后我添加了text-aign：center to #teacher_picture { width: 85px; height: 85px; border-radius: 50%; position: relative; //left: 120px; //top: 3px; } #teacher_name { font-family: 'Open Sans', sans-serif; font-size: 18px; text-align: center; position: relative; //top: -15px; width: 325px; } #teacher_tagLine { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #999; text-align: center; width: 325px; position: relative; //top: -15px; } ：

#teacher_div
相关问题
最新问题