精华内容
下载资源
问答
  • hbuilder下载
    2022-05-23 09:52:10

    CSDN记录美好生活
    网址:

    DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

    再也不担心找不到了

    一、找到需要下载的类型

    二、找到自己需要的版本

     

    更多相关内容
  • Hbuilder下载

    2020-10-29 09:30:44
    HBuilder 是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。
  • builder x/hbuilder下载和安装mac版本

    1⃣️hbuilder 黄色标

    下载的是:hbuilder9119.dmg

    打开后出现几秒钟闪退,打开错误:A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run h HBuilder.

    暂时还没有解决,晚上再看看

    2⃣️hbuilder x 绿色标

    从官网https://www.dcloud.io 下载 

    选择对应电脑版本下载即可正常使用。

     

    展开全文
  • HBuilder工具下载下载

    2020-06-24 17:02:38
    HBuilder工具下载下载
  • 前端开发工具HBuilder下载
  • HBuilder.zip

    2021-03-27 21:04:44
    HBuilder window & mac
  • HBuilder下载与使用(详细步骤)

    万次阅读 多人点赞 2022-02-04 09:23:31
    HBuilder下载官网地址: 在地址栏中直接输入https://www.dcloud.io 或者直接点击下面的链接 DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、...

    一、HBuilder IDE的下载

    HBuilder下载官网地址:

    在地址栏中直接输入https://www.dcloud.io

    或者直接点击下面的链接

    DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

    进入官网,免费下载最新版的HBuilder。

    HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

    1. 点击链接进入网站

    如下界面:

    2. 进入Hbuilder官方网站

    如下界面:

    3. 下载HBuilder

            找到下载按钮【DOWNLOAD】,点击后会出现一个弹窗,根据电脑版本进行选择,点击完成之后便开始进行下载然后进入等待即可。新一代的版本为HBuilder X,上一代的版本为HBuilder。

            我这里下载的是上一代HBuilder win(258.6M),点击后跳转至如下界面,点击【普通下载】,即可开始免费下载

    4. 解压安装包

    下载完成后,可以将压缩包放在合适的位置再进行解压,便于今后查找、管理

    5. 找到执行文件

            打开解压后的文件夹,找到一个叫做“HBuilder.exe”的可执行文件,这个可执行文件就是HBuilder的启动文件。即下图选中的文件:

     HBuilder不用安装解压完成即可使用。

    6. 打开HBuilder

            双击这个文件就可以打开HBuilder这个开发编辑器了,因为我们是直接解压使用的。所以找起来会很麻烦,你可以将【HBuilder.exe】这个执行文件发送到桌面快捷方式,这样每次使用的时候直接在桌面就可以打开。如下图所示:

    不会创建桌面快捷方式的宝宝看过来:

    右击【HBuilder.exe】这个执行文件,选择【创建快捷方式】,就会在刚刚的文件下出现一个快捷方式,选中后拖到桌面上就行啦!如下图:

    二、HBuilder IDE的使用

    1. 打开HBuilder

    双击快捷方式或【HBuilder.exe】这个执行文件,会出现如下界面:

    2. 登录HBuilder

    有账号的直接输入用户名和密码进行登录,没有账号的点击注册用户

            输入用户名和密码后登录即可 

    3. 详细了解HBuilder编辑器

            打开之后,你会发现HBuilder的编辑器风格是黄色系,对眼睛比较好,不同于其他编辑器以黑白为主。而且它非常人性化,给你很多的新手入门提示,大家可以详细看看,对这个软件也会有一个全面系统的认识。

    · 准备工作

    (1)新建项目

            新建一个Web项目,依次点击【文件】【新建】选择【Web项目】

            或者按下Ctrl+N,选择【Web项目】快速新建

            如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)  

    (2)新建HTML文件

            在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图:

            好啦,关于HBuilder IDE的下载与使用就简单的写这么多,想继续了解的可以在底下评论,我再更新博客!如果对你有帮助,可以点赞收藏哦!

    展开全文
  • 移动web开发 rem适配布局 +苏宁首页案例+HBuilder下载less插件

    rem基础

    文字大小随着页面自适应
    页面元素宽高等比例随着页面自适应

    rem单位
    rem(root em )是一个相对单位,rem的基准是html元素的字体大小。
    em是父元素字体大小。
    rem的优点:可以通过修改html里面的文字大小来改变页面元素的大小,可以整体控制。

    媒体查询

    媒体查询(Media Query)是css3新语法。

    • @media 可以针对不同的屏幕尺寸设置不同的样式。

    语法规范:
    @media mediatype and|not|only (media feature){
    css-code;
    }

    • 用@media开头 一定要有@符号
    • mediatype 媒体类型
    • 关键字 and not only
    • media feature 媒体特性,必须由小括号包含。

    mediatype 媒体类型
    将不同的终端设备划分为不同的类型,称为媒体类型。

    说明
    all用于所有设备
    print用于打印机或打印预览
    scree用于电脑屏幕,平板电脑,智能手机等。

    关键字 and not only

    • and :将多个媒体特性连接在一起。
    • not : 排除某个媒体类型。
    • only : 指定某个特定的媒体类型。

    media feature 媒体特性

    说明
    width定义输出设备中页面可见区域的宽度
    max-width定义输出设备中页面可见最大区域宽度
    min-width定义输出设备中页面可见最小区域宽度

    媒体查询案例–背景变色

    <style>
    			/* 设置宽度是要用: 不要使用= */
    			@media screen and (max-width:539px){
    				body{
    					background-color: blue;
    				}
    			}
    			@media screen and (min-width:540px) and (max-width:969px){
    				body{
    					background-color: green;
    				}
    			}
    			@media screen  and (min-width:970px){
    				body{
    					background-color: red;
    				}
    			}
    		</style>
    

    screen,and不能省略;
    利用层叠性第二步的(max-width:969px)可以省略,简化代码,一样能达到效果。

    引入资源
    引入不同的css文件
    在link中添加下面代码。

     <link  media="screen  and (min-width:320px)">
    

    Less基础

    css弊端:
    css代码没有逻辑,冗余度高;不方便维护和扩展,不利于复用;css没有计算能力。
    less可以很好解决css的弊端。
    less是css的扩展语言,在css的基础上,加入了程序式语言的特性。

    less是一门css预处理语言,它扩展了css的动态特性。是一门新的语言。

    less的使用
    新建.less的文件 ,在这个文件里书写less语句。
    less变量
    @变量名:值;
    (变量名命令规范:以@为前缀;不能包含特殊字符;不能以数字开头;严格区分大小写)

    less编译

    将less文件编译成css文件html才能使用,
    下载less插件(hbuilder 打开上方的工具–>插件安装–>安装新插件–>前往安装市场安装–>搜索"less" ,找到less下载–>使用HBuilder导入插件–>在hbuilder 上方的工具中点击"外部命令插件配置"–>点击"package.json"–>在里面找到代码改为true),最后重启软件.
    在这里插入图片描述
    在这里插入图片描述

    重启软件,保存.less文件后会自动生成.css同名的文件,把这个css文件引入到html页面中即可.

    less嵌套
    1、less嵌套子元素的样式直接写在父元素里面。
    2、如果有伪类选择器、伪元素选择器、交集选择器需要在内层前添加&符号。

    less运算
    在less中数字、颜色、变量都是可以参与运算的。

    • 运算符的左右两侧必须敲空格隔开;
    • 两个数参与运算,如果只有一个数有单位,则最后结果以这个单位为准;
    • 如果两个数参与运算,两个数都有单位,且单位不同,以第一个数的单位为准。

    **rem适配方案

    适配方案一:

    • less
    • 媒体查询
    • rem

    1、首先选一套标准尺寸,一般以750为准
    2、我们用屏幕尺寸处以划分的份数,得到了html里面的文字大小,但是不同屏幕下得到的文字大小是不一样的。
    3、页面元素的rem值=页面元素在750像素下的px值/html里面的文字大小。

    适配方案二:

    • flexible.js (淘宝)
    • rem
    • flexible.js可以到github上下载
      1、视口标签,初始化样式;引入flexible.js和css文件。
      2、px转换成rem 插件cssrem
      3、hbuilder直接在工具–>设置–>编辑器配置–>里修改 px转rem比值。

    苏宁首页案例制作

    设计图采取750像素。

    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport"
    			content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" />
    		<title></title>
    		<link rel="stylesheet" href="css/normalize.css">
    		<link rel="stylesheet" href="css/index.css">
    	</head>
    	<body>
    		<!-- 顶部搜索框 -->
    		<div class="header-nav">
    			<div class="search-content">
    				<a href="#" class="classify"></a>
    				<div class="search"><input type="text" value="厨卫保暖季..."></div>
    				<a href="#" class="login"></a>
    			</div>
    		</div>
    		<!-- banner部分 -->
    		<div class="banner">
    			<img src="upload/banner.jpg" alt="">
    		</div>
    		<!-- 广告部分  缺少图片-->
    		<div class="ad">
    			<a href="#"><img src="" alt=""></a>
    			<a href="#"><img src="" alt=""></a>
    			<a href="#"><img src="" alt=""></a>
    		</div>
    		<!-- 导航部分 nav -->
    		<nav>
    			<a href="#">
    				<img src="images/nav1.png" alt="">
    				<div class="title">苏宁家电</div>
    			</a>
    			<a href="#">
    				<img src="images/nav2.png" alt="">
    				<div class="title">苏宁超市</div>
    			</a>
    			<a href="#">
    				<img src="images/nav3.png" alt="">
    				<div class="title">苏宁宜品</div>
    			</a>
    			<a href="#">
    				<img src="images/nav4.png" alt="">
    				<div class="title">手机数码</div>
    			</a>
    			<a href="#">
    				<img src="images/nav5.png" alt="">
    				<div class="title">家居家装</div>
    			</a>
    			<a href="#">
    				<img src="images/nav6.png" alt="">
    			<div class="title">服饰百货</div>
    			</a>
    			<a href="#">
    				<img src="images/nav7.png" alt="">
    				<div class="title">生活家电</div>
    			</a>
    			<a href="#">
    				<img src="images/nav8.png" alt="">
    				<div class="title">签到有礼</div>
    			</a>
    			<a href="#">
    				<img src="images/nav9.png" alt="">
    				<div class="title">领券中心</div>
    			</a>
    			<a href="#">
    				<img src="images/nav10.png" alt="">
    				<div class="title">更多频道</div>
    			</a>
    		</nav>
    	</body>
    </html>
    
    html {
      font-size: 50px;
    }
    a {
      text-decoration: none;
    }
    @media screen and (min-width: 320px) {
      html {
        font-size: 21.33333333px;
      }
    }
    @media screen and (min-width: 360px) {
      html {
        font-size: 24px;
      }
    }
    @media screen and (min-width: 375px) {
      html {
        font-size: 25px;
      }
    }
    @media screen and (min-width: 384px) {
      html {
        font-size: 25.6px;
      }
    }
    @media screen and (min-width: 400px) {
      html {
        font-size: 26.66666667px;
      }
    }
    @media screen and (min-width: 414px) {
      html {
        font-size: 27.6px;
      }
    }
    @media screen and (min-width: 424px) {
      html {
        font-size: 28.26666667px;
      }
    }
    @media screen and (min-width: 480px) {
      html {
        font-size: 32px;
      }
    }
    @media screen and (min-width: 540px) {
      html {
        font-size: 36px;
      }
    }
    @media screen and (min-width: 720px) {
      html {
        font-size: 48px;
      }
    }
    @media screen and (min-width: 750px) {
      html {
        font-size: 50px;
      }
    }
    body {
      min-width: 320px;
      width: 15rem;
      margin: 0 auto;
      line-height: 1.5;
      font-family: Arial, Helvetica, STHeiTi, sans-serif;
      background: #f2f2f2;
      height: 2000px;
    }
    .header-nav {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translate(-50%);
      width: 15rem;
      height: 1.76rem;
      background-color: #FFDB47;
    }
    .search-content {
      display: flex;
      width: 13.64rem;
      height: 1.76rem;
      margin: 0 0.68rem;
      z-index: 999;
    }
    .classify {
      flex-shrink: 0;
      width: 1.2rem;
      height: 1.5rem;
      margin: 0.15rem;
      background: url(../images/classify.png) no-repeat;
      background-size: 1.16rem 1.4rem;
    }
    .search {
      flex: 1;
      display: flex;
    }
    .search input {
      outline: none;
      flex: 1;
      width: 100%;
      border: 0;
      height: 1.32rem;
      border-radius: 0.66rem;
      background-color: #fff2cc;
      margin-top: 0.24rem;
      font-size: 0.5rem;
      padding-left: 1.1rem;
      color: #757575;
    }
    .login {
      flex-shrink: 0;
      width: 1rem;
      height: 1.5rem;
      margin: 0.16rem;
      background: url(../images/login.png) no-repeat;
      background-size: 1rem 1.5rem;
    }
    .banner {
      width: 15rem;
      height: 7rem;
    }
    .banner img {
      width: 100%;
      height: 100%;
    }
    .ad {
      display: flex;
    }
    .ad a {
      flex: 1;
      background-color: pink;
    }
    .ad a img {
      width: 100%;
    }
    nav {
      background-color: #eee;
      width: 15rem;
    }
    nav a {
      float: left;
      width: 3rem;
      height: 2.8rem;
      text-align: center;
      font-size: 0;
    }
    nav a img {
      width: 1.64rem;
      height: 1.64rem;
      margin: 0.2rem auto 0;
    }
    nav a .title {
      font-size: 0.5rem;
      color: #333;
    }
    
    展开全文
  • HBuilderX 下载安装教程

    千次阅读 2021-12-08 13:15:40
    HBuilderX-下载地址 2. 下载后,将压缩包复制到适当位置,解压压缩包,找到Hbuilder X可执行程序,双击即可启动程序: 说明: HBuilderX正式版和Alpha版区别: Alpha版比正式版更新频率更高,新功能会优先...
  • HBuilderX 下载git

    2022-08-10 13:40:23
    HBuilderX 下载git
  • HbuilderX下载安装教程

    2022-07-05 00:22:53
    通过HbuilderX官网进行下载 链接: https://www.dcloud.io/ 选择相应的版本进行下载 1、将下载好的文件进行解压操作 2、打开解压好的文件夹,找到“HBuilderX.exe”可执行程序,双击即可启动程序。 至此文件安装...
  • HBuilderX的下载安装的步骤:第一步:HBuilderX:第二步,按下图操作按下图操作:按下图操作:正在解压。
  • HBuilderX下载sass 插件

    2022-03-03 15:09:37
    使用导航组件时,需要依赖 sass 插件 ,...打开HBuilderX,->工具->插件安装 安装新插件->前往插件市场安装 右上角 登录下账号 搜索sass 点击下载 使用HBuilderX导入插件 打开HBuilderX 下载成功 ...
  • HbuilderX下载git插件方法

    千次阅读 2022-04-01 14:09:44
    上面导航栏(工具-->插件安装-->安装新插件-->Git插件)
  • 问题描述:在通过Hbulider X学习了一段时间的html和css之后,发现Hbulider X并不是特别好用(个人觉得),于是想要下载Hbulider 但是在官网上并没有找到Hbulider,...问题解决:通过腾讯电脑管家下载Hbuilder ...
  • 1.下载安装HBuilderX 2.HBuilderX中引入项目进行打包 3.遇到问题,缺少插件,根据提示进行解决 4.最终打包成功(打包操作) 三、过程 1.下载安装HBuilderX(绿色解压即可食用) 1.1.地址:...
  • HBuilder X 下载安装内置浏览器失败

    千次阅读 2021-01-30 15:00:10
    今天周末闲着没有什么事,就抽空玩玩所谓很强大跨平台的uni-app,HBuilder X下载解压即可使用,写一个简单demo,一切都很顺利,但每次修改调试看结果都需要跑到手机看就很蛋疼了,在HBuilder X提供一个预览功能,...
  • Hbuilder 下载地址

    千次阅读 2019-12-05 09:48:50
    http://www.downza.cn/soft/196563.html
  • Hbuilder插件下载失败;插件下载失败,请检查网络是否正常
  • Hbuilder红色版下载

    千次阅读 2019-09-28 23:27:46
    官网:https://www.dcloud.io/ 解压后就可以使用了
  • 一,使用HBuilderX下载插件 使用HBuilderX开发项目,运行uniapp的过程中,会报错显示需要安装一些插件。 1,打开HBuilderX,选择工具》点击插件安装; 2,出现小弹框,点击前往插件市场安装; 3.在市场中搜索,...
  • HBuilderX模版下载失败

    千次阅读 2020-05-26 09:48:50
    下载了最新版HBuilderX(2.7.5.20200519),准备按照“快速上手”的介绍来搞一个Hello World,结果在模版下载就遇到了问题, 模版下载失败! 在DCloud官方问答里,有人反馈,却没有人给出解决方案,只好自己摸索了...
  • 一般有两种情况 第一种是没有获取到权限 使用管理员身份运行 查看之前的日志可见报错“系统找不到指定的路径” 可能是因为不给管理员权限,导致软件想更改C盘里面安装文件时出现了权限不足的情况 ...
  • HBuilder中文版

    2019-01-22 14:39:10
    HBuilder.rar,HBuilder,rcp.exe,ResetPwdll.dll,version.txt,.eclipseproduct,HBConfig.hb,icudtl.dat,locales,uk.pak,lv.pak,pt-BR.pak,de.pak,en-GB.pak,et.pak,da.pak,sr.pak,kn.pak,it.pak,sw.pak,sl.pak,ko.pak...
  • 1、HBuilder下载,创建项目流程 2、实现简答的浏览器插件开发,信息弹窗,或者输入文本赋值到百度搜索文本框 3、需要熟悉的前端编程语言:javascript(用于交互)、html和css(用于布局和样式) 1、HBuilder下载...
  • HBuilderX的下载和安装和使用

    千次阅读 2019-12-12 16:37:45
    HBuilderX的下载和安装 HBuilderX下载 HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。 HBuilderX下载地址:下载HBuilderXHBuilderX安装 找到下载好的安装包。如图: ...
  • 首先我们先下载一下HBuilderX 下载地址路径:https://www.dcloud.io/hbuilderx.html 1.点击download 2.下载app开发版的
  • HBuilderX的下载和安装--详细

    万次阅读 多人点赞 2019-03-05 14:44:29
    HBuilderX下载 HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。 HBuilderX下载地址:添加链接描述 HBuilderX安装 找到下载好的安装包。如图 解压安装包。 解压后...
  • ????软件版本问题是个令人头疼的问题 ...然后一番周折后,需要把HbuilderX的版本降低,然后我就又下载了另一个低版本,这时候遇到了HBuilderX 内置终端插件下载失败,安装失败这个问题,害。 查询一番

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,711
精华内容 5,084
关键字:

hbuilder下载