在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

回答

相关问题