网页设计怎么建盒子_IT百科

这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。准备先准备好你的页面和图片，我们使用这张图片：我们简单的将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，将其水平定位，让它从容器中突出出来。

页面的布局用 width（宽） height(高)比如设置一个盒子是宽120px,高200px,代码是<div style="width:120pxheight:200px">这是一个120*200的盒子</div>，字体大小设置用font 比如字体大小为18像素<font size="18px"></font>。

<html>

<head>

<title>无标题文档</title>

.box{ width:500pxheight:500pxborder:1px solid #F00}

</style>

</head>

<body>

</body>

</html>

这就是一个简单的div盒子，盒子就是所谓的一个个div，N个DIV组成的就是HTML网页。具体的你需要看一些相关书籍学习一下。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11813981.html

网页设计怎么建盒子

发表评论

评论列表（0条）