甜品网页制作HTML+CSS+JS

网页思路:
在正式编写前，给网页结构大致划分出导航栏（nav）、内容（content）、底部（footer）等div布局

布局好之后，再在CSS文件中，完整详细的补充div盒子的宽、高、背景颜色等样式。由于网页的元素分为内联元素和块状元素，有时候适当的使用display属性转换。
其实不管是框架还是内容每一个都可以看成盒子布局

网页大致布局好之后，再填充详细完成里面的元素样式。
里面内容也是建议分块布局写内容，再在CSS文件中编辑样式，
再分块布局再编辑样式，再用js提供页面交互效果。

整体效果图展示：

如上所说我们可把一个网页分为三步骤 导航栏（nav）、内容（content）、底部（footer）接下来展示我们网页效果以及代码分享

导航栏效果图展示：

 HTML:

 CSS：

注：由于每个浏览器的问题，网页与浏览器会有一定的边距。我比较习惯在CSS布局里像这样设置，就解决了这个问题。

margin:0  padding:0

因为导航栏上有个图片可直接在HTML里显示，在通过css进行设置盒子内容宽与高

padding-top 属性设置元素的上内边距（空间）

创建水平导航栏，可以使用inline和float两种方式
将列表项设置为内联元素

默认情况下，<li>元素是块元素。 在这里，我们删除每个列表项之前和之后的换行符，以将其显示在一行上

创建水平导航栏的另一种方法是浮动<li>元素，并为导航链接<a>指定布局
 

导航栏轮播图展示：

 

 

 HTML；

 CSS

JS:

 这里可实现点击图片下方长方形按钮可以进行切换图片效果，由于自动轮播我属实不会这里跳过

内容效果图展示;

 HTML

 CSS:

 这里我们使用大盒子装小盒子的方法，进行排版划分

内容2效果展示：

 HTML:

CSS

 

 这里同上，不过这里使用文本标签

注：内容部分使用<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素

这里使用class="left"，来设置宽度width 与水平对齐text-align

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
 

底部代码效果图：

 HTML

 CSS

注:使用id选择器进行编辑内容 用p标签进行段落划分，设置内容宽与高，和文字大小，与字体颜色和背景颜色

text-align 属性规定元素中的文本的水平对齐方式。

padding-top 属性设置元素的上内边距

margin-top 属性设置元素的上外边距

line-height 属性设置行间的距离（行高）