Skip to content

Commit

Permalink
add files of task12
Browse files Browse the repository at this point in the history
  • Loading branch information
@cttin
cttin committed Jul 20, 2016
1 parent a665364 commit 55e024c
Show file tree
Hide file tree
Showing 5 changed files with 265 additions and 0 deletions.
51 changes: 51 additions & 0 deletions 曹婷婷/L12/task12-1.html
View file
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>居中样式</title>
<style>
html,body,div,ul,li{
margin: 0px;
padding: 0px;
}
.inner{
list-style: none;
}
.inner>li{
width: 300px;
height: 100px;
background: rgb(0,66,16);
float: left;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.wrapper{
width: 940px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
background: rgb(204,204,204);
}
.inner{
margin-left: -10px;
margin-right: -10px; /*这里是利用负margin扩大面积，不是移位。因为如果一个元素没有width，只有左右负margin，它就会变宽。*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="inner">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
59 changes: 59 additions & 0 deletions 曹婷婷/L12/task12-2.html
View file
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>使用圣杯布局实现三栏布局</title>
<style>
html,body,div{
margin: 0px;
padding: 0px;
}
.header,.footer{
height: 40px;
background: rgb(204,204,204);
}
.wrapper{
padding: 0 200px;
}
.wrapper:after{
content: "";
display: block;
clear: both;
}
.wrapper>.main{
width: 100%;
height: 100px;
background: green;
float: left;
}
.wrapper>.aside{
width: 200px;
height: 150px;
background: red;
float: left;
margin-left: -100%; /*默认盒模型，这里的100%是父容器内容的100%。所以设置内外边距要加到包裹容器的上面*/
position: relative;
left: -200px;
}
.wrapper>.extra{
width: 200px;
height: 150px;
background: yellow;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="wrapper">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
<div class="footer">footer</div>
</body>
</html>
49 changes: 49 additions & 0 deletions 曹婷婷/L12/task12-3.html
View file
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>利用圣杯布局实现两栏布局</title>
<style>
html,body,div{
margin: 0px;
padding: 0px;
}
.header,.footer{
height: 40px;
background: rgb(204,204,204);
}
.wrapper{
padding: 0 0 0 200px;
}
.wrapper:after{
content: "";
display: block;
clear: both;
}
.wrapper>.main{
width: 100%;
height: 100px;
background: green;
float: left;
}
.wrapper>.aside{
width: 200px;
height: 150px;
background: red;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="wrapper">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</body>
</html>
57 changes: 57 additions & 0 deletions 曹婷婷/L12/task12-4.html
View file
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>利用双飞翼布局实现三栏布局</title>
<style>
html,body,div{
margin: 0px;
padding: 0px;
}
.header,.footer{
height: 40px;
background: rgb(204,204,204);
}
.wrapper:after{
content: "";
display: block;
clear: both;
}
.wrapper>.middle{
width: 100%;
float: left;
}
.wrapper>.middle>.main{
height: 100px;
margin: 0 200px;
background: green;
}
.wrapper>.aside{
width: 200px;
height: 150px;
background: red;
float: left;
margin-left: -100%;
}
.wrapper>.extra{
width: 200px;
height: 150px;
background: yellow;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="wrapper">
<div class="middle">
<div class="main">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
<div class="footer">footer</div>
</body>
</html>
49 changes: 49 additions & 0 deletions 曹婷婷/L12/task12-5.html
View file
@@ -0,0 +1,49 @@
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>利用双飞翼布局实现两栏布局</title>
<style>
html,body,div{
margin: 0px;
padding: 0px;
}
.header,.footer{
height: 40px;
background: rgb(204,204,204);
}
.wrapper:after{
content: "";
display: block;
clear: both;
}
.wrapper>.middle{
width: 100%;
float: left;
}
.wrapper>.middle>.main{
height: 150px;
margin-right: 200px;
background: green;
}
.wrapper>.extra{
width: 200px;
height: 150px;
background: yellow;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="wrapper">
<div class="middle">
<div class="main">main</div>
</div>
<div class="extra">extra</div>
</div>
<div class="footer">footer</div>
</body>
</html>

0 comments on commit 55e024c

Please sign in to comment.