网页设计怎么建盒子

这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。准备先准备好你的页面和图片，我们使用这张图片：我们简单的将HTML写成这样: <p id="container"><img id="logo" src="logo.png" alt="Lee Munroe" /></p>CSS样式可能会是这个样子的:body{background:#999} #container{ width:960pxbackground:#fffmargin:20px autopadding:10px}下面是一个效果预览：设置为相对定位当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：#container{ width:960pxbackground:#fffmargin:20px autopadding:10pxposition:relative}将它定位到盒子的外面现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。

先在body中创建div（2）在 head中写入style（3）在style中写入盒子的边框宽度、线条形式、颜色（4）打开网页查看效果（5）盒子创建完成上面创建的盒子 只有一个盒子 没有宽度 没有高度下面来编辑盒子2、编辑盒子（1）添加盒子宽度打开页面查看效果刚才没编辑宽度的时候 宽度是页面的100% 现在编辑后 明显看到已经有了宽度（2）添加盒子高度打开页面查看效果这样既可以看到盒子既有宽度 又有高度3.调整盒子外部线条样式盒子线条有三个元素 按顺序分别是 宽度、样式、颜色（1）更改宽度在border后三个元素第一个元素更改由上部代码及效果 可以看出像素值越大 边框线条越宽（2）编辑线条样式solid为实线double为双实线dotted为点虚线dashed为线段虚线（3）更改线条颜色通过更改border第三个元素 更换颜色4、多个盒子进行编辑在body中创建多个div 然后进行命名（1）命名创建三个不同的盒子 为三个不同的盒子分别取名字（分别取名字，是为了分开编辑，若三个盒子一样相同效果，可不用取名字，直接创建盒子即可）（2）分别编辑在head中分别编辑

---