CSS doesn't work
Question
I want to create a website.
Prerequisites
CSS doesn't work.
Expected value
I want to set the size oflogo.svg to width: 120px;,height: 40px;.
Reproduction procedure
Run the code below.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポートフォリオサイト1</title>
<link rel="stylesheet" href="./dist/css/header.css" type="text/css">
</head>
<body>
<header class="header">
<a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
<nav class="header__breadcrumb-trail">
<a href="" class="header__breadcrumb-trail">About</a>
<a href="" class="header__breadcrumb-trail">Bicycle</a>
</nav>
</header>
<main class="main">
<div class="main__mainvisual">
<img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
</div>
<div class="main__about">
<p class="main__about-title">About</p>
<img class="main__profile-icon-image"src="image/about.jpg" alt="プロフィールアイコン">
<p class="main__name-text">Yusuke Oyama</p>
<p class="main__introduction-text">
初めまして。atago_ITと申します。
とある開発コミュニティで、QAエンジニアをやっています。
自転車と万年筆が大好きです。よろしくお願いいたします。
</p>
</div>
<div class="bicycle">
<div class="bicycle__bicycle-image">
<img src="image/bicycle1.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle2.jpg" alt="">
</div>
<div class="bicycle__bicycle-image">
<img src="image/bicycle3.jpg" alt="">
</div>
</div>
</main>
<footer class="footer">
<p class="footer__text">
©2021 atago_IT
</p>
</footer>
</body>
</html>
header.css
.header .header__profile_button {
width: 120px;
height: 40px;
}
1 answers
solution1
1 ACCPTED 2021-12-17 02:28:34
This looks like a very simple mistake that could have been easily overlooked. In your HTML, the <a> tag that surrounds your <img> has a class of header__profile-button whereas, your CSS calls for the class .header__profile_button . Just change either one so that the two match, and it should run smoothly.
A source that might be usefull: https://www.w3schools.com/cssref/sel_class.asp
solution2
1 2021-12-17 02:48:40
No worries it is just a minor typo mistake. (.header__profile_button vs. .header__profile-button)
Are you using Visual Studio Code? Once you select a text, this editor will show all instances.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.