我目前有一个网站的设置，但我不能完全弄清楚如何添加到我的网站左上角的标志。我不是在谈论一个图标，如果你想知道我在谈论一个标志，是在网站本身就像如何堆栈溢出有一个标志的网站上的话堆栈溢出旁边。我很新的编码虽然所以它可能是一个ammeture错误，但我只是不能让我的标志显示在我的网站上。这里是我目前的代码，我在记事本+
更新：修复了我的代码，并上传到互联网上使用filezilla，但由于某种原因，现在我的标志不会显示，它只是一张小破纸，显示在图像的地方，显示图像不会工作，我不知道如何使我的标志显示出来。另一件事，我修复了我的笔记本电脑上的代码，然后把它放在usb上，然后走到我的桌面上，用它来使用filezilla将我的网站上传到互联网上。
（固定代码）

<!Doctype html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/G:/coding/wensite/favicon.ico" type="image/x-icon" />
<meta charset="utf-8"/>
<title> I_See_St4irs</title>
<meta name="Viewpoint" content="Width=device-width,initial-scale=1.0">
<link rel="stylsheet" href="blueberry.css"/>
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body{
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%:
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p{
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
  display: inline-block;
  margin: 15px; 
  float: left;
  height: 60px;
  width: auto; 
  border-radius: 50%; 
}
nav { 
float: right;
padding: 35px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background:#ccc url(http://i65.tinypic.com/xgfvc4.jpg ) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin; 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width; 960px;
margin-top; 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;
}
ul.camaro li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.social li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #333333;
max-height: 50px;
text-align: center;
opacity: 0.95;
}




/*-------------------------MEDIA!!!-------------------------*/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 740px) {
header {
psotion: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#"><img id="logo" src="http://i67.tinypic.com/2v9dm5h.jpg"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="contact me.html">Contact Me.</a></li>
<li><a href="pictures.html">Pictures</a></li>
<li><a href="about me.html">About Me</a></li>
<li><a href="other people.html">Other People</a></li>
</ul>

</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="staring.jpg"/></li>
<li><img src="burnout.jpg"/></li>
<li><img src="ablade.jpg"/></li>
<li><img src="aston.jpg"/></li>
<li><img src="jag.jpg"/></li>
<li><img src="post1.jpg"/></li>
<li><img src="post2.jpg"/></li>
<li><img src="post4.jpg"/></li>
<li><img src="post5.jpg"/></li>
<li><img src="post8.jpg"/></li>
<li><img src="post9.jpg"/></li>
<li><img src="post10.jpg"/></li>
<li><img src="post11.jpg"/></li>

</ul>
</div>
</div>
</div>
<section>
<img src="instagram_logo_small.png"/>
<h1>My Instagram!</h1>
<p> This is my instagram account my name on instagram is I_see_st4irs i post mainly car pictures</p>
</section>
<section>
<img src="twitter.png"/>
<h1>My Twitter!</h1>
<p> This is my Twitter account my name on Twitter is I_see_st4irs i post a little bit of everything i have a secondary twitter by the name of Lenny_bruh_rekt</p>
</section>
<section>
<img src="pinterest.png"/>
<h1>My Pinterest!</h1>
<p> This is my Pinterest account my name on Pinterest is I_see_st4irs i post anything i like on my boards.</p>
</section>
<div class="clear"></div>
<article>
<img src="2ss.jpg"/>
</article>
<aside>
<h2> My Favorite Car:</h2>
<ul class="Camaro">
<li><h3>My favorite car is the Chevrolet Camaro, especially the 6th gen Camaro which is the latest Camaro.</h3></li>
<li><h3>455 horsepower</h3></li>
<li><h3>455 foot pounds of torque</h3></li>
<li><h3>0-60 mph in 3.9 seconds</h3></li>
<li><h3>Runs the quarter mile in 12.2 seconds</h3></li>
<li><h3>Weighs 3,685 pounds</h3></li>
<li><h3>So the 2016 Camaro SS is a great muscle car</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>The 2016 Camaro SS</h1>
<img src="ss.jpg"/>
<p> This is My favorite muscle car.</p>
</section>
<section>
<h1>The 2015 Koenigsegg one:1</h1>
<img src="koenigsegg.jpg"/>
<p> This is my favorite Megacar.</p>
</section>
<section>
<h1>The 2016 Dodge Charger Hellcat</h1>
<img src="hellcat.jpg"/>
<p> This is My favorite sports sedan.</p>
</section>
<footer>
<section>
<h3><b> Me</b></h3>
<p><b>@iamwilsparks@gmail.com</b><br><br>
contact me if you want to send me pictures to post on my Instagram or Twitter.</p>
</section>
<section>
<h3>Follow me!</h3>
<ul class="social">
<li><a href="www.online-instagram.com/user/i_see_st4irs/246253528"><img src="instagram_logo_small.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="twitter.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="tumblr.png"></a></li>
<li><a href="https://plus.google.com/wm/quevuelvamatt/.../collections"><img src="googleplus.png"></a></li>
<li><a href="https://www.youtube.com/channel/UCOaUXzGUZ2_1EB_-QI15WoA"><img src="youtube.png"></a></li>
</ul>
</section>
<section>
<img src="logo.jpg">
</section>
</footer>
<footer class="second">
<p>©copyright - I_See_St4irs, 2016.</p>
</footer>



</body>
</html>

5条答案

按热度按时间

whhtz7ly1#

一旦你为你的网站准备好了一个logo，就很容易了。这是我使用的代码：

<link rel="shortcut icon" type="image/x-icon" href="yourLogo.jpg" />

就是这样!
希望能有所帮助!

赞(0）回复(0）举报 2023-02-06

camsedfj2#

您在#logo CSS块中拼错了height。更正后，它将显示出来。
另外，仅供参考，您不能将a href放在CSS背景声明中：

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: <a href="http://tinypic.com?ref=261kfht" target="_blank">     <img src="http://i68.tinypic.com/261kfht.jpg" border="0" alt="Image and video hosting by TinyPic"></a> center;
}

这个标记还有其他问题，如果你有其他问题，请告诉我，一旦你修复这些。

eblbsuwk3#

正如@alireza所说：你在#logo{ css中拼错了height.
也可以这样做：

网页：

<a href="#"><img id="logo" src="http://i67.tinypic.com/2v9dm5h.jpg"></a>
以及

中央支助事务厅：

#logo {
  display: inline-block;
  margin: 15px; /* margin: 20px was off */
  float: left;
  height: 60px;
  width: auto; /* correct proportions to specified height */
  border-radius: 50%; /* makes it a circle */
}

8qgya5xd4#

css中的属性无效。请将heigt: 60px;更改为height: 60px;
Jsfiddle

waxmsbnn5#

我用这个：

<link rel="icon" href="image.png">

它不会改变大小，但很容易使用。

css 如何使用html将徽标添加到网站

5条答案

相关问题

热门标签

最新问答