webgis入门之html与css（1）

已于 2024-02-25 16:41:21 修改
阅读量411 收藏 8
点赞数 15
分类专栏： webgis开发 文章标签： html css 前端 npm
于 2024-02-25 16:15:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136283357
版权

WEBGIS开发

目录

WEBGIS开发

01、index

02、常见的html标签

03、css

04、文字居中

05、选择器

06、class选择器

07、id选择器

08、盒子模型

09、hover

10、样式重置

11、盒了的水平居中

12、盒了模型传参

13、标签的分类

14、标签分类的原因

15、标签之间互相转换

16、元素的水平居中

17、分组选择器

18、后代选择器

19、盒子背景

01、index

index通常作为一个网页的入口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello web</title>
    <!-- ctrl+s 保存代码 -->
    <!-- ctrl+/ 注释 -->
</head>
<body>
    <!--  -->
</body>
</html>


02、常见的html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- tab 自动补全 -->
    <!-- h系列标签都是标题标签 h1-h6 -->
    <h1>今年首次大范围雨雪过程开启 江南东北等地气温波动频繁</h1>

    <!-- p 文字的段落标签 -->
    <p>中国天气网讯 今天(1月15日)至19日，我国今年来首次大范围雨雪天气过程来袭，陕西、山西、河南等地局部有大雪或暴雪，江淮、江南等地部分地区有大雨。本次雨雪天气过程影响范围广、持续时间长，部分地区雨雪相态复杂，需注意防范。气温方面，未来几天，江南、东北等地气温波动频繁，公众请根据天气变化及时增减衣物，谨防感冒。</p>

    <!-- 如果你在页面上想要获取一块区域的时候 -->
    <div>
        hello html
    </div>

    <!-- a标签是超链接标签 href是网页的跳转地址 -->
    <a href="https://www.baidu.com">百度一下</a>

    <!-- 输入框 -->
    <input type="text">

    <!-- 按钮 -->
    <button>百度一下</button>

    <!-- 无序列表 -->
    <ul>
        <!-- li*3 = 三个li标签 -->
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>

    <!-- ./是当前目录  ../是上一层目录 -->
    <img src="../img/1.jpg" alt="">

    <!-- 视频标签 -->
    <video src=""></video>
</body>
</html>


03、css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 编写页面的css -->
    <style>
        /* tips 想要修饰谁 必须要选中谁 */
        div{
            /* 设置文字颜色 */
            color: rgb(0, 0, 255);
            /* 文字大小 单位为像素 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
    </div>
</body>
</html>


04、文字居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 文字居中 */
            text-align: center;
            /* 背景颜色 */
            background: pink;
            /* 行高 将一段文本撑开 且让文字在行高中实现垂直居中 */
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>

    </div>
</body>
</html>


05、选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 缺点: 容易造成全局污染 */
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div >我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
</body>
</html>


06、class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 . 前面加一个点 */
        .one{
            color: blue;
        }

        /* 1、可以给一个元素不同的类名 */
        /* 2、可以给不同的元素相同的类名 */
        .bg{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <!-- 不同的类名用空格分开 -->
    <div class="one bg">div1</div>
    <div>div2</div>
    <h1 class="one">我是标题</h1>
</body>
</html>


07、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器 id名前面加一个# */
        #app{
            color: bisque;
        }
    </style>
</head>
<body>
    <!-- 尽量让id唯一 -->
    <div id="app">123</div>
</body>
</html>


08、盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* 盒子模型 = margin(盒子的外边距) + border(边框) + padding(内填充) + content(自身内容) */
            /* vw,  vh占页面百分比宽高 */
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin-top: 70px;
            margin-left: 100px; */

            /* 三个参数: 边框 : 线宽 线的样式 线的颜色
            border: 4px solid #000 */

            padding-left: 30px;
            padding-top: 50px;

            /* border 以及padding能改变元素的宽高 */
        }
    </style>
</head>
<body>
    <div class="box">
        我是一个盒子
    </div>
</body>
</html>


09、hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            color: white;
            background-color: blue;
            /* 边框角度 左上 右上 右下 左下 */
            border-radius: 0 10px 10px 0;
        }

        /* 鼠标悬浮 */
        button:hover{
            /* 鼠标小手 */
            cursor:pointer;
            background-color: #4662d9;
        }
    </style>
</head>
<body>
    <button>百度一下</button>
</body>
</html>


10、样式重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* *代表所有元素 */
        /* 页面自带的css影响了布局 需要样式重置 */
        *{
            margin:0;
            padding:0
        }

        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
</body>
</html>


11、盒了的水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 80vw;
            height: 200px;
            background-color: blue;
            color: white;

            /* 盒子水平居中 */
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>


12、盒了模型传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: black;

            /* 一个参数 上右下左都是50px */
            /* margin: 50px; */
            /* 两个参数 上下 左右 */
            /* margin: 30px 50px; */
            /* margin:0 auto; 居中*/
            /* 三个参数 上 左右 下 */
            /* margin:20px 30px 50px; */
            /* 四个参数 上 右 下 左 */
            margin:10px 20px 30px 40px;

        }
    </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>


13、标签的分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            /* 内联标签，不能设置宽高 */
            width: 200px;
            height: 200px;
        }
        button{
            width: 30px;
            height: 40px;
        }
    </style>
</head>
<body>
    <!-- 块标签 1、能够独占一行 2、能够设置宽高 div为代表 -->
    <div>div</div>
    <p>p</p>
    <h1>标题</h1>
    <ul>
        <li>css</li>
        <li>js</li>
        <li>html</li>
    </ul>

    <!-- 内联标签 1、能够并排显示 2、不能设置宽高 span为代表-->
    <span>111</span>
    <span>222</span>
    <a href="https://www.baidu.com">跳转</a>
    <i>我是i标签斜体</i>
    <strong>加粗</strong>

    <!-- 内联块标签 1、能并排显示 2、能设置宽高 -->
    <div>
        <input type="text">
        <button>按钮</button>
        <img src="../img/1.jpg" alt="">
    </div>

</body>
</html>


14、标签分类的原因

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- 标签类型由display决定 -->

    <!-- display: block; 块级标签 -->
    <div>div</div>

    <!-- diplay: inline 内联标签 -->
    <span>span</span>

    <!-- display：inline-block 内联块标签 -->
    <button>按钮</button>
</body>
</html>


15、标签之间互相转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline;
        }
        span{
            display: block;
            width: 200px;
            height: 200px;
        }
        a{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #c41111;
        }
    </style>
</head>
<body>
    <div>
        div
    </div>
    <span>span</span>111
    <a href="https://www.baidu.com">a标签</a>111
</body>
</html>


16、元素的水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #fff;
            margin: 0 auto;
        }
        span{
            text-align: center;
            width: 120px;
            display: block;
            margin: 0 auto;
        }
        img{
            width: 300px;
            display: block;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box">
        box
    </div>
    <span>span</span>
    <img src="../img/1.jpg" alt="">
</body>
</html>


17、分组选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div,
        p,
        h1 {
            color: blue;
        } */

        /* 分组选择器 用,隔开 */
        .one,
        .two,
        .three{
            color: blue;
        }
    </style>
</head>

<body>
    <div class="one">div</div>
    <p class="two">p</p>
    <h1 class="three">h1</h1>
</body>

</html>


18、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        .parent p{
            color: red;
        }
        
        /* 子代选择器 */
        .parent>p{
            color: rgb(3, 22, 113);
        }
    </style>
</head>
<body>
    <div class="parent">
        <p>hello</p>
        <ul>
            <li>
                <p>hello</p>
            </li>
        </ul>
    </div>
</body>
</html>


19、盒子背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 400px;
            background-image: url(../img/1.jpg);
        }
    </style>
</head>
<body>
    <div>
        <!-- 换行符 -->
        <hr>
    </div>
</body>
</html>

李佩锦peijin
关注
  • 15
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎样在html中在线部署GIS地图,在线发布GIS服务并使用
weixin_39683598的博客
05-30 1066
在线发布GIS服务并使用SuperMap Online提供了云端数据服务，提供了500MB的免费数据存储空间，并支持将上传的GIS数据在线发布成地图、数据服务。如果您需要开发一个基于GIS服务(地图、空间数据等)的小型GIS应用，就可以很方便地直接在线发布GIS服务。您不再需要自行购买、安装、维护一台GIS服务器，可以有效节约开发成本、缩短开发周期。本例将带领您：基于SuperMap Online...
[目录]搭建一个简单的WebGIS应用程序
weixin_30522095的博客
09-29 205
　　“如果一件事情超过自己的能力，自己很难达到，那就像是婴儿跳高，不但没有好处，反而拔苗助长”。 　　4月份时报名参加了2018年ESRI杯GIS应用开发比赛，到前几天提交了作品。作品很简单，没有那么多复杂深刻的功能，但至少完整，涉及到各方面的基本知识。学到了很多，前端HTML\CSS\JavaScript的基本用法和Bootstrap\jQuery等框架的使用，后端asp.net中ashx文件...
WebGIS学习（html、css、javascript）
xdkSilence的博客
01-15 1218
超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。层叠样式表（Cascading Style Sheets）
WebGIS 在html页面上拼接瓦片地图
weixin_46441425的博客
03-13 776
gis地图HTML界面
02-05
html页面设计+gis链接代码，其中文件应用需自己下载Dojo。
ArcGIS属性表挂接图片并显示（GIS思维）
热门推荐
GIS思维的博客
10-10 2万+
ArcGIS属性表挂接图片并显示 （GIS思维） 今天我们要来介绍一下ArcGIS中的属性表图片挂接——一个简单但是实用的案例。 我们来看一...
webgis入门之html与css (练习2)
最新发布
02-26
本文将深入探讨这两个关键技术，并结合"webgis入门之html与css (练习2)"这一主题，来理解它们在WebGIS中的应用。 HTML是用于创建网页结构的语言，它定义了网页的基本元素，如标题、段落、图像、链接等。在WebGIS中...
webGIS从基础到开发
04-19
介绍ArGIS Sever JvaScipLAPI的构成，Dojo 的基础知识；后将介绍ArcGIS Server JaSripAPI的基础第3章首先介绍通过Dojo布局小部件件设计几种不同类型的页面总体框架，然后介绍通扩展小部件类来管理页面中元素的两种...
WEBGIS编程入门.ppt
09-28
在WEBGIS编程入门中，首先要掌握HTML、CSS和JavaScript的基础知识。HTML负责构建网页结构，CSS用于美化和布局，JavaScript实现交互效果。了解并熟练运用这些技术，是进入WEBGIS世界的第一步。通过不断实践和学习，你...
WebGIS从基础到开发实践（基于ArcGIS API For JavaScript）
12-28
WebGIS，全称为Web地理信息系统，是将地理信息与Web技术结合的一种应用方式，使得用户可以通过浏览器或者其他Web客户端访问和操作地理数据。本教程“WebGIS从基础到开发实践（基于ArcGIS API For JavaScript）”深入...
WebGIS入门级教程，适合零基础，智慧校园案例代码，初学者适合。
05-01
采用html+css+javascript实现一个简单的校园热门地点，打卡，路径规划和动画演示的前端示例，资源为完成的测试通过的代码，可以用chrome打开，编辑可以用vscode或者Notepad++ Hbuilder等。适合初学者，有问题随时...
【ArcGIS教程02】HTML弹窗挂接显示调研照片
m0_67324707的博客
03-16 2221
本方法可对外业现场采集的照片进行整理，通过ArcGIS辅助分析，可应用于外业调研、采集、巡检、执法等工作领域。
GIS软件开发学习教程之——HTML、CSS和JavaScript简介
Femilia的博客
11-18 242
学习GIS软件开发必须要掌握这三种工具，本文将介绍HTML、CSS和JavaScript的基础知识
C# 通过 HtmlDocument 操作HTML节点
GIS工具箱
03-26 1万+
C# 通过 HtmlDocument 操作HTML节点时，会发生不停地刷新的情况，在对html文档操作后加以判断即可解决这种问题。    Public Sub setMainUlr(ByVal WebBrowser1 As WebBrowser)            Dim pElem As HtmlElement = Nothing            即时信息页面          
基于HTML5的高性能GIS平台源码
shawy的专栏
11-29 4217
远景地理信息系统平台软件     远景地理信息系统平台软件,简称"RemoteGIS"，版本V1.0，它是基于HTML5自主研发的新一代WEBGIS平台，它使用Javascript开发，具有良好的系统架构和高可扩展性，功能强大性能超卓。     如果您有意向，请将您的需求通过QQ、邮箱发送给我，我将第一时间联系您。     邮箱:business@remotegis.net   QQ: 49
WebGIS实现——html5中绘制地图(草稿)
giantchen
10-13 1万+
我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举： 1：绘制渲染对象，c.getContext("2d"),获取2d绘图对象，无论我们调用多少次获取的对象都将是相同的对象。 2：绘制方法： clecrRect(left,top,width,height)清除制定矩形区域， fillRec
arcgis添加HTML语法,使用ArcGIS API对HTML元素的多个属性
weixin_42507297的博客
07-04 449
我使用ArcGIS API JavaScript将REST服务中的值转换为表格。主要ID必须位于第一个字段中，但值名称有时会有所不同。我有这个：Nummer但NR属性值也可以是NUMMER，如果我改用：NummerNummer我总是得到一个NULL字段，我不希望这样......有没有办法将多个属性值分配给元素。喜欢这个？if (strUser==="Sporen"){findTask = new ...
arcgis添加HTML语法,arcgis-api-for-js-之创建图层和添加图层（1）
weixin_28858247的博客
07-04 861
1.引用资源1.1引用ArcGIS API for JavaScript首先引用ArcGIS API for JavaScript，采用script标签，注：里面的数字为版本号，可以等到版本更新时，更换对应的版本号即可。代码如下：1.2引用样式标签引用main.css样式表，其中包含特定于Esri窗口小部件和组件的样式。代码如下：2.加载模块2.1require()函数在创建地图对象之前，必须首先...
HTML5与ArcGIS（一）——属于HTML5的Web时代
刘跃飞的专栏
07-06 4429
<br />    自从HTML5问世以来，一直受到各界人士的追捧，大家都对它的未来十分憧憬，分析其原因有二，首先是它给我们带来了很多以往需要借助第三方插件的帮助才能获得的新特性，例如媒体流、画布、离线操作等等。其次也是最重要的一点，它是完全开源的。在所有的追捧者中，追的最卖力、吆喝声最大的当属Google了，自从去年的Google IO大会开始，它就开始了对HTML5进行全线的支持行动，大致可以分为三个方面：一是拉拢浏览器厂商，如FireFox、Opera；二是与出版商合作，如杂志报纸等；第三就是在自己的

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值