零基础html5+div+css+js网页开发教程第007期 网页基本代码框架

简介: 零基础html5+div+css+js网页开发教程第007期 网页基本代码框架

上一节中,我们学习了利用hbuilder工具,对我们的日常网页开发进行快速开发。我们可以使用像数学一样的技巧,快速生成有规律的代码。在实际企业开发中,只要能满足业务需求,一般来说都会采用快速开发的方式进行的,这样才能使得一个企业好好生存下去,因为一个企业需要很多资金的注入。

但是我们也需要注意在快速开发的过程中,我们也要考虑到以后的代码维护,因为毕竟想要长期掌握一个客户的话,是需要长期维护我们的代码的。任何一个程序员开发出来的代码不可能没有bug。


本节知识,我们从一个网站的基本结构出发,分析好一个网页才能对一个网页进行更加深入的开发,也可以更好运营维护下去。我们在分析一个网页的结构的时候,可以把网页就想象为一个人,分成上、中、下 三个部分。


1.html结构



html网页内容代码基本结构:


2.css结构



css结构规划,我们要看文件的结构,不同的功能,我们往往存放在不同的文件中,相同的功能的,我们要提取的某一个文件中。

  • 通用的css文件命名common.css

   写通用css可以在多张页面上使用同样的css文件,通过一次书写css,同时在多张页面生效

  • 另一个css就是解决某张主页的样式的css文件


默认情况下,我们的网页是有白边的,这个白边的造成,实则是因为body这个标签自带的。所以,问题是如何解决这个白边问题。


提问:如何解决白边问题?

Body中 marign:0


3.总结



1、掌握网站中css结构规划

2、网页开发的基本代码结构,写好后,往结构中填充即可

3、可能会出现多张页,这个时候我们应该要有一个相同意思的规划。


本节文件结构:


index.html源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程首页</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div id="wrapper">
      <div class="header">上</div>
      <div class="main">中</div>
      <div class="footer">下</div>
    </div>
  </body>
</html>

products.html源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>产品页面</title>
    <link rel="stylesheet" href="css/common.css" />
  </head>
  <body>
  </body>
</html>

css文件夹文件:

common.css源码:

body{margin: 0;}
#wrapper{
  border:1px solid yellow;
}
#wrapper .header{
  background-color: red;
  height:150px;
}
#wrapper .main{
  background-color: gray;
  height:350px;
}
#wrapper .footer{
  background-color: skyblue;
  height:150px;
}
相关文章
|
2月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
116 0
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
54 1
【HTML】构建网页的基石
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
107 6
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
49 0
|
26天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2