如何制作简单html网站模板静态网页
作者:80建站模板发布时间:2021-02-21浏览量:59
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等

如何制作简单html网站模板静态网页?大家都知道网站的制作是一个一个静态网页大体由HTML, CSS和JavaScript组成。HTML是主体,装载DOM元素,CSS用来装饰DOM元素,JavaScript控制DOM元素。

网站模板用一扇门比喻三者间的关系是:HTML是门的门板,CSS是门上的油漆或花纹,JavaScript是门的开关。

HTML介绍

HTML是描述网页的一种超文本标记语言(标记标签)

HTML通常是成对出现由尖括号包围的关键词 (例:)

HTML定义了网页的内容

CSS介绍

CSS指层叠样式表,用于渲染html元素标签的样式。

CSS由两个主要部分组成:选择器,一条或多条声明

(例:选择器: xk-logo OR #xk-logo  声明是有属性和值构成: margin: 0 auto;)

CSS可通过三种方式添加到html中

(按优先级大小顺序排序)内联样式(优先级最高)内部样式表外部样式表

JavaScript介绍

JavaScript是脚本语言。它是连接前台(html)和后台服务器桥梁,同时也可以操纵html元素。

JavaScript实现网页的行为

实现一个简单的静态表单页面

先看下成品吧

是不是有点跃跃欲试了呢

那就继续往下看吧!

首先我们回顾下上期有提及到的网站模板网站代码的基本布局

1)开始制作网页,先命名一个项目文件夹为index,并且把引用的资源文件分类文件夹,这样方便后期维护。

2)在HTML中的引入CSS文件(在head标签里引用),JS文件以及图片资源

这里需要注意的一点是路径的问题

“.”–代表目前所在的目录。

“..”–代表上一层目录。

“/”–代表根目录。

具体得根据html文件与引用文件的位置而定

详情可参考:

3)编写网页的主体内容(编写在body标签里)

这时在浏览器中查看会发现和成品的样子不一样以及弹框功能没有实现,别急,只需再编写CSS,JavaScript即可。

4)编写网页的CSS,JavaScript

index.CSS:

index.js:

5) 大功告成了,可以使用浏览器打开网页查看下自己的作品啦!


文章标签:html    网站模板    静态网页   
关 键  词:网站模板制作,网站模板下载,制作html静态网页
本文网址:http://www.80oo.cn/jishu/58.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
09-27
织梦cms要花钱授权了,如何转到别的建站程序?其实现在免费的cms有很多,比如易优cms、mipcms、pbootcms等,我们今天介绍一下为了方便把织梦模板转换成PB模板而生的工具,大大方便的操作过程,不过对于复杂的模板效果不太好。工具是死的,人是活的,工具+手动调整=高效解决,工具作者:晨星傲月。具体工具使用在下载包里已经
2021
08-20
现在的论坛有很多,但是找出几个权重比较高的论坛确实很费事,所以说大家要抽空点时间去选择一些高权重的论坛,SEO马龙认为注册个账号,要把自己的个人信息填写好,不要盲目的去发广告,很容易被论坛的BT斑竹给你K掉的,如何做好网站优化内外链建设?从目前来看外链的选择主要有以下几点:1、bbs类:千万别为了一个广告而浪
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
服务热线