mahuntington
/
panpsychism
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create index.html

Browse Source
master
Kristyn Bryan 10 years ago
parent 452612c1f7
commit 13567b54d6
1 changed files with 210 additions and 0 deletions
Show Stats Download Patch File Download Diff File

210
unit_01/w01d04/homework/index.html
Unescape View File

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<<<<<<< HEAD
<header>
<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<aside>
<h1>Sidebar</h1>
</aside>
<section>
<h1>content</h1>
<div class="small-boxes">
<div class="box">
<p>The default display style of a &lt;div&gt; tag is <strong>BLOCK</strong>.</p>
</div>
<div class="box">
<p>The best way to horizontally center an element is to set the <em>left-margin</em> and <em>right-margin</em> to <em>auto</em> or use the <em>margin: 0 auto</em> declaration.</p>
</div>
<div class="box">
<p><em>Padding</em> is the space between an element and it's border ("insidey" or "indoorsy"), while <em>margin</em> is the space between that border and an adjacent element ("outsidey" or "outdoorsy").</p>
</div>
<div class="box">
<p><em>Fixed</em> positioning places an element in relation to the browser window, while <em>absolute</em> positioning places an element in relation to it's container.</p>
</div>
<div class="box">
<p>A <em>clearfix</em> will auto-size a floating element's container to match the floating element itself. Otherwise, the element can flow outside it's container in wonky ways.</p>
</div>
</div>
<div class="big-boxes">
<div class="big-box">
</div>
<div class="big-box">
</div>
</div>
</section>
<footer>
<h1>footer</h1>
</footer>
=======
<header>
<nav>
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<h1>
<ul>
<il><a href=# "Portfolio"></il>
<il><a href=# "Bio"></il>
<il><a href=# "Contact"></il>
</ul>
</h1>
=======
<ul>
<ul id="navlist">
<li><a href="#"> Portfolio</li>
<li><a href= "#"> Bio</li>
<li><a href="#"> Contact</li>
</ul>
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
=======
<ul>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Bio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<<<<<<< HEAD
>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
=======
>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
=======
<ul id="one">
<li id="two"><a id="three" href="#portfolio">Portfolio</a></li>
<li id="two"><a id="three" href="#bio">Bio</a></li>
<li id="two"><a id="three" href="#contact">Contact</a></li>
</ul>
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
</nav>
</header>
<aside>
<h1>Sidebar</h1>
</aside>
<section>
<h1>content</h1>
<div class="small-boxes">
<div class="box">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<p>block style</p>
</div>
<div class="box">
<p>Set the left and right margins to auto</p>
</div>
<div class="box">
<p>Padding is the space between the content and the border, whereas margin is the space outside the border.</p>
</div>
<div class="box">
<p>Fixed position specifies the positioning of a element with respect to the window. Absolute 's offset is relative to its “containing block”.</p>
</div>
<div class="box">
<p>Clearfix will apply a small bit of content, hidden from view, after the parent element which clears the float or an element.</p>
=======
<p>
Div tags' default display styles are blocks. </p>
</div>
<div class="box">
<p>What is the best way to horizontally style an element?
</p>
</div>
<div class="box">
<p>
The differance between padding and margin is.
padding is the space between the content and the border, margin is the transparent part
that seperates the border from other items</p>
</div>
<div class="box">
<p>
Fixed elements do not move in a browser, absolute positions are positioned relative to the parent element</p>
</div>
<div class="box">
<p>
"Clearfix" is a method used to fix child elements</p>
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
=======
<p>div's are static unless otherwise specified</p>
</div>
<div class="box">
<p>auto margin will split the margin space equally on both sides</p>
</div>
<div class="box">
<p>padding is the space around an element whereas margin is the space between elements. like if I had HELLO inside a box, the space around HELLO is padding. the space around the box is margin.</p>
</div>
<div class="box">
<p>fixed positioning doesn't move as you scroll. absolute positioning acts similarly to fixed except it's position is relative to a parent element. if none are nearby, it uses the document's body.</p>
</div>
<div class="box">
<p>dirty trick for fixing an element who's image is taller than the container it's in.</p>
<<<<<<< HEAD
>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
=======
>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
=======
<p>div's display is block</p>
</div>
<div class="box">
<p>Kind of depends, but [margin: 0 auto] is good</p>
</div>
<div class="box">
<p>The Content is the nucleus and sits at the center.
The first layer surrounding it is the Padding and it clears the area and protects the content. The Border surrounds the padding.
Lastly, the Margin surrounds all 3 is transparent and can be thought of as the space between boxes</p>
</div>
<div class="box">
<p>Absolute position elements are removed from the flow of elements on the page. An element w/ this type of positioning is not affected by/doesn't affect other elements. A fixed position element is positioned relative to the viewport, which doesn't change when the window is scrolled.</p>
</div>
<div class="box">
<p>If you are floating an image, for examoke, and an element next to it has a border that looks ugly by running behind it, using [overflow: auto] under a "clearfix" class in a [div] tag
will smooth it out and make the border appear around the image as well.</p>
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
</div>
</div>
<div class="big-boxes">
<div class="big-box">
</div>
<div class="big-box">
</div>
</div>
</section>
<footer>
<h1>footer</h1>
</footer>
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save