【Java Web基础】(四)学习使用DIV+CSS布局界面

最新推荐文章于 2022-03-21 22:13:20 发布

passer__jw767

最新推荐文章于 2022-03-21 22:13:20 发布

阅读量501

点赞数

分类专栏： Java Web基础

本文链接：https://blog.csdn.net/passer__jw767/article/details/108875295

版权

Java Web基础专栏收录该内容

25 篇文章 4 订阅

订阅专栏

从课本上第一次学习如何进行DIV+CSS布局界面，中间一层的盒子是连续嵌套的，嵌套的逻辑有学习到

HTML文件中的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冲冲冲</title>

<style type="text/css">
	@import url("Myfirst.css");
</style>

</head>
<body>
	<div class="header">header</div>
	<div class="contain">
		<div class="mainbg">
			<div class="right">
				<div class="text">
					right<br>
					1<br>
					1<br>
					1<br>
					1<br>
					1
				</div>
			</div>
			<div class="left">
				<div class="text">
					left
				</div>
			</div>
		</div>	
	</div>
	<div class="footer">footer</div>
</body>
</html>

CSS中的代码：

@charset "UTF-8";
body{
	background:#999;
	text-align:center;
	color:#333;
	font-family:arial,verdana,sana-serif;
}
.header{
	width:776px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	background:#EEE;
	height:60px;
	text-align:left;
}
.contain{
	margin-left:auto;
	margin-right:auto;
	width:776px;
}
.mainbg{
	width:776px;
	padding:0px;
	background:#60A179;
	float:left;
}
.right{
	float:right;
	margin:2px 0px 2px 0px;
	padding:0px;
	width:574px;
	background:#ccd2de;
	text-align:left;
}
.left{
	float:left;
	margin:2px 2px 0px 0px;
	padding:0px;
	background:#F2F3F7;
	width:200px;
	text-align:left;
}
.footer{
	clear:both;
	width:776px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	background:#EEE;
	height:60px;
}
.text{
	margin:0px;
	padding:20px;
}

在这里插入图片描述中间的嵌套逻辑：
contain<–mainbg(图中的抹茶绿的那一点就是用background来设置的)<–right&&left
right和left中又分别嵌套了一个text

passer__jw767

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Java Web基础】(四)学习使用DIV+CSS布局界面

从课本上第一次学习如何进行DIV+CSS布局界面，中间一层的盒子是连续嵌套的，嵌套的逻辑有学习到HTML文件中的代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>冲冲冲</
复制链接

扫一扫