java | (二十二)页面布局；javaScript初学

最新推荐文章于 2024-05-04 14:17:15 发布

墨色幽灵

最新推荐文章于 2024-05-04 14:17:15 发布

阅读量416

点赞数 2

分类专栏： java 文章标签： java css html

本文链接：https://blog.csdn.net/weixin_42953201/article/details/120251346

版权

目录分类行布局列布局两列布局三列布局混合布局圣杯布局双飞翼布局分类行布局多列布局圣杯布局双飞翼布局行布局<!doctype html><html><head><meta http-equiv="Content" content="text/html" charset="utf-8"/><style> body{ margin:0;padding:0;color:#fff;text-align:center; }

摘要由CSDN通过智能技术生成

分类

行布局
多列布局
圣杯布局
双飞翼布局

行布局

<!doctype html>
<html>
<head>
<meta http-equiv="Content" content="text/html" charset="utf-8"/>
<style>
	body{
     
		margin:0;padding:0;color:#fff;text-align:center;
	}
	.header{
     
		width:800px;height:50px;background:#333;margin:0 auto;
		line-height:50px;position:fixed;
	}
	.banner{
     
		width:800px;height:300px;background:#30a457;margin:0 auto;
		padding-top:50px;
	}
	.container{
     
		width:800px;height:1000px;background:#39F;
		margin:0 auto;
	}
	.foot{
     
		width:800px;height:300px;background:#9C3;
		margin:0 auto;line-height:100px;
	}
		
</style> 
</head>
<body>
	<div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner图</div>
    <div class="container">这是页面内容</div>
    <div class="foot">这是页面尾部</div>
</body>
</html>

展示：
请添加图片描述

列布局

两列布局

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>css演示</title>
    <style type="text/css">
		body{
     
			margin:0;padding:0;color:#fff;
		}
		.pre{
     
			width:90%;height:1000px;margin:0 auto;
		}
		.left{
     
			width:60%;height:1000px;background:#0F0;float:left;
		}
		.right{
     
			width:40%;height:1000px;background:#969;float:right;
		}

	</style>

</head>
<body>
	<div class="pre">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是页面右侧</div>
    </div>


</body>
<html>

展示
在这里插入图片描述

三列布局

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>css演示</title>
    <style type="text/css">
		body{
     
			margin:0;padding:0;color:#fff;
		}
		.pre{
     
			width:100%;height:1000px;margin:0 auto;
		}
		.left{
     
			width:30%;height:1000px;background:#0F0;float:left;
		}
		.middle{
     
			width:20%;height:1000px;background:#F6C;float:right;
		}
		.right{
     
			width:50%;height:1000px;background:#969;float:left;
		}

	</style>

</head>
<body>
	<div class="pre">
        <div class="left">这是页面的左侧</div>
        <div class="middle">这是页面中间</div>
        <div class="right">这是页面右侧</div>
    </div>


</body>
<html>

展示：
在这里插入图片描述

混合布局

将上述两种布局混合使用

圣杯布局

在这里插入图片描述
并且，中间栏要在浏览器中优先展示渲染
允许任意列的高度最高

<!document html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>css演示</title>
    <style type="text/css">
		*{
     
			margin:0;padding:0;
		}
		body{
     
			min-width:700px;color:#fff;
		}
		.pre{
     
			width:100%;margin:0 auto;
			padding:0 220px 0 200px;
		}
		.header,.foot{
     
			float

最低0.47元/天解锁文章

墨色幽灵

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
java | (二十二)页面布局；javaScript初学

目录分类行布局列布局两列布局三列布局混合布局圣杯布局双飞翼布局分类行布局多列布局圣杯布局双飞翼布局行布局<!doctype html><html><head><meta http-equiv="Content" content="text/html" charset="utf-8"/><style> body{ margin:0;padding:0;color:#fff;text-align:center; }
复制链接

扫一扫