Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Apress
committed
Oct 19, 2016
0 parents
commit 95976c6
Showing
212 changed files
with
6,914 additions
and
0 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
position: relative; | ||
width: 100px; | ||
height: 100px; | ||
background: red; | ||
margin: 10px; | ||
} | ||
.absolute { | ||
position: absolute; | ||
top: 100px; | ||
left: 200px; | ||
width: 100px; | ||
height: 100px; | ||
background: yellow; | ||
margin: 10px; | ||
} | ||
</style> | ||
<div class="relative">Element 1</div> | ||
<div class="relative">Element 2</div> | ||
<div class="relative">Element 3</div> | ||
<div class="absolute">Element 4</div> | ||
<div class="absolute">Element 5</div> | ||
<div class="absolute">Element 6</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
position: relative; | ||
top: 100px; | ||
left: 100px; | ||
width: 100px; | ||
height: 100px; | ||
background: red; | ||
margin: 10px; | ||
} | ||
#absolute1 { | ||
position: absolute; | ||
top: 100px; | ||
left: 200px; | ||
width: 100px; | ||
height: 100px; | ||
background: yellow; | ||
} | ||
#absolute2 { | ||
position: absolute; | ||
top: 100px; | ||
left: 200px; | ||
width: 100px; | ||
height: 100px; | ||
background: purple; | ||
} | ||
#absolute3 { | ||
position: absolute; | ||
top: 100px; | ||
left: 200px; | ||
width: 100px; | ||
height: 100px; | ||
background: yellow; | ||
} | ||
</style> | ||
<div class="relative"> | ||
Element 1 | ||
<div id="absolute1">Element 4</div> | ||
</div> | ||
<div class="relative">Element 2</div> | ||
<div class="relative"> | ||
Element 3 | ||
<div id="absolute2">Element 5</div> | ||
</div> | ||
<div id="absolute3">Element 6</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
position: relative; | ||
width: 300px; | ||
background: grey; | ||
margin: 10px; | ||
padding: 10px; | ||
} | ||
#floater { | ||
float: right; | ||
width: 160px; | ||
height: 160px; | ||
padding: 10px; | ||
margin: 10px; | ||
background: green; | ||
} | ||
</style> | ||
<div class="relative"> | ||
<div id="floater">Floating element</div> | ||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | ||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
position: relative; | ||
width: 300px; | ||
background: grey; | ||
margin: 10px; | ||
padding: 10px; | ||
} | ||
.floater { | ||
float: right; | ||
width: 160px; | ||
height: 160px; | ||
padding: 10px; | ||
margin: 10px; | ||
background: green; | ||
} | ||
</style> | ||
<div class="relative"> | ||
<div class="floater">Floating element 1</div> | ||
<div class="floater">Floating element 2</div> | ||
<div class="floater">Floating element 3</div> | ||
<div class="floater">Floating element 4</div> | ||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
position: relative; | ||
width: 300px; | ||
background: grey; | ||
margin: 10px; | ||
padding: 10px; | ||
} | ||
.floater { | ||
float: right; | ||
width: 60px; | ||
height: 60px; | ||
padding: 10px; | ||
margin: 10px; | ||
background: green; | ||
} | ||
.clearfloat { | ||
clear: right; | ||
} | ||
</style> | ||
<div class="relative"> | ||
<div class="floater">Floating element 1</div> | ||
<div class="floater clearfloat">Floating element 2</div> | ||
<div class="floater">Floating element 3</div> | ||
<div class="floater">Floating element 4</div> | ||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | ||
<br class="clearfloat" /> <!-- this isn't necessary on this page, but is commonly used to ensure the <div> with a class of relative expands to encapsulate the floating elements --> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
padding: 10px; | ||
position: relative; | ||
width: 500px; | ||
background: red; | ||
margin: 10px; | ||
} | ||
.navitem { | ||
display: inline-block; | ||
width: 70px; | ||
height: 40px; | ||
line-height: 40px; | ||
text-align: center; | ||
background: grey | ||
} | ||
</style> | ||
|
||
<div class="relative"> | ||
<h1>Example of inline-block</h1> | ||
<p>Here is some content <span>that includes an inline <span> element</span>.</p> | ||
<p>Here’s some more content, and this time the <span> elements have the class navitem applied to them: <span class="navitem">Item 1</span> <span class="navitem">Item 2</span> <span class="navitem">Item 3</span></p> | ||
<p>Note that inline-block elements contribute to the layout.</p> | ||
</div> | ||
|
||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
<style> | ||
body { | ||
font-family: arial, helvetica, sans-serif; | ||
font-size: 80%; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<style> | ||
.relative { | ||
padding: 10px; | ||
position: relative; | ||
width: 920px; | ||
background: #efefef; | ||
border: 1px solid #ccc; | ||
margin: 10px auto; | ||
} | ||
#header { | ||
position: relative; | ||
padding: 10px; | ||
height: 80px; | ||
line-height: 80px; | ||
background: #999; | ||
color: #fff | ||
} | ||
#header h1 { font-weight: normal;margin:0;padding:0;} | ||
#search { | ||
position: absolute; | ||
top: 10px; | ||
right:10px; | ||
} | ||
#search input { | ||
padding: 5px; | ||
} | ||
#nav { | ||
position: relative; | ||
height: 30px; | ||
background: #ccc; | ||
} | ||
#nav ul { | ||
margin: 0; | ||
padding: 0; | ||
} | ||
#nav ul li { | ||
float: left; | ||
list-style:none; | ||
padding: 0; | ||
margin: 0 3px; | ||
width: 70px; | ||
height: 30px; | ||
line-height: 30px; | ||
text-align: center; | ||
background: #ddd; | ||
} | ||
.sidebar { | ||
float: right; | ||
width: 200px; | ||
background: #ebebeb; | ||
padding: 10px; | ||
} | ||
.ib { | ||
display: inline-block; | ||
width: 70px; | ||
line-height: 30px; | ||
text-align: center; | ||
background: #ddd; | ||
border: #ccc; | ||
margin: 5px; | ||
} | ||
.clearfloat { | ||
clear: both; | ||
} | ||
</style> | ||
|
||
<div class="relative"> | ||
<div id="header"> | ||
<h1>Site Name</h1> | ||
<form id="search"><input type="text" value="search site" /></form> | ||
</div> | ||
<div id="nav"> | ||
<ul> | ||
<li><a href="#">Home</a></li> | ||
<li><a href="#">About</a></li> | ||
<li><a href="#">Contact</a></li> | ||
</ul> | ||
</div> | ||
<div class="sidebar"> | ||
<h3>Popular CSS modules</h3> | ||
<p><span class="ib">CSS Flexbox</span><span class="ib">CSS Multi-Column</span><span class="ib">CSS Regions</span><span class="ib">CSS Grid Layout</span><span class="ib">CSS Shapes</span></p> | ||
</div> | ||
<div id="content"> | ||
<h2>Welcome to our website</h2> | ||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> | ||
<p>Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> | ||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.</p> | ||
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> | ||
</div> | ||
<br class="clearfloat" /> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<title>Example of Relative and Absolute Positioning</title> | ||
<style> | ||
body { | ||
font-family: arial, helvetica, sans-serif; | ||
font-size: 80%; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<style> | ||
.table { | ||
display: table; | ||
border: 1px solid red; | ||
background: #eee; | ||
margin: 2px; | ||
padding: 2px; | ||
} | ||
.tr { | ||
display: table-row; | ||
border: 1px solid red; | ||
background: #ddd; | ||
margin: 2px; | ||
padding: 2px; | ||
} | ||
.td { | ||
display: table-cell; | ||
border: 1px solid #red; | ||
width: 200px; | ||
background: #ccc; | ||
margin: 2px; | ||
padding: 2px; | ||
} | ||
</style> | ||
<div class="table"> | ||
<div class="tr"> | ||
<div class="td"><p>This is a normal div, but displays like a cell in a table!</p></div> | ||
<div class="td"><p>This is another table cell</p></div> | ||
</div> | ||
<div class="tr"> | ||
<div class="td"><p>Here is a third cell, in a second row</p></div> | ||
<div class="td"><p>And a final cell.</p></div> | ||
</div> | ||
</div> | ||
|
||
</body> | ||
</html> |
Binary file not shown.
Oops, something went wrong.