css布局

最新推荐文章于 2024-05-14 18:25:49 发布

豆豆_Q

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量278

点赞数 1

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/Homing_qu/article/details/63801680

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS布局

1、正常文档流

a) 正常文档流:在不进行特殊的定位和布局的前提下，HTML元素的布局遵循正常文档流，即块级元素，每个块级元素占一行，追加的另起一行；行内元素，追加时紧跟在后面，同一行内可以存在多了行内元素；

i. 实例:

<html>
	<head>
		<title>盒子模式</title>
		<meta content="text/html" http-equiv="content-type" charset="UTF-8">
		
		<style type="text/css">
			*{margin:0}
			#container1{
				background-color:#cccccc;
				padding:5px;
				
			}
			#container2{
				background-color:green;
				padding:5px;
				
			}
			#a1{
				background-color:#2F4F4F;
				color:white;
			}
			#a2{
				background-color: 	#483D8B;
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="container1">元素1</div>
		<div id="container2">元素2</div>
		<a id="a1">元素3</a>
		<a id="a2">元素4</a>
		<div id="container2">元素5</div>
		<a id="a2">元素6</a>
	</body>
</html>

b) 浮动布局:通过对元素使用浮动布局，可以使元素脱离正常文档流，会使元素向左或向右移动，其周围的元素也会重新的排列。Float(浮动)往往用于图像、文字环绕效果；clear用于清除浮动布局；

i. 实例:

<html>
	<head>
		<title>图片浮动演示</title>
	</head>
	<style>
		img{
			float:left;
			margin-top:0px;
		}
	</style>
	<body>
		<p><img src = "1.gif"/></p>
		<p id = "p1">我欲乘风归去，斜风细雨不须归。又欲做船去，船迟又遇打头风，屋漏偏逢连夜雨。人生郁郁不得志，更能消几番风雨，此事古难全，只好驭龟去。</p>
		<p id = "p2">

					龟虽寿

					作者：曹操
				神龟虽寿，犹有竟时。
				腾蛇乘雾，终为土灰。
				老骥伏枥，志在千里。
				烈士暮年，壮心不已。
				盈缩之期，不但在天。
				养怡之福，可得永年。
				幸甚至哉，歌以咏志。
		</p>
	</body>
</html>

2、定位布局

a) Static定位:HTML元素默认为没有定位，元素的排列遵循正常文档流，静态定位的元素不会受到top、bottom、left、right的影响；

b) Fixed定位:固定定位，元素的位置相对于浏览器窗口的位置固定，即使窗口滚动，元素也不会移动；

i. 实例:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
    <title>CSS固定定位</title>
    <style>
        #first
        {
            width:120px;
            height:600px;
            border:1px solid gray;
            line-height:600px;
            background-color:#B7F1FF;
        }
        #second
        {
            position:fixed;/*设置元素为固定定位*/
            top:10px;/*距离浏览器顶部30px*/
            left:160px;/*举例浏览器左部160px*/
			
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:#FA16C9;
        }
    </style>
</head>
<body>
    <div id="first">无定位的div元素</div>
    <div id="second">固定定位的div元素</div>
</body></html>

c) Relative定位:相对于元素正常位置的相对位置的定位；相对定位元素经常被用来做绝对定位的容器；

i. 实例:

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html" charset="utf-8"/>
    <title>CSS相对定位</title>
    <style type="text/css">
        #father
        {
            margin-top:30px;
            margin-left:30px;
            border:1px solid silver;
            background-color: #B7F1FF;
        }
        #father div
        {
            width:100px;
            height:60px;
            margin:10px;
            border:1px solid silver;
            background-color:#FA16C9;
        }
        #son2
        {
            /*这里设置son2的定位方式*/
			position:relative;
			left:5px;
			top:10px;

        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>
</html>

d) Absolute定位:绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有定位的父元素，那么该元素的位置为相对于<html>的位置；

i. 实例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS绝对定位</title>
    <style type="text/css">
        #father
        {
            padding:15px;
            background-color:#09F;
            border:1px solid silver;
			
			position:relative;
			top:0px;
			left:0px;
        }
        #father div
        {
            padding:10px;
            background-color:#FCD568;
            border:1px dashed red;
        }
        #son2
        {
            /*在这里添加son2的定位方式*/
			position:absolute;
			top:0px;
			left:0px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>

e) 元素的重叠:通过使用z-index属性，可以设置元素的重叠顺序，属性值为正数或负数；

3、布局的分类

a) 单列布局:单列布局一般用于制作网页的首页，如百度或360，只有一列；

b) 两列布局:两列布局多用于列表、序列类型的网站；

c) 三列布局:多用于展示，如购物网站或是电影网等；

d) 混合布局

实例:

<html>
	<head>
		<title>后台管理信息</title>
		<meta charset = "utf - 8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
		<style type = "text/css">
			#top{
				position:fixed;
				top:0px;
				left:0px;
				height:80px;
				width:1920px;
				background:#33a3dc;
			}
			#right{
				position:fixed;
				top:80px;
				left:190px;
				width:1750px;
				height:900px;
				background:#d3d7d4;
			}
			img{
				position:absolute;
				top:10px;
				left:20px;
				width: 50px;
				height: 50px;
				background: #7fee1d;
				-moz-border-radius: 60px;
				-webkit-border-radius: 60px;
				border-radius: 60px;	
			}
			#title{
				position:absolute;
				left:80px;
				font-size:14px;
				font-family:宋体;
				color:#fffffb;
			}
			#tool{
				position:absolute;
				top:30px;
				left:280px;
			}
			input{
				height:40px;
				width:100px;
				font-size:10px;
			}
			#stage{
				background-color:green;
			}
			#clear{
				background-color:#009ad6;
			}
			#exit{
				background-color:red;
			}
			#fu,#fs{
				position:absolute;
				top:16px;
				left:38px;
			}
		</style>
		<script src = "jquery-3.1.1.js"></script>
		<script type = "text/javascript">
		
		</script>	
	</head>
	<body>
		<div id = "top">
			<div id = "circle" ><img src = "images/y.jpg" /></div>
			<div id = "title"><h1 id = "header">后台管理中心</h1></div>
			<div id = "tool">
				<a href = "#" id = "stage"><span class="fa fa-home"></span> 前台首页</a>  
				<a href = "#" id = "clear"><span class="fa fa-wrench"></span> 清理缓存</a>  
				<a href = "#" id = "exit"><span class="fa fa-power-off"></span> 退出登录</a>
			</div>
		</div>
		
		<div id = "left_top" style = "position:fixed;top:80px;left:0px;width:190px;height:50px;background-color:yellow;text-align:center;">
			<div id = "list">
			<span class="fa fa-th-list margin-middle" id = "fu"></span>
			<h1 id = "header2"style = "font-size:18px;">菜单列表</h1>
			</div>
		</div>
		
		<div id = "left_bottom" style = "position:fixed;top:130px;left:0px;width:190px;height:900px;background-color:green;">
			<span class="fa fa-user margin-middle" id = "fs"></span>
			<h1 style="font-size:18px;text-align:center;">基本设置</h1><hr></hr>
			<ul style = "left:30px;">
				<li><a href = "#">网站设置</a></li>
				<li><a href = "#">修改密码</a></li>
				<li><a href = "#">单页管理</a></li>
				<li><a href = "#">首页轮播</a></li>
				<li><a href = "#">留言管理</a></li>
				<li><a href = "#">栏目管理</a></li>
			</ul>
			<hr></hr>
			<span class = "fa fa-pencil-square-o margin-middle" id = "fl" style = "position:absolute;top:227px;left:38px;"></span>
			<h1 style="font-size:18px;text-align:center;">栏目管理</h1><hr></hr>
			<ul style = "left:30px;">
				<li><a href = "#">内容管理</a></li>
				<li><a href = "#">添加内容</a></li>
				<li><a href = "#">分类管理</a></li>
			</ul>
		</div>
		<div id = "right_top" style = "position:fixed;left:190px;top:80px;width:1750px;height:50px;background-color:pink;">
			<div style= "position:absolute;left:30px;top:20px;">
				<a href = "#"><span class="fa fa-home"></span>首页</a>
				<span style = "color:#fffffb">/</span>
				<a href = "#"><span class="fa fa-home"></span>网站信息</a>
			</div>
		</div>
		<div id = "right_bottom">
			
		</div>
	</body>
</html>

豆豆_Q

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局

CSS布局1、正常文档流a) 正常文档流:在不进行特殊的定位和布局的前提下，HTML元素的布局遵循正常文档流，即块级元素，每个块级元素占一行，追加的另起一行；行内元素，追加时紧跟在后面，同一行内可以存在多了行内元素；i. 实例: 盒子模式 *{margin:0} #container1{ background-color:#cccccc
复制链接

扫一扫

专栏目录