CSS布局
2018-12-13 本文已影响0人
_源稚生
布局方式
一列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; margin:0 auto;}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
效果：
二列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:100%; height:600px; margin:0 auto}
.left{ width:38%; height:600px;background:#ccc; float:left;text-align:left; }/*左浮动样式*/
.right{ width:60%; height:600px; background:#FCC; float:right;text-align:left;}/*右浮动样式*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
效果：
三列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
效果：
混合布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ width:960px; height:50px; background:#9F9;clear:both; margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">
<div class="r_sub_left">sub_left
</div>
<div class=" r_sub_right">sub_right
</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果：
布局分析
1、标准流
-
常见块级元素：div,H1~H6,table,p,ol,ul,li（独占一行）
-
常见内联元素：a,span,img,input（当前一行位置不够时被挤到下一行）
2、定位布局
-
static 标准文档流，默认设置的值
-
relative 相对于自己原来的位置进行定位
-
absolute 相对于父类元素（非static）进行定位。父类元素需要是absolute或者relative。
-
fixed 相对于窗口进行定位，不受限于父元素。
-
inherit 继承父元素的定位。
3、z-index
z-index只作用于带有定位属性的元素（position:static除外），普通元素中也存在层级关系（margin-top:-50px）
-
z-index可以设置元素的叠加顺序，但是要依赖定位属性
-
z-index大的元素会覆盖z-index小的元素
-
z-index为auto的元素不参与层级比较
-
z-inde为负值，元素被普通流中的元素覆盖
注意：父元素的层级大于相邻元素的层级 不论层级多小,都可以继承父元素的层级,大于相邻元素层级。
4、盒子模型和定位
-
盒子模型：通过改变盒子的外边或者内边来实现元素的移动
-
定位：通过元素的位置移动来改变出现在网页的相对位置中
例如：实现登录页面水平和垂直居中，div先相对于网页left和top50%fixed定位，然后使用margin-left和margin-top负div宽和高的一半，可以得到居中的登录页面
侧边栏案例案例分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边栏案例分析</title>
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<!--<script src="jquery/jquery-3.3.1.js"></script>-->
<!--<script src="js/bootstrap.js"></script>-->
<style>
* {
padding: 0;
margin: 0;
}
.page {
width: 100%;
height: 1400px;
background: url("image/time.jpg") center top no-repeat;
}
.nav {
width: 160px;
height: 205px;
position: fixed;
left: 0;
top: 50%;
margin-top: -103px;
font-family: 'Microsoft YaHei';
}
.nav-li {
width: 160px;
height: auto;
border-bottom: 1px solid #FFF;
background: #333;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 16px;
cursor: pointer;
}
.tit {
width: 160px;
height: 40px;
}
/*鼠标移动到ul才显示*/
.nav-li:hover ul{
display: block;
}
.nav-li ul{
width: 160px;
height: auto;
display: none;
}
.nav-li ul li{
width: 160px;
height: 40px;
border-bottom: 1px dashed #666;
color: #FFF;
background: grey;
font-size: 16px;
position: relative;
}
.nav-li ul li:hover .list-3{
display: block;
}
.list-3 {
width: 160px;
height: auto;
position: absolute;
left: 160px;
top: 0;
display: none;
}
.list-3Dom {
width: 160px;
height: 40px;
background: #444;
border-bottom: 1px solid #FFF;
text-align: center;
line-height: 40px;
color: #FFF;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">侧边栏导航</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">侧边栏导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">侧边栏导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">侧边栏导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">侧边栏导航</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
</div>
</div>
</body>
效果：
（内容参考慕课网）
