web初探-css-宽度布局

最新推荐文章于 2022-09-16 22:32:53 发布

哥兜兜里有泡泡糖

最新推荐文章于 2022-09-16 22:32:53 发布

阅读量145

点赞数

分类专栏：其他文章标签： web css 布局

本文链接：https://blog.csdn.net/weixin_44512194/article/details/98476478

版权

其他专栏收录该内容

105 篇文章 5 订阅

订阅专栏

布局有很多种，下面是最简单的一种，看图：
在这里插入图片描述

固定宽度布局

绝对定位法
比较麻烦，就不说了

浮动法
一般都是使用浮动法
储存代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
div{
border:red 1px solid;
margin:20px auto 20px auto;
padding: 10px 10px 10px 10px ;
}

#head,#middle,#foot{
width :900px;
text-align: center;
}
#middle{
border:0px;
position:relative;
height :500px;
}

#left{
position:absolute;
width:600px;
flaot:left;
height:400px;
}
#right{
height:200px;
margin-left:700px;
flaot:right;
}
</style>
</head>
<body>
<div id = "head">头部</div>
<div id = "middle">中间
	<div id = "left">左边</div>
	<div id = "right">右边</div>
</div>
<div id = "foot">尾部</div>
</body>
</html>

变框布局

就是使用百分比值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哥兜兜里有泡泡糖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web初探-css-宽度布局

布局有很多种，下面是最简单的一种，看图：绝对定位法比较麻烦，就不说了浮动法一般都是使用浮动法储存代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type = "t...
复制链接

扫一扫