Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Apress committed Oct 19, 2016
0 parents commit 95976c6
Show file tree
Hide file tree
Showing 212 changed files with 6,914 additions and 0 deletions.
Binary file added 9781430265023.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 9781430265023/Examples/.DS_Store
Binary file not shown.
33 changes: 33 additions & 0 deletions 9781430265023/Examples/chapter3/3.1.html
@@ -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>
54 changes: 54 additions & 0 deletions 9781430265023/Examples/chapter3/3.2.html
@@ -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>
31 changes: 31 additions & 0 deletions 9781430265023/Examples/chapter3/3.3.html
@@ -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>
33 changes: 33 additions & 0 deletions 9781430265023/Examples/chapter3/3.4.html
@@ -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>
37 changes: 37 additions & 0 deletions 9781430265023/Examples/chapter3/3.5.html
@@ -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>
35 changes: 35 additions & 0 deletions 9781430265023/Examples/chapter3/3.6.html
@@ -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 &lt;span&gt; element</span>.</p>
<p>Here’s some more content, and this time the &lt;span&gt; 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>
106 changes: 106 additions & 0 deletions 9781430265023/Examples/chapter3/3.7.html
@@ -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>
50 changes: 50 additions & 0 deletions 9781430265023/Examples/chapter3/3.8.html
@@ -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 added 9781430265023/Examples/chapter4/.DS_Store
Binary file not shown.

0 comments on commit 95976c6

Please sign in to comment.