实验5、 4行4列的页面布局

最新推荐文章于 2023-07-15 23:02:26 发布

欢迎来到对抗路

最新推荐文章于 2023-07-15 23:02:26 发布

阅读量1k

点赞数

分类专栏： Internet与Web编程A 实验

本文链接：https://blog.csdn.net/weixin_46458146/article/details/115442131

版权

Internet与Web编程A 实验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS布局与定位2

要实现界面如下：

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验5</title>
</head>

<body>
	
	<div class="top"></div>
	<div class="midtop"></div>
    <div class="left"></div>
    <div class="midleft"></div>
	<div class="midright"></div>
    <div class="right"></div>
	<div class="end"></div>
	<style>
   
		.top{
			width:855px;height:70px;background: #1E1EC8;margin-bottom: 5px;padding-bottom: 10px;
		}
		.midtop{
			width:855px;height:20px;background: #C81316;margin-bottom: 5px;padding-bottom: 10px;
		}
		.left{
			width:100px;height: 300px; background: #17D05E;float: left;padding-left: 10px;
		}
		.midleft{
			width:300px;height: 300px; background: #F06B0C;float: left;padding-left: 10px;margin-left: 5px;
		}
		.midright{
			width:300px;height: 300px; background: #F06B0C;float: left;padding-left: 10px;margin-left: 5px;
		}
		.right{
			width:100px;height: 300px; background: #17D05E;float: left;padding-left: 10px;margin-left: 5px;
		}
		.end{
			width:855px;height:20px;background: #C81316;margin-top: 310px;padding-bottom: 40px;
		
		}
    
</style>
</body>
</html>

欢迎来到对抗路

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
实验5、 4行4列的页面布局

这里写目录标题要实现界面如下：代码如下<!doctype html><html><head><meta charset="utf-8"><title>实验5</title></head><body> <div class="top"></div> <div class="midtop"></div> <div clas
复制链接

扫一扫