<head>
<title>最简单的网页</title>
<style type="text/css">
.bigbox{height:100pxwidth:600px_height:120px_width:620pxpadding:10pxborder:solid 1px #000000}
</style>
</head>
<body>
<div class="bigbox">
</div>
</body>
</html>
直接把这个放入文本里面，把后缀名改成.html 就行了
静态网页制作步骤：
第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。
第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。
第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。（这个部分需要有代码基础，可先学习HTML入门教程）
第三：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。
第四：最后优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。
扩展资料：
静态网页是标准的HTML文件，它的文件扩展名是。htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。我们就叫做静态页面。
静态页面一般都是html格式，鼠标双击这个静态页面，就可以打开这张网页，效果会跟图片设计的效果一样。那么这个静态页面就是一个网站了吗？这些静态页面其实只是做网站或者做模板的材料而已。
在网站设计中，静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含建站程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
静态的网页其实就是2部分组成，一个我们的底层结构html，另外一个就是负责修饰结构的css，其实书写静态网页就像是我们小时候在过家家一个样子的，你首先得把你需要的过家家的家庭成员找齐了，而我们这个找家庭成员就像是我们书写页面网页的时候，那个最底层的结构html，你在玩过家家的时候脑海里肯定已经有了一个简单的家庭成员和故事情节了。而我们在写页面的时候是有剧本的，这个剧本就是你看到的设计图，或者是你看到的某个网页，个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能，把整个页面完整的截取下来，QQ浏览器，360浏览器都可以做到的，这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。
首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看，其次利用浏览器的F12查看功能，这样子做你就会不小心的看到了原代码，你的思维跟原来的编程人员思路有些时候是不一样的，这样就限制了你的思路，最后你翻找的过程真的是很需要时间的，同时还会影响你的思路。
按照设计好的剧本然后我就可以对应这找人员了，比如说爸爸、妈妈、孩子、锅、饭碗、筷子，菜等等，我们写页面也是的。比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同的类型的页面，布局上比这边要复杂一些，具体的可以看下面的图。
这个是我们看到一个图的时候，大致在脑海当中对页面进行一个简单的扫描，进行初步认识看看页面当中都有哪些，如果把页面当成一张纸，那么在一点点撕碎的过程中要怎么样从大到小一点点的分割，当我们有了初步的认识之后，就可以把这些东西转化成我们的html结构，所有画的这些不同颜色的框框我们在写的时候用的都是div。
从上往下，从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input，文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积，不是把整个页面都堆积出来，而是一个模块一个模块的来，比如头部的、中间左边的、尾部的。
接下来我们需要做的就是把写好的结构进行美化，不然你就会看到如下图一样的场面。
难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮，妈妈要穿上高跟鞋呀，需要涂抹口红呀，爷爷是需要有胡子的而且还是要白色的才会更像一些，最好是要弯腰驼背的。
而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心，涉及到的东西很多，同时也会伴随着很多的问题，毕竟想要某个人形态外貌上和剧本人物一致，不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄，比如：
百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float：right；红色盒子里面的文字的字号大小，字体，字体颜色，水平间距，垂直间距这些都需要一点点的写，如果在写的过程中遇见了问题，我们可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，css看右边，看看css属性有没有显示，有没有划掉，有没有黄色报错等等。
这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么，就好像你穿衣服的时候肯定是拿上衣，而不是拿裤子穿在上面，如果有人这么做你会告诉他这样是错的，这个裤子要穿在下面一样。
最后就是总结和举一反三了，一个页面写完之后，不是就是完了，更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样子解决，更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现，做到举一反三。
这些总结可以记录到网上一些博客上，比如博客园、CSDN、51CTO。这样既可以作为自己的一个整理也可以方便了其他人同样查看。
