将我的HTML和CSS组合在一起

Question

我这里有一个用户配置文件。我拥有HTML和CSS代码完美的我想要的方式。

但是我现在需要的是将我的HTML和CSS组合在一起。但是我不确定如何。因为没有CSS，它会更改用户配置文件的显示。

有人可以帮我吗？

$(function() {
  $('#profile-image1').on('click', function() {
    $('#profile-image-upload').click();
  });
});

input.hidden {
  position: absolute;
  left: -9999px;
}
#profile-image1 {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border: 2px solid #03b1ce;
}
.tital {
  font-size: 16px;
  font-weight: 500;
}
.bot-border {
  border-bottom: 1px #f8f8f8 solid;
  margin: 5px 0 5px 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
    </h2>
    <div class="col-md-7 ">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>User Profile</h4>
        </div>
        <div class="panel-body">
          <div class="box box-info">
            <div class="box-body">
              <div class="col-sm-6">
                <div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
                  <input id="profile-image-upload" class="hidden" type="file">
                  <div style="color:#999;">click here to change profile image</div>
                  <!--Upload Image Js And Css-->
                </div>
                <br>
                <!-- /input-group -->
              </div>
              <div class="col-sm-6">
                <h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
                </span>
                <span><p>Aspirant</p></span>
              </div>
              <div class="clearfix"></div>
              <hr style="margin:5px 0 5px 0;">
              <div class="col-sm-5 col-xs-6 tital ">First Name:</div>
              <div class="col-sm-7 
    col-xs-6 ">Prasad</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
              <div class="col-sm-
    7"> Shankar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
              <div class="col-sm-
    7"> Huddedar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
              <div class="col-sm-7">15 Jun 2016</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
              <div class="col-
    sm-7">11 Jun 1998</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
              <div class="col-
    sm-7">Shirdi</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
              <div class="col-sm-
    7">Indian</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Relition:</div>
              <div class="col-sm-
    7">Hindu</div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要做的就是在<style> ADD CODE HERE </style>

Answer 2

只需将CSS包装在<style>标签中。

示例

<style> /* Note the opening style tag */
input.hidden {
  position: absolute;
  left: -9999px;
}
#profile-image1 {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border:2px solid #03b1ce;
}
.tital {
  font-size:16px;
  font-weight:500;
}
.bot-border {
  border-bottom:1px #f8f8f8 solid;
  margin:5px 0 5px 0;
} 
</style> /* When you're done with the CSS, close the style tag. */

您可以将其准确地保留在HTML中的位置。这是您使用的确切代码：

<div class="container">
  <div class="row">
    <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
    <div class="col-md-7 ">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>User Profile</h4>
        </div>
        <div class="panel-body">
          <div class="box box-info">
            <div class="box-body">
              <div class="col-sm-6">
                <div align="center">
                  <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
                  <input id="profile-image-upload" class="hidden" type="file">
                  <div style="color:#999;">click here to change profile image</div>
                  <!--Upload Image Js And Css-->
                </div>
                <br>
                <!-- /input-group -->
              </div>
              <div class="col-sm-6">
                <h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
                <span><p>Aspirant</p></span>
              </div>
              <div class="clearfix"></div>
              <hr style="margin:5px 0 5px 0;">
              <div class="col-sm-5 col-xs-6 tital">First Name:</div>
              <div class="col-sm-7 
col-xs-6 ">Prasad</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
              <div class="col-sm-
7"> Shankar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital">Last Name:</div>
              <div class="col-sm-7"> Huddedar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
              <div class="col-sm-7">15 Jun 2016</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
              <div class="col-sm-7">11 Jun 1998</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
              <div class="col-sm-7">Shirdi</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
              <div class="col-sm-7">Indian</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Relition:</div>
              <div class="col-sm-7">Hindu</div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
        </div>
      </div>
    </div>
    <script>
      $(function() {
        $('#profile-image1').on('click', function() {
          $('#profile-image-upload').click();
        });
      });
    </script>
  </div>
  <style>
    input.hidden {
      position: absolute;
      left: -9999px;
    }
    #profile-image1 {
      cursor: pointer;
      width: 100px;
      height: 100px;
      border: 2px solid #03b1ce;
    }
    .tital {
      font-size: 16px;
      font-weight: 500;
    }
    .bot-border {
      border-bottom: 1px #f8f8f8 solid;
      margin: 5px 0 5px 0;
    }
  </style>

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
  position: absolute;
  left: -9999px;
}
#profile-image1 {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border: 2px solid #03b1ce;
}
.tital {
  font-size: 16px;
  font-weight: 500;
}
.bot-border {
  border-bottom: 1px #f8f8f8 solid;
  margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
  $('#profile-image1').on('click', function() {
    $('#profile-image-upload').click();
  });
});
</script>
<div class="container">
  <div class="row">
    <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
    </h2>
    <div class="col-md-7 ">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>User Profile</h4>
        </div>
        <div class="panel-body">
          <div class="box box-info">
            <div class="box-body">
              <div class="col-sm-6">
                <div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
                  <input id="profile-image-upload" class="hidden" type="file">
                  <div style="color:#999;">click here to change profile image</div>
                  <!--Upload Image Js And Css-->
                </div>
                <br>
                <!-- /input-group -->
              </div>
              <div class="col-sm-6">
                <h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
                </span>
                <span><p>Aspirant</p></span>
              </div>
              <div class="clearfix"></div>
              <hr style="margin:5px 0 5px 0;">
              <div class="col-sm-5 col-xs-6 tital ">First Name:</div>
              <div class="col-sm-7 
    col-xs-6 ">Prasad</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
              <div class="col-sm-
    7"> Shankar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
              <div class="col-sm-
    7"> Huddedar</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
              <div class="col-sm-7">15 Jun 2016</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
              <div class="col-
    sm-7">11 Jun 1998</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
              <div class="col-
    sm-7">Shirdi</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
              <div class="col-sm-
    7">Indian</div>
              <div class="clearfix"></div>
              <div class="bot-border"></div>
              <div class="col-sm-5 col-xs-6 tital ">Relition:</div>
              <div class="col-sm-
    7">Hindu</div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

将CSS代码放入<style></style>标签中，将JS放入<script></script>标签中。就是这样