这是我的HTML代码我想知道在哪里放置代码以便将其置于网页的底部或我需要插入什么代码?
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: White;
}
li a {
display: block;
color: Blue;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color:White;
color:Blue;
}
</style>
</head>
<body>
<ul>
<li class="external-link">
<a href="https://twitter.com/Andigonzolez" target="_blank">Twitter</a>
</li>
<li class="external-link">
<a href="https://www.instagram.com/andygonza_lez/?hl=en" target="_blank">Instagram</a>
</li>
<li class="external-link">
<a href="https://m.facebook.com/profile.php?ref=bookmarks" target="_blank">Facebook</a>
</li>
<li class="external-link">
<a href="https://soundcloud.com/palomazee" target="_blank">Soundcloud</a>
</li>
<li class="external-link">
<a href="" target="_blank">Shop</a>
</li>
<li class="external-link">
<a href="" target="_blank">Photos</a>
</li>
<li class="external-link">
<a href="" target="_blank">About Me</a>
</li>
</ul>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: White;
}
li {
float: center;
}
li a {
display: block;
color: Blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:Powderblue;
}
.active {
background-color: White;
}
</style>
</head>
<body>
<ul class="soc">
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-reddit" href="#"></a></li>
<li><a class="soc-instagram" href="#"></a></li>
<li><a class="soc-linkedin" href="#"></a></li>
<li><a class="soc-facebook" href="#"></a></li>
<li><a class="soc-google soc-icon-last" href="#"></a></li>
</ul>
</body>
这是我的网页的css代码,为了将这些社交媒体徽标放在其中,需要在内容中包含哪些内容?enter code here
@font-face {
font-family: 'si';
src: url('PATH_TO/socicon.eot');
src: url('PATH_TO/socicon.eot?#iefix') format('embedded-opentype'),
url('PATH_TO/socicon.woff') format('woff'),
url('PATH_TO/socicon.ttf') format('truetype'),
url('PATH_TO/socicon.svg#icomoonregular') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family:si;
src: url(PATH_TO/socicon.svg) format(svg);
}
}
.soc {
overflow:hidden;
margin:0; padding:0;
list-style:none;
}
.soc li {
display:inline-block;
*display:inline;
zoom:1;
}
.soc li a {
font-family:si!important;
font-style:normal;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
text-decoration:none;
text-align:center;
display:block;
position: relative;
z-index: 1;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 17px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
margin-right: 15px;
color: #ffffff;
background-color: none;
}
.soc-icon-last{
margin:0 !important;
}
.soc-twitter {
background-color: #4da7de;
}
.soc-twitter:before {
content:'b';
}
.soc-reddit {
background-color: #e74a1e;
.soc-reddit:before {
content:'C';
}
.soc-instagram {
background-color: #9c7c6e;
}
.soc-instagram:before {
content:'x';
}
.soc-linkedin {
background-color: #3371b7;
}
.soc-linkedin:before {
content:'j';
}
.soc-facebook {
background-color: #3e5b98;
}
.soc-facebook:before {
content:'b';
}
.soc-google {
background-color: #d93e2d;
}
.soc-google:before {
content:'c';
}