Div+Css布局教程

正好自己以前写过，奉上最简短的代码，效果已亲测，兼容IE7/8以及Chrome等现代浏览器，代码如下：

<!doctype html>

<html>

<head>

<title>div+css上中下布局</title>

<style>

html,body {height:100%; *overflow:hidden; /* 消除IE7下的横向滚动条 */}

body {margin:0; padding:0; font-size:30px; text-align:center; color:#fff;}

.top ,.nav ,.foot {width:100%; height:100px; position:absolute;}

.top {background:red; top:0;}

.nav {background:blue; top:100px; bottom:100px; height:auto;}

.foot {background:gray; bottom:0;}

</style>

</head>

<body>

<div >这里已经自适应到底部</div>

</body>

</html>

注：IE6不支持，如想完美解决，请使用js动态获取页面高度，然后赋值给nav那个层。

html前端快速布局

1、流动布局（html网页默认的布局方式）
特点：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动布局(float)
特点：默认布局下，块状元素独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。

1、left、center、right三种都设置左浮动

2、设置center宽度为100%

3、设置负边距，left设置负边距为100%，right设置负边距为自身宽度

4、设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度。

css如何使页面缩小后不变

1、打开编辑器，创建一个HTML文档，并且设立一下基本的架构。

2、我们用img标签嵌入一张图片，我们可以看出如果页面缩小，图片不会随着缩小，这样页面就变形了。

3、然后创建CSS文档，并且关联现在的HTML文档。利用LINK标签。

4、* { text-align: center;} img { width: 800px; height: 800px;}为了方便显示，我们先居中图片，并且设置基础的长宽。

5、@media only screen and (max-width: 600px) { img { width: 300px; height: 300px; }}

现在我们在CSS文件后面加上这行代码，指的是页面缩小到宽度为600px后，图片的长宽也跟着缩小，这里要注意比例。

6、然后我们试着缩小页面，就可以发现会跟着缩小，这样就可以制作不变的效果。

快连

快连vpn

快连下载

快连

快连vpn

快连

快连vpn

clash下载

clash

clash官网

谷歌浏览器

谷歌浏览器下载

快连vpn

快连

正文

Div+Css布局教程