1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便 *** 作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<linkhref="main.css"type="text/css"rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1"></div>
<divid="top2"></div>
<divid="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:FF33FF}
top{background:FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
top1{background:66FFFFheight:50pxwidth:800px}
top2{background:FF00CCheight:400pxwidth:800px}
top3{background:FF9933height:550pxwidth:800px}
定义好了我们打开预谈扮览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框宏侍灶，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我蔽扮的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我截图的照片</div>
<divid="top2">
<divclass=""></div>
<divclass=""></div>
</div>
<divid="top3">
<divclass="jingyan"></div>
<divclass="jingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:FF33FF}
top{background:FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
top1{background:66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}
top2{background:FF00CCheight:400pxwidth:800px}
top3{background:FF9933height:550pxwidth:800px}
.{background:FF6666height:380pxwidth:380pxfloat:leftmargin:10px}
.jingyan{background:FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我老婆的照片</div>
<divid="top2">
<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>
<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>
</div>
<divid="top3">
<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
刚开始学，以下是自己的见解：我都是查看源代码区别的（表逗尺格结构：table、框架：frame、div和css）不知是否正确，求腔指链指正DIV+CSS比较灵活，在样式上可以独立设计在css文件中，这一点在我们浏览网站（例如手机WAP上网）那些样式文件就不加载，而且布局上位置灵活性大，标签也很齐全。表格做网站很少了，一般小型网站可以用表格做，位置可塑性较差，运用较简单。框架页面只是把几个页面组合到一个页面中，在伍孙当前页面的某个区域显示指向而已，只是布局的一部分，设计网页的话还是div+css吧。
我一般页面写都是用DW做的，编辑过很多DIV CSS页面，感觉还不错。不过我强烈推荐你使用firefox的web-developer插件，这个在查找div css错误时非常好用，毕竟再所见即所得的编辑器也有不足的地方，两者配合使吵悄用非常好。
另外针对IE对CSS的支持问题，你可以安装IETester软芹竖件，这个软件可升首渣以从IE5到IE8分别显示，可以让你查看在各种IE版本下的显示，非常适合于查找各种版本的错误信息。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）