所有练习页面成品截图
开始讲解前的注意点
注意点一
在创建较多的网页时,为了方便管理等。有必要将对应的前端,css,图片等类型的代码分别对应到一个文件里,如下图本人是这样分的:
点开任何一个文件后发现自己创建的文件名的后缀名都是与上图文件名对应的。
如下点开css文件后发现我的css文件里面的文件全部是css后缀名结尾的文件。
html文件以及images文件里面对应的都是html文件以及对应的图片。这里不再点开一个一个的看
注意点二
文件在引入时尽量写相对路径引入,如果写绝对路径引入文件的话,有的人可能没有绝对路径里面的某个文件,这样就会出错。如在html文件里面要引入某个对应的css文件。:如下
<link rel="stylesheet" type="text/css" href="../css/home.css">
上面的代码重点是
../css/home.css
这就是相对路径。
各部分页面的讲解
从上面图可以看出我们主要有6个前端页面
分别是:
首页,关于致美,成功案例,新闻动态,在线质询,联系我们。
所以需要写6个页面,但是我只做了其中5个,所以实际上我只讲解我做的那5个页面。
首页的创建及讲解点
首先为了规范,文件名尽量采用英文可以理解的语言,避免拼音。
先在html文件夹下创建一个叫home.html的文件,然后用sublime编辑器打开这个home.html文件,再在里面写入前端内容。
同时创建一个home.css的文件在css文件夹下,一边写html前端代码,一边在css文件里面写样式表
注意:可以在边写的时候边运行看效果,效果不满意可以再修改css样式。
其他页面的操作步骤基本一致。欢迎遇到问题咨询
首页源代码
因为6个页面的代码太多,所以各部分代码请查看我的专栏:前端完整项目案例—>致美网页练习完整代码。
注意
项目里面需要的图片可在评论区找我拿,欢迎咨询。