我的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屋!
查看全文