你们好，最近小艾特发现有诸多的小伙伴们对于静态ip和动态的区别，静态这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 设计什么样的主页要写静态网页屏幕，然后在网上收集图片资料或者其他资源。边肖自己在网上找了个参考，然后用ps编辑了一张图片，比如图片，还有很多需要用到的按钮等背景图片。

2、 我也是在网上找的素材或者干脆自己用ps做的。嗯，我感觉我在第二位。啊，就是这样。边肖是一个动漫之家。请原谅我。

3、 这里，我们先从html和css的一些简单知识开始。这里举个简单易懂的例子，就是helloword的例子。啊，比如我们想在浏览器中输出hello！字！如何输出？代码如下所示，

4、 即使在body标签中写helloWord而不是h2标签，浏览器也会输出helloword，图中有详细的注释。最后，边肖将给出一个完整的静态页的完整代码，

5、 如果没有基础，请认真完成简单的例子。

6、 在浏览器中打开它。因为是html文件，所以只要在这里点击右键打开即可。右键打开(选择要在哪个浏览器打开)或者直接点击打开选项，会用默认浏览器打开。

7、 浏览器显示效果

8、 页面单调吗？这是因为我们还没有写风格。如果我们希望helloword的字体颜色为红色，背景框为灰色，那么样式代码应该这样写。同样，静态页面的其他样式也可以通过css进行调整。

9、 添加样式后的效果

10、 要添加图片，在html文件中使用img标签来添加图片。因为图片尺寸大于外包div尺寸，所以图片会被挤出灰色div。

11、 所以你需要在样式文件test1.css中调整图片的大小和样式，样式代码如下。

12、 显示效果如图所示。在这里吗？当然不是，以下是我自己写的小编静态网页及所有代码。这里的图片可能不可用。你可以用自己的图片代替我用图片的地方，然后试试这些代码。

13、 或者只是看看做参考。

14、 首先，新建一个项目文件夹，这是一个好习惯。把东西放进文件夹后，从网页上找东西很方便。moban1在这里编辑。

15、 然后在moban1文件夹中新建两个文件夹style和images以及一个html文件。存储样式文件测试。CSS和images存储需要的图片。

16、 写一个test.html文件，边肖的习惯是写完一个html文件的div后调整css样式文件。下面是完整的html文件和css文件代码。

17、 最后，网页的效果如图所示。

以上就是静态这篇文章的一些介绍，希望对大家有所帮助。