HTML基础_CSS控制布局

最新推荐文章于 2022-02-24 19:53:19 发布

Mr_HuangJW

最新推荐文章于 2022-02-24 19:53:19 发布

阅读量444

点赞数

分类专栏： HTML_基础部分文章标签： HTML css 布局

本文链接：https://blog.csdn.net/Mr_HuangJW/article/details/53398815

版权

HTML_基础部分专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>混合布局</title>
	<style type="text/css">
	body{margin:0;padding:0;}
    .top{height:100px;background:#ccc;}
    .head{height:100px;width:800px;background: blue;margin:0 auto;}
	.main{width:800px;height:400px;margin:0 auto;}
    .left{width:200px;height:400px;background: #ccc;float:left;}
    .middle{width:300px;height:400px;background:yellow;float:left;}
    .right{width:300px;height:400px;float:left;}
    .subL{width:30%;height:400px;background:blue;float:left;}
    .subR{width:70%;height:400px;background:#ccc;float:left;}
    .foot{width:800px;height:100px;margin:0 auto;background:red;}
	</style>
</head>
<body>

<div class="top">
  <div class="head"></div>
</div>

<div class="main">
   <div class="left"></div>
   <div class="middle"></div>	
   <div class="right">
       <div class="subL"></div>
       <div class="subR"></div>
   </div>
</div>
<div class="foot"></div>

</body>
</html>

学习了一些简单的布局方法。

（1）%控制的自适应布局

（2）像素px控制的固定宽、高布局

（3）使用position：absolute ；left：0；top：0及margin：上右下左

（4）body{margin:0;padding:0;}清除初始布局

（5）margin：0 auto 居中

Mr_HuangJW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础_CSS控制布局

混合布局 body{margin:0;padding:0;} .top{height:100px;background:#ccc;} .head{height:100px;width:800px;background: blue;margin:0 auto;} .main{width:800px;height:400px;margin:0 auto;} .left{
复制链接

扫一扫

专栏目录