文章：5天前端开发的心得

写在前面的话：

本人小白一枚，本站从零开始手打搭。欢迎交流学习，本文仅为我的自娱自乐，大佬互喷。

Day1

不就是写个网站嘛！看我分分钟读完学完CSS！

Day2

嘶...嘿！你个元素，还跟我对着干？还对不齐了你

Day3

xdm我破防了😭😭😭标准流写不出效果。定位一用直接高度塌陷😭😭😭

Day4

很好，我的网站已经有一个基本框架了！我要公开到公网！

Day5

兄弟们我又破防了啊😭😭😭一个服务器最便宜要60一年，域名买了还要备案😭😭😭

咳咳！总之以上确实是我这五天开发的真实写照，下面我就详细介绍一下这五天我是怎么写得吧嘻嘻。

一.找个大佬参考参考

我寻思看看大佬的博客都长什么样，完了我也参考着自己写一个自己的。这是我第一天参考的大佬的博客👇

Echo大佬的播客主页截图（从我的网站就能看到很多大佬的影子）

二.确定方向

大佬不愧是大佬，太强力了！于是乎我决定先系统的学一遍CSS，然后把我这个网站效果写到不次于大佬的程度！由于事先了解到CSS就是属性和属性值，只要掌握了基本写法格式，样式都是小问题（不过是记背而已）。我就开始过那本《HTML+CSS+JavaScript》所有项目前面的CSS属性教程部分，项目网页实际搭建部分是一点儿没看，我的目的就是通过掌握基本的属性写法，然后写出自己的网站。

三.CSS，启动！

这第一天差不多就是把书上有关CSS的属性都看了并实际试了个遍，只有实际试下来你才能理解这个属性的效果到底是怎么作用的。这就开始了我的网页搭建，首先我创建了一个home.html，我先写了几个div标签用来划定整体版样。参考大佬，我的主页要有一个顶栏、一个侧边栏展示个人简介、一个文章卡瀑布流（就是这几个东西我怎么也想不到写了这么久）。根据从书上学到的属性直接开始搓CSS代码，我的大思路就是写一些预制的类选择器，为他们写一些预制属性，方便用到时直接调用。于是我写了div.card（写各种卡片效果用）、p.text（文章部分写正文用）、p.h1（文章部分写一级标题用）等选择器，一个一个写属性。就这样这个首页的基本框架就本就是写好了。然后就出现了一个很蛋疼的问题：我的侧边栏和我的瀑布流是左右结构，而标准的文档流是上到下左到右的顺序，这可让我犯了难。我只好去写position:absolute属性，完了这样两边完全脱离文档流了，页面的主div直接高度塌陷了......经过一番折腾，虽然绕了很多弯，但最终还是写出了这样一个左右结构。又考虑到访问我网站的浏览器窗口可能不一定是标准的16：9或16：10一类的，我就又为我的所有width值写成了百分比值，确保这些元素都是相对于窗口以百分之几的宽度显示，这样一来就初步实现了窗口大小引起的适配问题（我可真是个小天才）。

总之就我第一天CSS写得还算顺利，基本写出来这个首页的样子来。第二天我又多写了文章页，目前为止一切进展还算顺利。然后到了第三天，当我想进一步打磨细节的时候......发现什么都不会写233333

三.CSS细节打磨，AI立大功！

灵机一动！欸！智普清言，启动！比如说我想写一个鼠标悬停跳起（主页卡片效果，你们可以去看看），欸这破书又没讲，我就只是抱着试一试的想法去求助AI，没想到...
我去这AI也太强了！我不禁感慨，现在的国产模型都已经能准确实现我的需求了我嘞个天啊，震惊我了！

咳咳，当然我可不是直接复制代码哦！那么说回来我是怎么AI辅助写网站的呢？还说刚才的卡片跳起效果，我来描述一下吧：我是去研究他给我写的CSS，追问我看不懂的部分，比如他给我写了个.card:hover选择器，我说这是啥玩意啊，我就去问它，他就告诉我这是伪类选择器，可以选中特定状态的元素......然后我就让它给我讲常用的伪类选择器。欸！这可是书上没讲的内容，这不就学会了！完了它CSS属性里面有写了一个transform:translate，我就跟刚才一样去追问这是什么，常用的transform类型有哪些，这样一来就整好了我想要的效果。像这样，我又跟着AI学习了transition过渡属性等等。

四.js脚本，破大防！

时间来到第四天，网站已经有一个基本的样子了，我要写一个评论区！我记得网页行为要写js来着。于是，我有不知死活地去读书上的js基础，BOM对象和DOM对象都看了。整完了准备实践的时候才知道，互联网要发评论是不能直接改我的服务器文件的😭😭😭后面了解到要实现这个效果，还需要Node.js甚至MySQl😭😭😭这一下就给我劝退了！只好先放弃了写互动评论区的想法，只能写一个评论摆设了😭（你们可以试试在这个页面下方或者留言板发一下）

五.校园网我*你*

1.解决服务器问题

时间差不多了，是时候先把我的网站公开到公网上去了。我联系到我一个广西的哥们儿学习了一点儿建站知识，当即就去阿里云买了一个域名（blueing.fun），在它实名审核期间，我先去搭建了本地服务器，结果我的广西老表访问不到。我：？一顿操作之后我终于查明了原因，校园网只有内网，公网访问不到😭😭😭但是我的广西老表实在是太强了，直接给我整了一个内网穿透工具，直接把我的本地IP映射到了他的公网服务器上，我勒个老哥我真是太谢谢你了！（licehng我爱你）

2.解决域名问题（才怪！）

我给我的ip发给域名DNS解析了。第一分钟：欸！太好了！能用域名访问了！第二分钟：

阿里云你坏事做绝！

好吧，这下必须去备案了！然后我就去备案去了。

嘛~总之先写成这样吧。后面的事情还要留给我去努力......这个网站什么时候能真正写评论，什么时候能写丰富的js行为都还等着我去挑战呢！

评论

发送评论