エディタの内容と検証の内容が一致しない
Atomでhtmlとcssを書いてます。今、ドットインストールに従って進めている段階です。
指示通りに書いているはずなのですが実行すると上手く表示されません。
具体的には
・atomでheadに書いたlinkが検証ではbodyに表示される。
・検証で勝手に""が入り込む
これと同時にposition: relative; も反映されないです。
長くなりますがわからないんでコード全部載せます、、
Atomのコード
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Dotinstall Paneを使ってみよう</title> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" href="css/styless.css"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 <h1>Dotinstall Pane</h1> 14 <p> 15 ドットインストールを見ながら<br> 16 コーディングができるAtomパッケージ 17 </p> 18 <a href="#" target="_blank" class="btn">詳細を見る</a> 19 <img src="img/top.png" width="400" height="270" alt="Dotinstall Paneの画像"> 20 </div> 21 </header> 22 </body> 23</html> 24
css
1 2ody { 3 font-size: 16px; 4 font-family: Verdana, sans-serif; 5 color: #333; 6 margin: 0; 7} 8 9header { 10 color: #fff; 11 background: url(../img/bg.png); 12 background-size: cover; 13} 14 15header h1 { 16 margin-top: 0; 17 font-weight: normal; 18 font-size: 36px; 19 margin-bottom: 8px; 20} 21 22header p { 23 margin-top: 0; 24 margin-bottom: 50px; 25} 26 27header .container { 28 width: 820px; 29 margin: 0 auto; 30 padding: 60px 0; 31 position: relative; 32} 33 34header img { 35 position: absolute; 36 bottom: 0; 37 right: 0; 38} 39 40.btn { 41 display: inline-block; 42 width: 290px; 43 background: #fff; 44 color: #f39800; 45 text-align: center; 46 text-decoration: none; 47 padding: 8px 0; 48 border-radius: 5px; 49 opacity: 0.9; 50} 51 52.btn:hover { 53 opacity: 1.0; 54} 55
検証のコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dotinstall Paneを使ってみよう</title> 6 </head> 7 <body> 8 "" 9 <link rel="icon" href="favicon.ico"> 10 <link rel="stylesheet" href="css/styless.css"> 11 <header> 12 <div class="container"> 13 <h1>Dotinstall Pane</h1> 14 <p> 15 ドットインストールを見ながら<br> 16 コーディングができるAtomパッケージ 17 </p> 18 <a href="#" target="_blank" class="btn">詳細を見る</a> 19 <img src="img/top.png" width="400" height="270" alt="Dotinstall Paneの画像"> 20 </div> 21 " 22 " 23 </header> 24 </body> 25</html> 26
試したこと
検証の方のコードをatomと同じように書き換えてみたら上手く表示されるときもありましたが、もう1度読み込むと戻ってしまいます。Atomの方でどうしたらいいのかわかりません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/26 02:04
2019/03/26 02:13
2019/03/26 06:28