零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
刘金玉编程
发布于 2019-11-25 22:21:07
发布于 2019-11-25 22:21:07
上一节中，我们学习了利用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;
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-11-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读