专栏首页编程创造城市零基础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;
}

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础html5+div+css+js网页开发教程第005期 hbuilder网站开发环境搭建

    欢迎小伙伴继续观看网页开发教程。该教程是基础有简单计算机基础,但是却没有网页开发基础的同学使用的。如果您毫无计算机基础,对于本教程的使用还是会有一点的难度。

    刘金玉编程
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • 刘金玉的零基础VB教程083期:mshflexgrid数据表格绑定数据库

    2、在使用数据库前必须要连接数据库conn.open,使用conn.state来判断是否连接数据库,值为0的时候代表没有连接

    刘金玉编程
  • 小奶狗给小喵咪上CSS课程

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    达达前端
  • jQuery右侧滑动快速导航条

    平时浏览网站的时候要是网站很长,滑下来后还要返回到开头部分的header来点击导航就显得很不方便,在这里使用JQ来实现右侧的滑动导航条,先来看看效果图吧: ? ...

    benny
  • Animate.css 动画库介绍

    一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库Animate.css。 animate.css在线效果用一...

    乐百川
  • 如何把custom form 7添加到wordpress每个页面

      我们已经知道wordpress如何添加contact form 7了,也知道[contact-form-7 id="xx" title="mytitle"]...

    ytkah
  • vue中使用iconfont

    用户4344670
  • 何恺明团队推出Mask^X R-CNN,将实例分割扩展到3000类

    翻译 | AI科技大本营(ID:rgznai100) 参与 | shawn,刘畅 今年10月,何恺明的论文“Mask R-CNN”摘下ICCV 2017的最佳...

    AI科技大本营
  • 3.0Spark计算模型

    Spark大数据处理:技术、应用与性能优化 第3章 Spark计算模型 创新都是站在巨人的肩膀上产生的,在大数据领域也不例外。微软的Dryad使用DAG执行模...

    Albert陈凯

扫码关注云+社区

领取腾讯云代金券