HTMLにCSSを追加する

-1

私はすでにかなり簡単なHTMLページを作成し、場所にいくつかの座標を持つGoogleマップを表示します。しかし、私はもっと魅力的なものにするために、w3の学校のCSSスタイルを追加しようとしていました。ページにスタイルを追加すると、HTMLサイトのGoogleマップが表示されません... これはおそらく簡単な解決策ですが、誰かが私のコードに間違っていることを理解させる手助けができますか？ありがとう！あなたのinlnie JS（initMap）前HTMLにCSSを追加する

<!DOCTYPE html> 
<html> 
<title>Project</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<style> 
    <title>Movies</title> 
body,h1 {font-family: "Raleway", Arial, sans-serif} 
h1 {letter-spacing: 6px} 
.w3-row-padding img {margin-bottom: 12px} 
</style> 
<body> 
<!-- !PAGE CONTENT! --> 
<div class="w3-content" style="max-width:1500px"> 
<!-- Header --> 
<header class="w3-panel w3-center w3-opacity" style="padding:128px 16px"> 
    <h1 class="w3-xlarge">Movies</h1> 
    <h1>Description</h1> 
    <div class="w3-padding-32"> 
    <div class="w3-bar w3-border"> 
     <a href="#" class="w3-bar-item w3-button">Home</a> 
     <a href="#" class="w3-bar-item w3-button w3-light-grey">Twitter</a> 
     <a href="#" class="w3-bar-item w3-button">News</a> 
     <a href="#" class="w3-bar-item w3-button w3-hide-small">Admin</a> 
    </div> 
    </div> 
     <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 85%; 
     margin: 10; 
     padding: 10; 
     } 
    </style> 
</header> 
<!-- Map --> 
<div class="w3-row-padding w3-grayscale" style="margin-bottom:128px"> 
    <div class="w3-half"> 
     <div id="map"></div> 
    <script> 
     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 6, 
      center: {lat: 38.723556, lng: -9.139277} 
     }); 
     // Create an array of alphabetical characters used to label the markers. 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 
     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
     {lat: 38.754358, lng: -9.144509}, 
     {lat: 38.742448, lng: -9.145887}, 
     ] 
    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfSGO2ktpqFZwhBVMM4skuMm8SHqeL_0s&callback=initMap"> 
    </script> 
    </div> 
    <div class="w3-half"> 
    </div> 
</div> 
<!-- End Page Content --> 
</div> 
<!-- Footer --> 
<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-large"> 
    <i class="fa fa-facebook-official w3-hover-opacity"></i> 
    <i class="fa fa-instagram w3-hover-opacity"></i> 
    <i class="fa fa-snapchat w3-hover-opacity"></i> 
    <i class="fa fa-pinterest-p w3-hover-opacity"></i> 
    <i class="fa fa-twitter w3-hover-opacity"></i> 
    <i class="fa fa-linkedin w3-hover-opacity"></i> 
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p> 
</footer> 
</body> 
</html>

出典

2017-05-17 Luís

スタイルタグ内にtitleタグがあります。おそらく '' allo

あなたはこの 'のような構造は、' 'にそれらのものをラップ' https://www.w3schools.com/html/html_intro.asp –

は、まだGoogleマップの部分にすべての空白持っている必要があります:( –

てみローディングGoogleマップAPIのjsファイル。そして、なぜ体内にスタイルタグを入れているのですか？それを先頭タグに移動し、すべてのスタイルを1つのスタイルタグの下に置くことが望ましいです。

出典

2017-05-17 15:03:29 user31782

外部のCSSファイルを使用してHTMLにインポートすることをおすすめします。

<head> 
    <link rel="stylesheet" type="text/css" href="yourFile.css"> 
</head>

CSSファイル：

/* Always set the map height explicitly to define the size of the div 
    * element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 85%; 
    margin: 10; 
    padding: 10; 
    }

は構造がhereをmentionned従ってください。

出典

2017-05-17 15:05:09 Zooly

-3

ヘッドセクション内に内部スタイルブロックを書き込む必要があります。

あなたが訪問することがあります。ここではhttps://www.w3schools.com/css/css_howto.asp

を、あなたはHTMLでCSSの書き方を学びます。

出典

2017-05-17 15:05:17

あなたの*回答*には実際の回答が含まれている必要があります。答えではありません。 –

CSSを実際のHTMLファイルに書き込む場合は、スタイルタグに配置して、文書の先頭に配置する必要があります。次のように（また、これからタイトルタグを削除する必要があります）。

<body> 
    <head> 
     <title></title> 
     <style> 
      // your css 
     </style> 
    </head> 
</body>

また、あなただけの別のCSSファイルを作成し、headタグで

<link rel="stylesheet" href="/assets/css/main.css" type="text/css" />

ちょうど別のポイントを以下のように配置することによって、それをリンクすることができ、私はまたにあなたのスクリプトタグのすべてを追加しますドキュメントの最下部（フッターの下）に表示されます。

出典

2017-05-17 15:33:07 MHamer5

答えて

関連する問題