学完了html和css怎么做静态网页啊，没有头绪，初学者都是这样的么，感觉手拿

时间：2022-09-02 11:09:01 | 来源：网站运营

时间：2022-09-02 11:09:01 来源：网站运营

有图，预警。

-----------------------------------------------------------------------------------------------------------------------------------------------大概明白题主是什么意思。

题主自己学了一遍HTML+CSS，觉得还是蛮简单的，但实现起来却不是想像的那样。

太正常了。这是所有需要实践同理论相结合的学科在初学时所要面临的大问题。你要理解这种困难是有办法克服的，并且在你今后的学习过程会遇到更多的这样的困难。可以预见到你会在用js写动态或交互的时候发出感叹：“我觉得我JS数据类型，对象，函数，甚至正则闭包都会了呀，却依然写不出想要的效果呢？”

你的实践还太少了。

-----------------------------------------------------------------------------------------------------------------------------------------------接下来正式回答题主的问题。

做一个静态网页大概的思路应该是网站类型>>布局>>结构>>细节修饰。

1.我们在做一个网站页面之前，首先考虑的是我们要做一个什么样的网站。

腾讯首页是这样的：

这是一个综合网站大概应该有的样子：搜索框、导航、文章类别模块、文章标题，以及一部分广告。

如果题主要做一个博客：

一个博客主页应该有的：导航、文章缩略、文章搜索、文章导航以及图中没有显示的可能会有的评论区。

所以要做一个优美的静态页面，第一步应当是考虑网站的类型，以及网站里面有什么东西。

2.布局（排版）

我们来看一下腾讯首页：

在图中我用红线画出了网站大概的模块化布局，这对我们接下来实现网站非常重要。

这是模仿网页的步骤，题主要想做一个自己设计的网页，那么自己就应该先把布局图画出来，标记好每一块是什么。

当然了切图肯定是有图可切的。通常我们都会有UI给的设计矢量图以及尺寸，UI给的图通常不会这么丑。（或许是我自己画的丑。。。）

自己设计网页的话，要想网页漂亮一点，还是要有一点设计师的feel的。

3.结构

接下来就是进入重点了，我们要用代码把UI设计图/自己画的设计图/模仿的网站截图实现出来，在前面我们已经打好了布局关，接下来就可以直接上我们的html架构代码了。

按照布局，我们把网页写成一个一个div，再根据相关的内容，具体地在div里添加相关的内容。

比如文章标题列表，写出列表的相关标签。

写出表单的相关标签来实现搜索框。

把这些东西都用html实现出来，我们网页的基本架构就出来了。

（随便找了个很久以前写的html基本页，艾玛真是太丑了。。。）

4.细节修饰

CSS要上场了，这应该是我们在做网页的时候最难的一步，遇到的问题也最多。

所以我的建议是从易到难，分块化实现。

题主可以先把这一块完成：

然后是

接着

和

你会发现很多地方你做的不好，你要灵活地动用google，百度去查你要找的答案，去问你身边的大神他们怎么实现你想要的效果。

等你把这一个个模块全部实现之后，还有任务是用CSS实现布局，inline-block，盒模型，定位要调用起来，把一个个你辛苦实现出来的模块，组成设计图/网站截图里的样子。

5.修改，反思

到这里我们的静态网页已经基本成型了。有一些小的地方需要修修补补，html，css文件中的代码需要规范化。但是作为初学者，寻找自己代码中的问题是一个很大的难题，例如浏览器兼容性等方面的体验，初学者可能完全不会发现。如果你有一位良师/有经验的神队友肯为你指点迷津，帮你指出代码中不规范的地方，那是最好不过了。

每一次写完这样的页面，都要去反思自己写页面的过程，争取每一次都会有一定的进步。

-----------------------------------------------------------------------------------------------------------------------------------------------题主竟然有耐心看到了这里，我想给题主提点建议：

#1

2天（1天10个小时）模仿了个百度和腾讯静态的，还各种问题，排版什么的我感觉也明白了，写网页就是写不好

3天成为网页大师？

你的实践经历只有”1天10个小时“，写不出来，有地方不会是很正常的，但是我并没有看到你在面对不会的地方时去向大神，google，百度，各种博客求助，你在哀叹自己是不是方法不对甚至是笨，你在本站求问大家”是不是也是这样“来寻求安慰感，这是学习的态度？

作为初学者，打基础应当牢固，精益求精。我们应该在不断的锤炼中去理解所学理论的真正含义，在实践中踩过一个一个的坑，甚至每次都在同样的坑跌下去，疼到自己谈坑色变，才能在走过同样的坑时，用最佳的最安全的路线走过去。

想用htmlcss实现静态页面，只切了一个腾讯一个百度，遇到了些问题，就开始觉得有些沮丧，那以后还有更多的坑等着你踩呢，咋办呀？

我学htmlcss花了一个月，这一个月里都在切页面，平均每天一张，变换着样式去尝试各种不同的效果。现在偶尔看到了一些漂亮的页面设计，也拿来切一切。

请平下你那颗”3天精通html+css“的浮躁的心，老老实实地学，老老实实地练，不怕不会，不懂就问。学得慢不可怕，学得精才是王道。

#2

建议题主还是要把w3cschool里相关的内容全部过一遍，认认真真，逐字逐字地看，保证自己弄懂了为止。在慕课网或者其他渠道也有一些相关的教学视频，可以参考借鉴。htmlcss的学习路线并不艰难，JS的学习路线才是万般荆棘。基础打好了，面对之后的挑战才能从容不迫。

同为前端初学者，共勉。