ecki/lpmj6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Draft

Browse Source 
First Draft of the Example Files
This commit is contained in:
RobinNixon
2020-12-10 13:21:38 +00:00
parent 77a7b57c4f
commit 0335342e00
1127 changed files with 46959 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
19/01.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
h1 {
color :red;
font-size :3em;
font-family:Arial;
}
</style>
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
19/02.html
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>Div and span example</title>
<style>
div, span { border :1px solid black; }
div { background-color:yellow; }
span { background-color:cyan; }
</style>
</head>
<body>
<div>This text is within a div tag</div>
This isn't. <div>And this is again.</div><br>
<span>This text is inside a span tag.</span>
This isn't. <span>And this is again.</span><br><br>
<div>This is a larger amount of text in a div that wraps around
to the next line of the browser</div><br>
<span>This is a larger amount of text in a span that wraps around
to the next line of the browser</span>
</body>
</html>
19/03.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Creating a linear gradient</title>
<style>
.orangegrad {
background:orange;
background:linear-gradient(top, #fb0, #f50);
background:-moz-linear-gradient(top, #fb0, #f50);
background:-webkit-linear-gradient(top, #fb0, #f50);
background:-o-linear-gradient(top, #fb0, #f50);
background:-ms-linear-gradient(top, #fb0, #f50); }
</style>
</head>
<body>
<div class='orangegrad'>Black text<br>
on an orange<br>linear gradient</div>
</body>
</html>
19/04.html
+45
View File
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#container {
position :absolute;
top :50px;
left :0px;
}
#object1 {
position :absolute;
background:pink;
width :100px;
height :100px;
top :0px;
left :0px;
}
#object2 {
position :relative;
background:lightgreen;
width :100px;
height :100px;
top :0px;
left :110px;
}
#object3 {
position :fixed;
background:yellow;
width :100px;
height :100px;
top :50px;
left :220px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<div id='container'>
<div id='object1'>Absolute Positioning</div>
<div id='object2'>Relative Positioning</div>
<div id='object3'>Fixed Positioning</div>
</div>
</body>
</html>
19/05.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Pseudo classes</title>
<style>
a:link { color:blue; }
a:visited { color:gray; }
a:hover { color:red; }
a:active { color:purple; }
*:focus { background:yellow; }
</style>
</head>
<body>
<a href='http://google.com'>Link to Google'</a><br>
<a href='nowhere'>Link to nowhere'</a><br>
<input type='text'>
</body>
</html>
19/06.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Margins</title>
<style>
#object1 {
background :lightgreen;
border-style:solid;
border-width:1px;
font-family :"Courier New";
font-size :9px;
width :100px;
height :100px;
padding :5px;
margin :10px 20px 30px 40px;
}
table {
padding :0;
border :1px solid black;
background :cyan;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id='object1'>margin:<br>10px 20px 30px 40px;</div>
</td>
</tr>
</table>
</body>
</html>
19/07.html
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Padding</title>
<style>
#object1 {
border-style:solid;
border-width:1px;
background :orange;
color :darkred;
font-family :Arial;
font-size :12px;
text-align :justify;
display :table-cell;
width :148px;
padding :10px 20px 30px 40px; }
</style>
</head>
<body>
<div id='object1'>To be, or not to be that is the question:
Whether 'tis Nobler in the mind to suffer
The Slings and Arrows of outrageous Fortune,
Or to take Arms against a Sea of troubles,
And by opposing end them.</div>
</body>
</html>