css布局__慕课笔记

最新推荐文章于 2024-09-14 08:09:14 发布

jieyan__

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量539

点赞数

分类专栏： css 文章标签：浮动布局网站 css

本文链接：https://blog.csdn.net/jieyan__/article/details/44131573

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里先写布局：

了解布局首先要了解float浮动
css中的float浮动

一列布局：
一列布局通常是一个网站的主页，简单的文字和图片。

两列布局：

css:

.body{maegin:0;padding:0}
/*清除body样式*/
.main{width:800px;height:500px;margin:0 auto}
/*限定 高度 宽度并且居中*/
.left{width:20%;height:500px;float:left;background:#aaa}
.right{width:80%;height:500px;float:right;background:#bbb}
/*宽度百分比 利于放大缩小窗口*/

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/layout.css">
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

三列布局：同上（三块同时浮动）

.body{maegin:0;padding:0} 

/清除body样式/ 

.main{width:800px;margin:0 auto} 

/限定 高度 宽度并且居中/ 

.left{width:33%;height:500px;background:#aaa;float:left} 

.middle{width:33%;height:500px;background:#ccc;float:left} 

.right{width:33%;height:500px;background:#eee;float:left} 

/宽度百分比 利于放大缩小窗口/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/layout.css">
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>

特殊的三列布局：（左右固定中间自适应）

.body{margin:0;padding:0} 

/清除body样式/ 

.main{width:800px;margin:0 auto} 

/限定 高度 宽度并且居中/ 

.left{width:150px;height:500px;background:#aaa;position:absolute;left:0;top:0} 

.middle{height:500px;background:#ccc;margin:0 300px 0 150px} 

.right{width:300px;height:500px;background:#eee;position:absolute;right:0;top:0} 

/宽度百分比 利于放大缩小窗口/

混合布局：

.body{margin:0;padding:0}
/*清除body样式*/
.head{width:100%;height:50px;position:absolute;top:0;background:blue}
.main{width:80%;position:absolute;top:50px;left:10%;right:10%}
/*限定 高度 宽度并且居中*/
.left{width:150px;height:500px;background:#aaa;position:absolute;top:0;left:0}
.middle{height:500px;background:#ccc;margin:0 300px 0 150px}
.right{width:300px;height:500px;background:#eee;position:absolute;top:0;right:0}
.foot{width:80%;height:100px;background:blue;position:absolute;top:550px;left:10%}
/*宽度百分比 利于放大缩小窗口*/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/layout.css">
</head>
<body class="body">
<div class="head"></div>
<<div class="main">
<div class="left">150px</div>
<div class="middle">自适应宽度的我有一个好朋友，他叫陈涵，身材苗条，个子也不高，常常佩戴着一副眼镜在校园里耍（commander）酷，虽然讲是同个学校，但他毕竟比我小两届，他有个地方让我很疑惑，就是不太喜欢爱笑，我也没见过他笑的样子，情绪看上去总是很低落。不过让我最...</div>
<div class="right">300px</div>
</div>
<div class="foot"></div>
</body>
</html>