专栏首页编程创造城市零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

知识回顾:

上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

本节知识视频教程

哈罗哈罗,小伙伴们大家好!我们这一期就用hbuilder来做一个快速开发。我相信大家在下载的时候可能也已经看到了他的一个各种各样的快速开发的一个好处,使用它能够达到提高我们是办使我们事半功倍。

那么我们来看这个工具到底是如何使用?

一、新建项目

我们还是新建这每一个项目,我们来一步一步跟着我的步骤走下去,我们学会几个关键的步骤就可以。

二、开发过程

很多情况下,我们会发现很多标签都是类似的,这个时候,我们使用hbuilder来一次写多个标签,就显得非常爽啦。

1.多个标签技巧

这里,我们需要使用符号 *表示乘号

举例,写10个a标签

a*然后按tab,然后就会生成10个链接的标签代码。

2.多个光标技巧

多光标同时书写

按住ctrl键,鼠标点选各个位置,然后可以同时书写

3.结合css选择器技巧

Css标签基本对应方式

Id 对应 #

class 对应 .

如果写一个div带有class属性的

可以这样写 div.panel按住tab键,就会快速生成相应代码。

使用>表示下一层节点,使用+表示同层节点

div.panel>div.title+div.content+div.function按tab键后,生成如下:

<div class="panel">

<div class="title"></div>

<div class="content"></div>

<div class="function"></div>

</div>

三、总结

1、要有快速开发的意识

2、要学会利用一些好的工具,辅助我们开发

3、要会快速中用到的基本符号以及层次结构

本例html源代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程</title>
  </head>
  <body>
    
    <div id="section1">
      <div class="p2"></div>
      <div class="panel">
        <div class="title"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="function"></div>
      </div>
    </div>
    
  </body>
</html>

本文分享自微信公众号 - 编程创造城市(bcczcs),作者:刘金玉编程

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础html5+div+css+js网页开发教程第010期 图片轮播案例

    用来显示图片的标签。它的Src属性用来设置图片来源,其实也可以直接设置width来设置图片的宽度,设置height来是指图片的高度。值得注意的是,图片的宽度一旦...

    刘金玉编程
  • 零基础html5网页开发教程第008期 导航栏开发案例

    导航栏,有的人又喜欢叫菜单栏。确实和菜单有点像。导航栏几乎会用在所有的网站中。那么导航栏是怎么开发出来的呢?今天我们就来开发一个最为简单的导航栏。

    刘金玉编程
  • Python高级进阶#017 pyqt5下拉列表控件QComboBox

    combo1=QComboBox(myframe1) 在实例化的时候,要选择父容器

    刘金玉编程
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • HTML5选择器

    czjwarrior
  • HTML规范 - 整体结构

    申霖
  • 前端-part8-jQurey操作样式一

    少年包青菜
  • 解决bootstrap row span设置border换行的问题

    版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

    他叫自己MR.张
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study

扫码关注云+社区

领取腾讯云代金券