零基础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>
相关文章
|
6天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
前端开发
精通CSS+DIV网页样式与布局--滤镜的使用
        在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来说说滤镜的使用,首先,小编来简单的介绍一下滤镜的概念,CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。
1060 0
|
前端开发
精通CSS+DIV网页样式与布局--制作实用菜单
        在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表、无需表格的菜单、菜...
1312 0
|
Web App开发 前端开发
精通CSS+DIV网页样式与布局--页面和浏览器元素
        在页面和浏览器中,除了文字、图片、表格、表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。
1399 0
|
Web App开发 前端开发
精通CSS+DIV网页样式与布局--设置表单和表格
        表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS...
1213 0
|
Web App开发 前端开发
精通CSS+DIV网页样式与布局--页面背景
       上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调。
1223 0
|
Web App开发 前端开发
精通CSS+DIV网页样式与布局--初探CSS
        CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法。
1093 0
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
下一篇
无影云桌面