我的CSS不会与我的HTML链接？ [英] My CSS wont link with my HTML?
本文介绍了我的CSS不会与我的HTML链接？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< ！DOCTYPE html >
< meta name = msapplication-TileColor 内容 = ＃da532c >
< meta name = theme-color content = #ffffff >
< meta charset = utf-8 >
< title > ottergram
< h1 class = logo-text > ottergram < / h1 >
< ul class = thumbnail-list >
< li class = thumbnail-item > < a href = ＃ >
< span class = thumbnail-title > Barry < / span >
< / a >
< / li > < li class = thumbnail-item > < a href = ＃ >
< span < span class =code-attribute> class = thumbnail-title > Robin < / span >
< / a < span class =code-keyword>>
< / li > < li class = thumbnail-item > < < span class =code-leadattribute> a href = ＃ >
< span class =code-keyword>< span class = thumbnail-title > Maurice < / span >
< / a >
< / li > < li class = thumbnail-item > < a href = ＃ >
< span class = thumbnail-title > Lesley < / span >
< / a >
< / li > < li class = thumbnail-item > < ; a href < span class =code-keyword> = ＃ >
< span class = thumbnail- title > Barbara < / span >
< / a >
< / li > < / ul >
body {
background：rgb（149,194,215）;
字体大小：10px;
}
a {
text-decoration：none;
}
thumbnail-item + .thumbnail-item {
margin-top：10px;}
.thumbnail-item {
边界：1px solid rgb（100％，100％，100％）;
border：1px solid rgba（100％，100％，100％，0.8）;
display：block;
}
.thumbnail-list {
display：block;
list-style：none;
宽度：100％;
}
.thumbnail-title {
background：rgb（96,125,139）;
color：rgb（202,238,139）;
display：block;
字体大小：18px;
保证金：0;
填充：4px 10px;
}
我的尝试：
我的html与我的css在同一个文件夹中，不知道为什么它没有链接。
解决方案
< blockquote>
<！DOCTYPE html>
< html lang =endir =ltr>
< head>
< link rel =stylesheethref =styles.css>
< link rel =apple-touch-iconsizes =180x180href =/ apple-touch-icon.png>
< link rel =icontype =image / pngsizes =32x32href =/ favicon-32x32.png>
< link rel =icontype =image / pngsizes =16x16href =/ favicon-16x16.png>
< link rel =manifesthref =/ site.webmanifest>
< link rel =mask-iconhref =/ safari-pinned-tab.svgcolor =＃5bbad5>
< meta name =msapplication-TileColorcontent =＃da532c>
< meta name =theme-colorcontent =#ffffff>
< meta charset =utf-8>
< title> ottergram< / title>
< / head>
< body>
< header>
< h1 class =logo-text> ottergram< / h1>
< / header>
< ul class =thumbnail-list>
< li class =thumbnail-item>
< a href =＃>
< img class =thmbnail-imagesrc =img / otter1.jpgalt =Barry the otter>
< span class =thumbnail-title> Barry< / span>
< / a>
< / li>
< li class =thumbnail-item>
< a href =＃>
< img class =thumbnail-imagesrc =img / otter2.jpgalt =Robin the otter>
< span class =thumbnail-title>罗宾< /跨度>
< / a>
< / li>
< li class =thumbnail-item>
< a href =＃>
< img class =thumbnail-imagesrc =img / otter3.jpgalt =Maurice the otter>
< span class =thumbnail-title> Maurice< / span>
< / a>
< / li>
< li class =thumbnail-item>
< a href =＃>
< img class =thmbnail-imagesrc =img / otter4.jpgalt =Lesley the otter>
< span class =thumbnail-title> Lesley< / span>
< / a>
< / li>
< li class =thumbnail-item>
< a href =＃>
< img class =thumbnail-imagesrc =img / otter5.jpgalt =Barbara the otter>
< span class =thumbnail-title> Barbara< / span>
< / a>
< / li>
< / ul>
< / body>
< / html>
<!DOCTYPE html>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<title>ottergram
<h1 class="logo-text">ottergram</h1>
<ul class="thumbnail-list">
<li class="thumbnail-item"> <a href="#">
<span class="thumbnail-title">Barry</span>
</a>
</li> <li class="thumbnail-item"> <a href="#">
<span class="thumbnail-title"> Robin</span>
</a>
</li> <li class="thumbnail-item"> <a href="#">
<span class="thumbnail-title">Maurice</span>
</a>
</li> <li class="thumbnail-item"> <a href="#">
<span class="thumbnail-title">Lesley</span>
</a>
</li> <li class="thumbnail-item"> <a href="#">
<span class="thumbnail-title">Barbara</span>
</a>
</li> </ul>
body {
background: rgb(149, 194, 215);
font-size: 10px;
}
a {
text-decoration: none;
}
thumbnail-item + .thumbnail-item {
margin-top: 10px;}
.thumbnail-item {
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
display: block;
}
.thumbnail-list {
display: block;
list-style: none;
width: 100%;
}
.thumbnail-title {
background: rgb(96, 125, 139);
color: rgb(202, 238, 139);
display: block;
font-size: 18px;
margin: 0;
padding: 4px 10px;
}
What I have tried:
My html is in the same folder as my css, dont know why it isnt linking.
解决方案
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<title>ottergram</title>
</head>
<body>
<header>
<h1 class="logo-text">ottergram</h1>
</header>
<ul class="thumbnail-list">
<li class="thumbnail-item">
<a href="#">
<img class="thmbnail-image" src="img/otter1.jpg" alt="Barry the otter">
<span class ="thumbnail-title">Barry</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the otter">
<span class ="thumbnail-title"> Robin</span>
</a>
</li>
<li class="thumbnail-item" >
<a href="#">
<img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the otter">
<span class ="thumbnail-title" >Maurice</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thmbnail-image" src="img/otter4.jpg" alt="Lesley the otter">
<span class="thumbnail-title" >Lesley</span>
</a>
</li>
<li class="thumbnail-item">
<a href="#">
<img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
</body>
</html>这篇关于我的CSS不会与我的HTML链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
