在HTML上添加CSS

-1

我已經做了一個非常簡單的HTML頁面，並在地方顯示了帶有一些座標的谷歌地圖。但是，我試圖從W3學校添加一個CSS風格，使其更具吸引力。當我添加風格的頁面，谷歌地圖從我的HTML網站不顯示... 這可能是一個簡單的解決方案，但有人可以幫我找出我的代碼有什麼問題嗎？謝謝！在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

您在樣式標記中有標題標記。也許把它放在''style''標籤上已經解決了這個問題。 – allo

你應該有這樣的'結構'總結這些東西到了'' –

https://www.w3schools.com/html/html_intro.asp仍然得到了在谷歌地圖部分的所有空白:( –

嘗試加載谷歌地圖API的js文件之前，您inlnie JS（initMap）。而且，爲什麼要將風格標籤放在身體內部？您應該將其移動到標籤頭部，並且最好將所有樣式放在一個樣式標籤下。

來源

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; 
    }

按照結構mentionned here。

來源

2017-05-17 15:05:09 Zooly

-3

您必須在頭部分內寫入內部樣式塊。

您可以訪問：https://www.w3schools.com/css/css_howto.asp

這裏您將學習如何在HTML編寫CSS。

來源

2017-05-17 15:05:17

您的*答案*應該包含一個實際答案。鏈接到第三方網站，並提供關於網站操作的說明不是答案。 –

如果您要在實際的HTML文件中編寫CSS，它必須放置在style標籤中，並放置在文檔頭部的頂部。如下所示（另外，您需要從中刪除標題標籤）。

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

或者，你可以創建一個單獨的CSS文件，並把下列頭標記

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

又一個點鏈接的話，我也將所有的腳本標籤添加到你的文檔底部（在你的頁腳下面）作爲減少加載時間的好幫手。

來源

2017-05-17 15:33:07 MHamer5

在HTML上添加CSS

回答

相關問題