<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%height: 100%overflow: hiddenmargin:0font-family:"微软雅黑"}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>个性化地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map('allmap')
map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12)
var mapStyle ={
features: ["road", "building","water","land"],//隐藏地图上的poi
style : "dark" //设置地图风格为高端黑,目前支持normal(默认样式),dark(深色样式),light(浅色样式)
}
map.setMapStyle(mapStyle)
function checkhHtml5()
{
if (typeof(Worker) === "undefined")
{
if(navigator.userAgent.indexOf("MSIE 9.0")<=0)
{
alert("定制个性地图示例:IE9以下不兼容,推荐使用百度浏览器、chrome、firefox、safari、IE10")
}
}
}
checkhHtml5()
</script>)
首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句。<html><body></body></html>
由于css样式必须在标签<head></head>之间,因此我们点击<html>后面,输入<head></head>标签。
在head标签之间输入样式标签<style></style>,然后定义一些属性,例如
<style type="text/css">
body {background-color: yellow} 定义网页背景色为黄色;
h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00;
h2 {background-color: transparent} 定义h2标签背景色为透明;
p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值;
p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色,并且边距为20px;
</style>
然后点击body标签后面输入正文标签内容,例如
<h1>这是KING</h1>
<h2>这是KING</h2>
<p>这是KING</p>
<p class="no2">这个KING设置20内边距。</p>
点击记事本菜单中的文件,选择另存为,把内容保存为html网页格式。双击打开预览效果。
我们可以发现代码中两个同样的<p>标签显示的css样式却不同,区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在,可以定义个性风格。
还可以选择用html设置,如下:
颜色自己调,可以用取色器查看颜色,例如background-color:#789999如果需要加边框可以用border属性
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)