网页思路:
在正式编写前，给网页结构大致划分出导航栏（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 属性设置元素的上外边距文章来源：https://www.toymoban.com/news/detail-496454.html
line-height 属性设置行间的距离（行高）
文章来源地址https://www.toymoban.com/news/detail-496454.html
到了这里，关于甜品网页制作HTML+CSS+JS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
