整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手绘地图制作的关键点之“图层覆盖”

手绘地图制作的关键点之“图层覆盖”


面介绍了《景区手绘地图(电子地图、智慧导览系统)如何制作》以及《景区手绘地图的绘制流程》,接下来介绍一些手绘地图制作的关键点。


手绘地图最关键的一点,就是把手绘地图准确的覆盖到地图平台。


手绘地图体验

?

TML中常用的布局元素:<table>、<div>+CSS

<table>标签:

<table>指的是表格,用表格来搭建界面布局,即用表格的嵌套,来搭建界面布局。

<table>布局优势:

table优势:开发时间短(使用DW开发速度快);纯table各浏览器不会有兼容问题;内容可自适应;在搜索引擎排名能靠前;

但是 table如果布局变更,需要重新开发;如果table里有div ul 等,可能会出现浏览器兼容问题;加载速度慢;table嵌套的太多,运维是非常困难的。

<div>块级(block-level)标签:

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。

<div>布局优势:

一.精简代码,减少重构难度。

网站使用DIV+CSS布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。


HTML中常用的3种布局方式:

1.流动式布局:是HTML网页默认的布局方式

特点:

1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布,且默认状态下,块级元素占整个文档流,默认宽度为100%。

2.内联元素都会在所处的包含元素内从左到右水平分布显示,不占整个文档流。

常见的块级(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

常见的内内联(行内)元素有:<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮动布局(float)

特点:

浮动布局依靠【 浮动属性 float:left/right/... 】来使标签脱离文档流,达到两个块级元素并排显示的效果。

float:left ; 浮动脱离当前文档流浮动。

同时可以依靠【展示属性display:inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。

3.层模型布局又叫定位布局

特点:

当我们应拥div布局是,在第一层块界面上来做第二层块界面的开发时,就要用到我们所说的定位布局。

通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。

网页是静态的,网页上的定位

position:absolute ;绝对定位脱离文档流,不受浮动影响,就是相对于窗体(body)边界的margin定位。

position:relative; 相对定位不脱离文档流,相对于父级标签元素的位置定位。

position:fixed;固定位置,不会受任何因素影响。

滚动条移动前

滚动条移动后

优先层显示方法:【属性:z-index:0/1/2...】

特点: 数值越大,越优先显示。

注意:只有元素使用了position属性的,才具有z-index属性。


本文部分内容来自网络,如有侵权,请联系修改。

文转自测试人社区,原文链接:Python 测开28期 - WL - 学习笔记 - Vue - 学习笔记 - 测试人社区

Vue 基本介绍

Vue 背景介绍

  • 前段框架,Vue 是之一
    • Angular:google
    • React:facebook
    • Vue:尤雨溪

定义

  • 是一套用于构建用户界面的渐进式框架
  • 被设计为可以自底向上逐层应用
  • 轻量级框架
  • 便于与第三方库或既有项目整合
  • vue 的核心库只关注图层

Vue 项目示例 与 基本结构

<!-- 文档声明 -->
<!DOCTYPE html>
<!-- 文档主体 -->
<html lang="en">
    <!-- 文档配置 -->
    <head>
        <!-- 设置网页编码格式 -->
        <meta charset="UTF-8" />
        <!-- 设置网页兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- 设置网页显示区域 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 设置网页标题 -->
        <title>测试集合</title>
        <!-- 1. vue 引入 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <!-- 正文内容 -->
    <body>
        <!-- 2. 定义一个容器,给容器标注 id,方便后边操作 -->
        <div id="app">
            {{message}}
        </div>
    </body>
</html>
<!-- js脚本 -->
<script>
    // 实例化 vue
    var vm=new Vue({
        // 需要传入对象
        el: "#app", // 指定挂载元素
        data:{  // 挂载元素的值
            message: "Hello laoda"
        },
        methods:{

        },
    });
</script>
<!-- CSS 样式表 -->
<style></style>

Vue 开发工具

  • VSCode
  • VSCode 推荐插件
    • JavaScript(ES6) code snippets:包含 ES6 语法的 js 代码段
    • Vetur:VSCode 支持 VUE 的工具
    • Auto Close Tag:自动添加 HTML/XML 结束标签
    • Auto Rename Tag:自动重命名对应的 HMTL/XML 标签
    • Higlight Matching Tag:突出显示匹配的开始和结束标签
    • open in browser:预览 html 文件

HTML 基本结构

  • 文档声明:<!DOCTYPE html>
  • 文档主体:<html lang="en">
    • 文档配置:<head></head>
      • 设置网页编码格式:<meta charset="UTF-8" />
      • 设置网页标题:<title>测试</title>
      • 导入 JavaScript 文件:<script src="xxx/xx.js"></script>
    • 正文内容:
      • JavsScript脚本:<script></script>
      • Css 样式表:<style></style>

常用标签

  • 基本格式: <标签名 属性1=“属性值1” 属性2=“属性值2”></标签名>
  • 标签常见形式
    • 双标签:<标签名称></标签名称>
    • 单标签:<标签名 />
  • HTML 标签常用属性
    • 常见全局属性
      • id:规定元素的唯一 id
      • class:规定元素的类名
      • style:规定元素的行内样式
    • 常见其他属性
      • click:全局时间属性,当点击鼠标时运行脚本
      • src:规定图像的 URL
      • href:规定链接的目标 URL
  • 常用标签
    • 注释标签:< !-- 注释内容 -- >
    • 标题标签:<h1></h1><h2></h2>...<h6></h6>,共六级
    • 段落标签:<p></p>
    • 容器标签:<div></div>|<span></span>
    • 图像标签:<img />
    • 超链接标签:<a></a>
    • 表单标签:<input>,type:number只能输入数字,text能输入任何值,radio单选框,submit提交按钮

软件测试开发免费视频教程分享 - 公众号 - 测试人社区