div布局模板？divcss布局模板

编程之家2026-06-061122次浏览

今天给各位分享div布局模板的知识，其中也会对divcss布局模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

切割网页后怎么变成div+css布局

PS是设计工具出平面设计稿用的。不推荐使用PS来切片转HTML页面，直接生成的页面，就是满屏幕的表格，把你做的切片放在每个小方格里而已。

我的方法是：制作布局前，在PS当中打开标尺，设置单位为：像素，然后添加辅助线吧！

横向纵向的辅助线，把你的平面稿布局给分开，分析完你的平面稿以后，在开始制作页面。

要用DW制作页面，其中平面稿中的页面布局通过DIV+CSS来实现，然后再把必要的图片通过PS切出来，加入到网页当中。

原则：1符合web标准 2用尽可能少的图片，来达到原来平面设计稿的效果。3充分考虑到用户的使用习惯和阅读习惯

布局当中，用到图片的技巧比较多，比较细碎，不能一一列举了。简单说几个：

1 UL列表前面的小黑点，可以替换成图片

2背景图片可以切出来一小块，利用平铺来铺满指定区域

3按钮图片要有多个状态，可以设计多个图片按钮来达到效果

4至于用图片替换链接文字之类的，楼主随着CSS技能的提高慢慢就会掌握了，在此就不再赘述了。

这些都是静态页面的部分，不涉及到很多的编程和交互特效。如果需要特效或者为页面润色，可以用flash，也可以用jQuery来为你的页面增色，需要有编程基础。

制作静态页面不只是需要PS设计能力，还要有HTML,CSS的基础知识，两者结合在一起才能完成静态页面的设计和制作。从楼主的提问大概看出，楼主对于HTML方面的知识比较欠缺。建议去找一套专门的页面布局教程看一看。

下面随手搜了一个教程网站，仅供参考

怎么进行divcss网页布局

在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。

做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">使它受到main.css控制

<html>

<head>

</head>

<body>

</body>

</html>

下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。

下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层

<html>

<head>

<linkrel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css"type="text/css"rel="stylesheet">

</head>

<body>

<divid="top">

<divid="top1"></div>

<divid="top2"></div>

<divid="top3"></div>

</div>

</body>

</html>

布局好后我们需要去定义属性了，这里我只是简单的定义了一下

*{background:FF33FF}

top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}

top1{background:66FFFF;height:50px;width:800px;}

top2{background:FF00CC;height:400px;width:800px}

top3{background:FF9933;height:550px;width:800px}

定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。

其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么

<html>

<head>

</head>

<body>

<divid="top">

<divid="top1">这里都是我截图的照片</div>

<divid="top2">

<divclass=""></div>

</div>

<divid="top3">

<divclass="jingyan"></div>

</div>

</body>

</html>

下面我们再去定义他的属性，当然我只是简单的定义一下

*{background:FF33FF}

top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}

top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}

top2{background:FF00CC;height:400px;width:800px}

top3{background:FF9933;height:550px;width:800px}

.{background:FF6666;height:380px;width:380px;float:left;margin:10px}

.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}

因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。

<html>

<head>

</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>

</body>

</html>

如果图片不在同一层目录，就需要连接到图片地址

这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。

下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

怎么用div布局加css样式做网页

方法/步骤

在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。

做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制

<html>

<head>

</head>

<body>

</body>

</html>

下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。

下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层

<html>

<head>

</head>

<body>

</div>

</body>

</html>

布局好后我们需要去定义属性了，这里我只是简单的定义了一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px;}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。

其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么

<html>

<head>

</head>

<body>

<div id="top1">这里都是我截图的照片</div>

</div>

</div>

</body>

</html>

下面我们再去定义他的属性，当然我只是简单的定义一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}

.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}

因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。

<html>

<head>

</head>

<body>

<div id="top1">这里都是我老婆的照片</div>

</div>

</div>

</body>

</html>

如果图片不在同一层目录，就需要连接到图片地址

这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。

下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

div布局模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于divcss布局模板、div布局模板的信息别忘了在本站进行查找哦。

java jdk官网 java官方网站lol抽奖？2026抽奖lol