前端:练习页面,(致美页面练习)

本文介绍了前端网页开发中的实践操作,包括文件组织、命名规范、路径引用等关键点,并强调了使用相对路径的重要性。作者分享了创建多个页面的过程,如首页、关于、案例、动态和咨询页面的制作,并提供了源代码链接。此外,还提醒读者项目中所需图片可在评论区获取,鼓励提问交流。
摘要由CSDN通过智能技术生成

所有练习页面成品截图

在这里插入图片描述

开始讲解前的注意点

注意点一

在创建较多的网页时,为了方便管理等。有必要将对应的前端,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个页面的代码太多,所以各部分代码请查看我的专栏:前端完整项目案例—>致美网页练习完整代码

注意

项目里面需要的图片可在评论区找我拿,欢迎咨询。

评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员Fy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值