您的位置：首页 > Web前端 > CSS

利用CSS进行网页布局~

2014-06-02 23:00 399 查看

今天花了一小点的时间大致学习了一下CSS进行网页布局的课程，课程来至于“慕课网”，个人觉得还是蛮实用的~~

关于这门课的主题，简单明了的先列出来：元素之间的三种关系： 1、相邻 2、嵌套 3、叠加我们要做的就是摆放元素的位置。

先举两个例子：

1.三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head>

<body>

<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>

效果如下：

在这里简要说明一下，position:absolute是将div的位置固定的，也就是用浏览器的绝对位置的显示div。

2.混合布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:gray;height:80px;width:610px;}
.main{height:800px;background:red}
.left{width:200px;height:800px;background:blue;float:left;position:absolute;}
.right{width:400px;height:800px;background:green;float:right;position:absolute;left: 210px;}
.foot{width:610px;background:orange;clear:both;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>

效果如下：

这里关于foot的清除浮动，一般有三种办法，一个是在main中添加高度熟悉。一个是在main中设置overflow:hidden。再一个就是在foot中添加clear:both。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航