第六课《学习布局》-编码
一、分别尝试使用 float、position、flex 实现如下需求
1.实现一个两栏布局,左侧占百分之三十宽度,右侧占百分之七十宽度
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
float样式:
body {
margin: 0;
}
#left {
float: left;
width: 30%;
height: 300px;
background-color: aqua;
}
#right {
float: left;
width: 70%;
height: 300px;
background-color: bisque;
}
position样式:
body {
margin: 0;
}
#container {
position: relative;
}
#left {
position: absolute;
width: 30%;
height: 300px;
background-color: aqua;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 300px;
background-color: bisque;
}
flex样式:
body {
margin: 0;
}
#container {
display: flex;
}
#left {
height: 300px;
background-color: aqua;
flex: 3;
}
#right {
height: 300px;
background-color: bisque;
flex: 7;
}
一个坑需要注意:在使用flex
布局时,浏览器对flex
缩写属性和flex-flow
属性的渲染有不一致的地方,例如上边这个例子中,如果用flex:3
和flex:7
设置比例,左右两列宽度分别为432px和1008px,与其他方法实现的效果相同。但如果用flex-grow:3
和flex-grow:7
来设置,左右两列的实际宽度438px和1002px,与其他方法实现的效果不一致。因此应该使用缩写属性设置。
2.实现一个两栏布局,左侧固定宽度,右侧根据浏览宽度进行自适应变化
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
float样式:
body {
margin: 0;
}
#left {
float: left;
width: 400px;
height: 300px;
background-color: aqua;
}
#right {
margin-left: 400px;
width: 100%;
height: 300px;
background-color: bisque;
}
position样式:
body {
margin: 0;
}
#container {
position: relative;
}
#left {
position: absolute;
width: 400px;
height: 300px;
background-color: aqua;
}
#right {
margin-left: 400px;
width: 100%;
height: 300px;
background-color: bisque;
}
flex样式:
body {
margin: 0;
}
#container {
display: flex;
}
#left {
flex-basis: 400px;
height: 300px;
background-color: aqua;
}
#right {
flex: 1;
height: 300px;
background-color: bisque;
}
3.实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变化
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
float样式:
body {
margin: 0;
}
#container {
min-width: 800px;
}
#left {
float: left;
width: calc(100% - 500px);
height: 300px;
background-color: aqua;
}
#right {
float: left;
width: 500px;
height: 300px;
background-color: bisque;
}
position样式:
body {
margin: 0;
}
#container {
position: relative;
min-width: 800px;
}
#left {
margin-right: 500px;
height: 300px;
background-color: aqua;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 300px;
background-color: bisque;
}
flex样式:
body {
margin: 0;
}
#container {
display: flex;
}
#left {
flex-grow: 1;
height: 300px;
background-color: aqua;
}
#right {
flex-basis: 500px;
height: 300px;
background-color: bisque;
}
4.实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="container">
<div id="middle-wrap">
<div id="middle">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
float样式:
body {
margin: 0;
min-width: 1000px;
}
#middle-wrap {
float: left;
width: 100%;
}
#middle {
margin-left: 300px;
margin-right: 400px;
height: 300px;
background-color: darksalmon;
}
#left {
float: left;
margin-left: -100%;
width: 300px;
height: 300px;
background-color: aqua;
}
#right {
float: left;
margin-left: -400px;
width: 400px;
height: 300px;
background-color: bisque;
}
position样式:
body {
margin: 0;
}
#container {
padding-left: 300px;
padding-right: 400px;
min-width: 300px;
}
#middle {
float: left;
width: 100%;
height: 300px;
background-color: darksalmon;
}
#left {
float: left;
margin-left: -100%;
position: relative;
right: 300px;
width: 300px;
height: 300px;
background-color: aqua;
}
#right {
float: left;
margin-right: -400px;
width: 400px;
height: 300px;
background-color: bisque;
}
flex样式:
body {
margin: 0;
}
#container {
display: flex;
min-width: 1000px;
}
#middle-wrap {
flex: 1;
order: 2;
height: 300px;
background-color: darksalmon;
}
#left {
width: 300px;
height: 300px;
background-color: aqua;
}
#right {
order: 3;
width: 400px;
height: 300px;
background-color: bisque;
}
5.实现一个三栏布局,左侧固定宽度,中间固定宽度,右侧根据浏览器宽度变化而自适应变化
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
</body>
</html>
float样式:
body {
margin: 0;
min-width: 1000px;
}
#left {
float: left;
width: 300px;
height: 300px;
background-color: aqua;
}
#middle {
float: left;
width: 400px;
height: 300px;
background-color: darksalmon;
}
#right {
margin-left: 700px;
height: 300px;
background-color: bisque;
}
position样式:
body {
margin: 0;
}
#container {
position: relative;
}
#left {
position: absolute;
width: 300px;
height: 300px;
background-color: aqua;
}
#middle {
position: absolute;
top: 0;
left: 300px;
width: 400px;
height: 300px;
background-color: darksalmon;
}
#right {
margin-left: 700px;
min-width: 300px;
height: 300px;
background-color: bisque;
}
flex样式:
body {
margin: 0;
}
#container {
display: flex;
}
#left {
width: 300px;
height: 300px;
background-color: aqua;
}
#middle {
width: 400px;
height: 300px;
background-color: darksalmon;
}
#right {
flex: 1;
height: 300px;
background-color: bisque;
}
二、参考如下设计稿实现HTML页面及CSS样式
设计稿描述:
- 设计稿分为头部,中间的Banner,主导航,内容区域,底部
- 头部区域为100%宽的一个深色背景,头部中间有一块960px的定宽居中区域,里面包括了左边的Logo和右上角导航
- Banner为100%宽的区块,中间右下方有banner轮显的当前图片数字的示例,其中正在显示的图片对应的数字有特殊样式(注意不需要实现轮显banner的业务逻辑,只是按照设计稿做静态样式)
- 主导航区域,有一个100%宽的灰色线条,线条之上,在中间960px区域是导航菜单,当前正在浏览页对应的菜单有特殊样式
- 主要内容区域,宽度为960px,里面每个内容都有至少80px的padding,每一个内容的宽度均为自适应,可以使用flex布局
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class 6</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="header-wrap" class="wrap">
<h1>Logo</h1>
<ul>
<li><a href="#">Github</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</header>
<section>
<div id="banner-wrap" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</section>
<nav>
<div id="nav-wrap" class="wrap">
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>ABOUT</li>
</ul>
</div>
</nav>
<main>
<div id="main-wrap" class="wrap">
<article class="main-article"><p>This is content 1</p></article>
<article class="main-article"><p>Maybe content 2</p></article>
<article><p>content 3</p></article>
<article><p>content 4</p></article>
<article><p>content 5</p></article>
<article><p>content 6</p></article>
<article><p>content 7</p></article>
<article><p>content 8</p></article>
<article><p>content 9</p></article>
<article><p>content 10</p></article>
</div>
</main>
<footer>
<p>© 2018 ife.baidu.com</p>
</footer>
</body>
</html>
CSS:
/*reset*/
body,h1,ul,p,a {
margin: 0;
padding: 0;
font: 400 14px/1.5 sans-serif;
}
ul {
list-style: none;
}
/*public style*/
body {
min-width: 1000px; /*保证窗口缩放时布局不被破坏*/
}
li {
display: inline-block;
}
.wrap {
margin: 0 auto;
width: 960px;
}
/*header style*/
header {
background-color:#323232;
}
#header-wrap {
height: 80px;
}
h1 {
display: inline-block;
line-height: 80px;
font-size: 30px;
color: #fff;
}
#header-wrap ul {
float: right;
padding-top: 10px;
}
#header-wrap li {
margin-left: 10px;
}
#header-wrap a {
color: #fff;
}
/*banner style*/
section {
background-color: #32cd32;
}
#banner-wrap {
position: relative;
height: 300px;
}
#banner-wrap ul {
position: absolute;
right: 0;
bottom: 10px;
}
#banner-wrap li {
padding: 4px 8px;
border: 1px solid #696969;
color: #696969;
background-color: #90ee90;
}
#banner-wrap li:nth-of-type(2) {
padding-top: 18px;
background-color: #f0fff0;
}
/*nav style*/
nav {
border-bottom: 1px solid #c0c0c0;
}
#nav-wrap {
position: relative;
height: 70px;
}
#nav-wrap ul {
position: absolute;
bottom: -1px; /*使li元素的边框压在父元素边框上*/
font-size: 0; /*消除inline-block元素之间的空白空间*/
}
#nav-wrap li {
padding: 14px 25px 8px;
border: 1px solid #c0c0c0;
border-radius: 15px 15px 0 0;
font-size: 14px;
background-color: #e6e6e6;
}
#nav-wrap li:nth-of-type(1) {
border-bottom: 1px solid #fff;
background-color:#fff;
}
/*main style*/
#main-wrap {
display: flex;
flex-wrap: wrap;
padding-bottom: 20px;
}
article {
flex: 1;
margin-top: 10px;
margin-right: 10px;
padding: 80px;
border: 1px solid #c0c0c0;
text-align: center;
}
.main-article {
flex: 100px;
}
/*footer style*/
footer {
padding-top: 15px;
height: 100px;
background-color: #808080;
}
footer p {
text-align: center;
color: #fff;
}