完全自主网页设计记录（一）

文章目录

目录

文章目录

前言

一、创建项目

二、代码实现

1.HTML连接CSS文件

2.登录界面核心内容

3.CSS代码编写

 总结

---

前言

因为快要实习了，所以趁着暑假做一个项目然后拿去面试的时候用。因为我前端学的比较好，所以未来想从事前端方面的工作，所以这个项目就做一个网页。刚开始还没有确定网页的主题，所以先做网页的登录界面。下面就开始做网页的登录界面

---

一、创建项目

本次项目使用的软件是WebStorm。因为之前上课的时候用过idea，感觉比其他软件好用。但是idea要收费，要使用它必须付费或者用破解码。我尝试过用网上的方法和破解码破解，但是不成功。后来在网上看到可以认证学生认证然后就可以免费使用，于是就认证了。然后一星期之后就认证通过了，然后就可以免费使用啦。下载一个JetBrains ToolBox，就可以在里面下载到JetBrains的所有软件。

下载安装WebStorm，打开，点击左上角的文件→新建→项目，选择空项目。因为我不知道其他项目都是干嘛的所以选择的是空项目，然后再在项目下面创建文件就行了。（其实空项目就是一个空文件夹）这里插入一个点，我把WebStorm设置成了中文版，所以我上面写的点击的是中文。这个是我第一次进入WebStorm的时候它自动弹出了一个东西然后我点击了弹框中的按钮，然后它就自动设置成了中文版。我觉得这个可能是跟我注册账号的时候选择的国家地区有关系。

选择空项目，然后选择存储路径，然后点击创建，就完成了创建。然后在创建好的空项目中创建所需要的HTML文件。 右击空项目→选择新建→HTML文件，输入文件名。因为这个文件写的是登录界面所以命名为login.html。再创建一个所需要的样式表文件，右击空项目，选择新建→样式表，输入文件名login.css。

二、代码实现

1.HTML连接CSS文件

在login.html中的<head&g