css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)

最新推荐文章于 2023-04-26 10:49:15 发布

「已注销」

最新推荐文章于 2023-04-26 10:49:15 发布

阅读量370

点赞数 1

分类专栏：前端基础入门 css/css3 文章标签： css

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88822953

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css/css3

15 篇文章 0 订阅

订阅专栏

* 行布局 *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }

        /*基础行布局：指定宽高*/
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }

        /*行布局自适应*/
        .container{
            width: 100%;  /*宽度设置为100%*/
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
        }

        /*行布局自适应限制最大宽、最小宽*/
        .container{
            max-width: 800px;   /*min-width，参考《页面width属性》*/
            width: 100%;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
        }

        /*行布局垂直水平居中：百度*/
        .container{
            width:800px;
            height:200px;
            background: #4c77f2;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-400px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    这是页面内容
</div>
</body>
</html>

【注意】：

min-width属性，设置元素的最小宽度，一旦设置了该属性，那么当页面的宽度小于该元素的宽度时，元素的宽度不会再发生变化。
max-width属性，设置元素的最大宽度。一旦元素设置了该属性，那么当页面的宽度大于该元素的宽度时，元素就这么宽，但是当页面变小时，元素会随着页面进行自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .header{
            width:100%;
            position: fixed;
            height: 40px;
            background: #414141;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px; 
            /*header部分是固定不动的，不设置则主体内部会有部分被遮挡，应该设置跟header同高，这样就不会出现遮挡*/
            text-align: center;
        }      
        .footer{
            width: 800px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="header">这是页面头部</div>
    <div class="container">
        这是页面内容
    </div>
    <div class="footer">这是页面底部</div>
</body>
</html>

* 多列布局 *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
       .left{
           width:60%;
           height: 1000px;
           float:left;
           background: #1a5acd;
           color: #fff;
       }
        .right{
            width: 40%;
            height: 1000px;
            float:right;
            background: #5880f9;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="left">这是页面左侧</div>
    <div class="right">这是页面右侧</div>
</body>
</html>

* 圣杯布局 *

// 适用于网站管理后台

重点：

html代码中 middle部分首先要放在main的最前部分。然后是left,right

1.将三者都 float:left , 再加上一个position:relative

2.middle部分 width:100%占满

3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%

4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 右宽 0 左宽

5.middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-左宽同理，right也要相对定位还原 right:-右宽

6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:800px

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		body{
			/*body内部width、height不能设置为百分比，因为浏览器没有默认的宽高*/
		}

		.header,
		.footer{
			width: 100%;
			height: 60px;
			/*这里高不能设置为百分比，因为父元素没有指定的高值*/
			border: 1px red solid;
		}

		.main{
			/*这边不用设置宽高*/
			padding: 0 250px 0 300px;
			border: 1px blue solid;
			overflow: hidden;
			zoom: 1;
		}

		.left,
		.right,
		.middle{
			position: relative;
			float: left;
			min-height: 800px;
		}

        .middle{
			width: 100%;
            background: pink;
		}

		.left{
			width: 300px;
			margin-left: -100%;
			/*将left部分上移至上一行最左边，但是会掩盖中间文字*/
			left: -300px;
			/*将left块左移最前边*/
            background: #FFDEAD;
		}

		.right{
			width: 250px;
			/*由于是relative布局，所以原位置还会保留，right块处于原位置*/
			margin-left: -250px;
			/*将right块往左移动其自身的宽度，则会展示到上一行右侧*/
			right: -250px;
            background: red;
		}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<!--圣杯布局：中间部分先写-->
		<div class="middle">
			我是中间
		</div>
		<div class="left">
			我是左边
		</div>
		<div class="right">
			我是右边
		</div>
	</div>
	<div class="footer"></div>
</body>
</html>

* 双飞翼布局 *

<!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 charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>双飞翼布局</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{
            border: 1px solid #333;
            background: #ddd;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .sub,
        .main,
        .extra{
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background: #f00;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background: #1a5acd;
        }
        .main{
            width: 100%;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: #30a457;
            word-break: break-all;
        }
        .footer{
            clear: both;
        }
    </style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
<div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
        </p>
    </div>
</div>
<div class="sub">
    <h4>sub</h4>
    <p>
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
    </p>
</div>

<div class="extra">
    <h4>extra</h4>
    <p>
        这是页面的右边
        这是页面的右边
        这是页面的右边
        这是页面的右边
    </p>
</div>
<div class="footer">
    <h4>footer</h4>
</div>
</body>
</html>

【可以选用适当的布局，形成自身独特的布局方式】

「已注销」

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css网页布局基础(行布局、列布局、圣杯布局、双飞翼布局)

目录行布局多列布局圣杯布局双飞翼布局*** 行布局 ***<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body{ ...
复制链接

扫一扫