webgis入门之html与css（2）

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

 WEBGIS开发

目录

 WEBGIS开发

01、选择器权重问题1

02、选择器权重问题2

03、form表单

04、浮动

05、为什么不用内联块标签

06、浮动问题

07、解决浮动问题

08、css引入

09、定位

10、使用z-index决定图层显示顺序

11、固定定位

12、transform

13、shadow阴影

14、flex布局

15、flex练习

01、选择器权重问题1

<!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 !important;/*!import优先级最高*/
        }
        /*类选择器权重大于标签选择器*/
        .box{
            background-color: brown;
        }
        /*id选择器大于类选则器*/
        .app{
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="box" id="app" style="background-color: black;"></div>
</body>
</html>


02、选择器权重问题2

<!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>
        /*选择器嵌套越深优先级越高*/
        .li{
            color: red;
        }
        ul>li{
            color: aqua;
        }
        .parent ul li{
            color: aquamarine;
        }
        html body .parent ul li{
            color: purple;
        }
    </style>
</head>
<body>
    <div class="parent">
        <ul>
            <li>
                hello
            </li>
        </ul>
    </div>
</body>
</html>


03、form表单

<!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>
    <form action="">
        <div>
            用户名：<input type="text" placeholder="请输入用户名">
            用户名：<input type="password" placeholder="请输入密码">
        </div>
        <hr>
        <div>
            <!-- type="radio"就是单选框  但是name要一致 -->
            男<input type="radio" name="sex">
            女<input type="radio" name="sex">
        </div>
        <hr>    
        <div>
            <!-- type="checkbox"为多选框 -->
            爱好：
            <input type="checkbox" name="" id="">吃饭
            <input type="checkbox" name="" id="">睡觉
            <input type="checkbox" name="" id="">打豆豆
        </div>
        <hr>
        <div>
            请选择城市：
            <select name="" id="">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
        </div>
        <hr>
        <div>
            <!-- 长文本 -->
            <textarea name="" id="" cols="50" rows="20"></textarea>
        </div>
        <div>
            <!-- type="submit" input为一个提交按钮 -->
            <input type="submit">
        </div>
    </form>
</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>
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            /* 浮动元素就会脱离文档流 浮动的目的就是并排显示 */
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            /* 浮动元素就会脱离文档流 浮动的目的就是并排显示 */
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></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>
        .box{
            height: 40px;
            background-color: pink;
        }
        .one{
            /* 不用inlineblock 因为元素之间存在空隙 */
            width: 40px;
            height: 40px;
            background-color: red;
            float: left;
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one"></div>
        <div class="one"></div>
        <div class="one"></div>
    </div>
</body>

</html>


06、浮动问题

<!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{
            width: 200px;
            background-color: green;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 1、子元素使用浮动，会导致父元素高度坍塌 -->
    <!-- 2、对后面的元素造成了干扰 -->
    <div class="parent">
        <div class="one"></div>
    </div>
    <div class="two"></div>
</body>
</html>

07、解决浮动问题

<!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{
            width: 200px;
            /* height: 100px;给高度 */
            background-color: green;

            /* 超出部分隐藏：里面元素浮动 */
            overflow: hidden;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 1、给父元素高度 防止坍塌 -->
    <!-- 2、使用overflow：hidden -->
    <div class="parent">
        <div class="one"></div>
    </div>
    <div class="two"></div>
</body>
</html>


08、css引入

.css文件

div{
    color: blue;
}

在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>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="./08、css引入.css">
    <style>
        /* 内部样式表 */
    </style>
</head>
<body>
    <!-- 直接写标签上为内联样式 不推荐 尽量不写 -->
    <div>
        hello
    </div>
</body>
</html>


09、定位

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            background-color: blue;
            /* position: relative; */
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: red;
            position: absolute;
            left: 40px;
            bottom: 10%;
        }
        /* 相对定位 相对于自己原来的正常位置进行一个定位 */
        /* 绝对定位 先找自己的祖先元素 如果祖先有定位 根据祖先元素定位 否则根据body定位 */
    </style>
</head>
<body>
    <div class="box">
        <div class="box2"></div>
    </div>
</body>
</html>


10、使用z-index决定图层显示顺序

<!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: 400px;
            height: 400px;
            background-color: blue;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            z-index: 3;
        }
        .two{
            width: 150px;
            height: 150px;
            background-color: green;
            position: absolute;
            z-index: 2;
            /* 元素重叠时层级用z-index */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</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>
        div{
            height: 2000px;
        }
        button{
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <button>top</button>
</body>
</html>


12、transform

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: black;
            /* 水平 垂直偏移 */

            /* 经典面试题 实现元素在页面的水平垂直居中 */
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>


13、shadow阴影

<!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: 100px;
            height: 100px;
            background-color: red;

            /* 左右偏移 上下偏移 模糊程度 阴影大小 阴影颜色 */
            box-shadow: 5px 5px 5px 5px #333;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>


14、flex布局

<!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>
        /* flex弹性盒子布局 */

        /* 容器 */
        .box{
            width: 460px;
            height: 320px;
            border: 1px solid #000;
            margin:0 auto;
            display: flex;
            
            /* 是否换行 */
            flex-wrap: wrap;
            /* 主轴对齐方式 space-around space-between space-evenly */
            justify-content: space-evenly;
            /* 纵轴对其方式 flex-start center flex-endf*/
            align-items: center;
            /* 设置主轴 row是水平 column是垂直 默认是水平 */
            flex-direction: row;
        }
        /* 项目 */
        .item{
            width: 100px;
            height: 100px;
            border:1px solid #000;
            background-color: red;
            border-radius: 10px 10px 10px 10px;

            /* 设置项目在纵轴上的对其方式 flex-start center flex-end */
            /* align-self: flex-start; */
        }
        .one{
            /* 占主轴宽度比例 */
            flex: 1;
        }
        .two{
            flex: 2;
        }
        .three{
            flex: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <!-- <div class="item one"></div>
        <div class="item two"></div>
        <div class="item three"></div> -->
    </div>
</body>
</html>


15、flex练习

<!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: 400px;
            height: 300px;
            border: 1px solid #333;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .item {
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
        .t{
            width: 100px;
            height: 100px;
            border: 1px solid #333;
            position: relative;
        }
        .q1{
            display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            justify-content: center;
            align-content: center;
        }
        .q2{
            display: flex;
            position: absolute;
            top: 25%;
            left: 75%;
            transform: translate(-50%,-50%);
            justify-content: center;
            align-content: center;
        }
        .q3{
            display: flex;
            position: absolute;
            top: 75%;
            left: 25%;
            transform: translate(-50%,-50%);
            justify-content: center;
            align-content: center;
        }
        .q4{
            display: flex;
            position: absolute;
            top: 25%;
            left: 25%;
            transform: translate(-50%,-50%);
            justify-content: center;
            align-content: center;
        }
        .q5{
            display: flex;
            position: absolute;
            top: 75%;
            left: 75%;
            transform: translate(-50%,-50%);
            justify-content: center;
            align-content: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="t">
            <div class="item q1"></div>
        </div>

        <div class="t">
            <div class="item q2"></div>
            <div class="item q3"></div>
        </div>
        <div class="t">
            <div class="item q2"></div>
            <div class="item q1"></div>
            <div class="item q3"></div>
        </div>
        <div class="t">
            <div class="item q4"></div>
            <div class="item q2"></div>
            <div class="item q3"></div>
            <div class="item q5"></div>
        </div>
        <div class="t">
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
        </div>
        <div class="t">
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
            <div class="item q1"></div>
        </div>
    </div>
</body>

</html>

Coding小亿~
关注
专栏目录
怎样在html中在线部署GIS地图,在线发布GIS服务并使用
weixin_39683598的博客
05-30 1094
在线发布GIS服务并使用SuperMap Online提供了云端数据服务，提供了500MB的免费数据存储空间，并支持将上传的GIS数据在线发布成地图、数据服务。如果您需要开发一个基于GIS服务(地图、空间数据等)的小型GIS应用，就可以很方便地直接在线发布GIS服务。您不再需要自行购买、安装、维护一台GIS服务器，可以有效节约开发成本、缩短开发周期。本例将带领您：基于SuperMap Online...
WebGIS入门
警警的博客
01-02 1万+
1.关于WebGIS WebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。 互联网深刻地改变了我们的工作和生活,也改变了地理信息系统,两者的融合产生了WebGIS。随着互联网和移动互联网的迅速普及,WebGIS也迅速发展,以其广泛的应用价值和独特的魅力,成为现代生活的日常工具和现代社会的技术支柱。近些年来, We
webgis入门之html与css（练习）
weixin_67679364的博客
02-25 368
展示了两个不同风格的网页布局。布局一是关于生活的内容，页面上方为标题和一条装饰线，中间是一张图片和相关文字内容。布局二是个人网站风格，包含了一个搜索框和按钮，下方是关于网站的介绍文字和图片，以及一些链接到外部网站的按钮。每个布局都有其特定的样式和排版方式，展示了不同主题和目的的网页设计风格。
webgis入门之html与css（1）
weixin_67679364的博客
02-25 433
从HTML的结构开始介绍，包括常见的HTML标签、CSS样式的应用，以及CSS中的选择器、盒子模型、样式重置等内容。其中还包括一些CSS技巧，如文字居中、hover效果、水平居中、以及标签的分类和互相转换等。通过这些内容，可以初步了解如何创建简单的网页，并为进一步学习和掌握网页开发打下基础。
webgis入门之html与css (练习2)
weixin_67679364的博客
02-26 386
所需图片资源已经绑定在文章中。
WebGIS开发入门
popstarqq的博客
10-22 2万+
一 WebGIS： Web就是网页端，GIS全称是地理信息系统;所以webgis系统就是网页端的地理信息系统，简单点说将地理空间信息以地图的方式在网页端展现出来，进行可视化或者是分析； 二 GIS背景 gis是一门专业课程，本科阶段叫地理信息系统(科学)，硕士阶段是地图学与地理信息系统；该专业毫无疑问就是webgis开发最专业的专业了； 大部分gis专业学生，本科先接触arcgis 二次开发；然后是arcgis for js的网页gis二次开发；接触开源gis比较少； 目前只要设计地图开发的都可以
WebGIS开发快速入门
weixin_45874657的博客
12-07 3846
MapGIS WebGIS开发快速入门
WebGIS入门—进阶
警警的博客
11-05 976
在WebGIS入门篇，前端使用了纯HTML、CSS、Javascript、Jquery较为传统方式构建，服务器借助ArcGIS Srver发布相关地理服务且涉及到GIS，自行构建后端且涉及到数据库。So,WebGIS进阶来了！！！！ 本文大概是关于Vue2+Cesium+Openlayers+Java+MySQL+Tomcat。
WebGIS开发者入门
热门推荐
做GIS梦的人
08-22 5万+
开发方向 最近，地理信息系统(GIS)的开发与应用越来越多的倾向于Web端，Web端开发确实比以C# ArcGIS Engine为代表的C/S开发更具优势，而且可以通过H5轻松实现跨平台。做过进入这个行业有一段时间的人，想起自己在学校时，没有人指导开发，自己苦苦摸索，却事倍功半。写下这篇博文给那些在校的GIS学生介绍一下WebGIS开发的大致路线和入门知识吧。 首先，WebGIS的开发平台主要...
【WebGIS系统古村古镇数字化平台源码】古村古镇数字化平台，作者热门文章[WebGIS入门、WebGIS期末作业等]的源码
07-17
“古村古镇数字化系统”旨在通过数字化手段，对古村...Web部分常用HTML、CSS、JavaScript、Jquery和BootStrap等技术进行设计，GIS部分通常是调用各类API进行设计，常见的有ArcGIS API for JavaScript、Baidu API等等。
WEBGIS编程入门.ppt
09-28
在WEBGIS编程入门中，首先要掌握HTML、CSS和JavaScript的基础知识。HTML负责构建网页结构，CSS用于美化和布局，JavaScript实现交互效果。了解并熟练运用这些技术，是进入WEBGIS世界的第一步。通过不断实践和学习，你...
WebGIS入门级教程，适合零基础，智慧校园案例代码，初学者适合。
05-01
采用html+css+javascript实现一个简单的校园热门地点，打卡，路径规划和动画演示的前端示例，资源为完成的测试通过的代码，可以用chrome打开，编辑可以用vscode或者Notepad++ Hbuilder等。适合初学者，有问题随时...
webGIS从基础到开发
04-19
介绍ArGIS Sever JvaScipLAPI的构成，Dojo 的基础知识；后将介绍ArcGIS Server JaSripAPI的基础第3章首先介绍通过Dojo布局小部件件设计几种不同类型的页面总体框架，然后介绍通扩展小部件类来管理页面中元素的两种...
前端用html写excel文件直接打开
全易
09-10 626
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 374
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
最新发布
Liszter
09-12 374
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 1534
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
WebGIS入门：FTP与基础架构探讨
本资源主要介绍了文件传输协议FTP与WebGIS的基础知识，以及它们在信息技术领域的应用。FTP (File Transfer Protocol) 是一种标准的在网络上进行文件传输的协议，它允许用户在本地计算机与远程主机之间上传或下载文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值