html_backup/layout_css.html at master · furtheraway/html_backup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
	<title>CSS Style class Demo</title>
	<link rel="stylesheet" href="layout.css">
	<base target="_blank">
</head>

<body>
	<header>
		<h1>HTML5 Skeleton</h1>
	</header>

	<nav>
		<ul>
			<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
			<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
			<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
		</ul>
	</nav>

	<section>

		<h2>Famous Cities</h2>

		<article>
			<h2>London</h2>
			<p><lfc>L</lfc>ondon is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
			</article>

			<article>
				<h2>Paris</h2>
				<p>Paris is the capital and most populous city of France.</p>
			</article>

			<article>
				<h2>Tokyo</h2>
				<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
					and the most populous metropolitan area in the world.</p>
				</article>
			</section>
		</article>
	</section>

	<aside> <h2>aside</h2> <p>just type something to see where asider will be pleaced.</p></aside>

	<footer>
		<p>&copy; 2014 W3Schools. All rights reserved.</p>
	</footer>
	<hr>


<!-- Test newly self-defined element in layout.css sheet, myHero -->
	<myHero> my Hero element </myHero>


<!-- test the usage of @media, which change the display style based on windowsize  -->
	<hr>
	<div class="media_usage">
		Resize the browserwindow. When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".
	</div> <hr>


<!-- Great! I can just use @media and float left to make responsive layout!, see .gridbox class in css file-->
	<div class="gridbox" style="height:10%;"> box 1</div>
	<div class="gridbox"> <div style="background:red;"> Box 2 in middle</div></div>
	<div class="gridbox"> box 3</div>
	<hr></hr><hr> <hr style="clear:both;"> </hr>


<!-- Test positioning elements in fixed and absolute position -->
	<!-- the height of fixed and absolute positioned objects follow the window directly; while the above box 1 follow body and html height -->
	<div style="position: fixed; left: 500px; bottom: 30px; z-index: 1;height:10%;"> Box fix positon, height:10%; </div>
	<div style="height:150px; margin-left:400px;">
		<hr>
		<!-- if no top/bottom specificed in absolute position, it can be contained in a regular statically positioned div box, given the static box have enough height. -->
			<div style="position: absolute; right:30px; z-index:1;height:5%;"> Box absolute position, height:5%;</div>
		<hr><hr><hr>
		<!-- However, if top/bottom is specified, it is much harder to do that. -->
			<!-- <div style="position: absolute; right:30px; bottom:10px;z-index:1;height:5%;"> Box absolute position, height:5%;</div> <hr> -->
	</div>

<!-- Test how to align a div horizontally in the center -->
	<div> <p class="center" style="width:50%;border:1px solid;">horizontally center aligned paragraph.</p></div>


<!-- Some cool shadow effects in test -->
	<h1 style="text-shadow: 1px 1px 2px black; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow: 0 0 1em blue; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow: 0 0 0.2em darkblue; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow: 1px 1px 2px black, 0 0 1em blue; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow: 1px 1px 2px black, 0 0 0.2em darkblue; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow:  0 0 1em blue, 0 0 0.2em darkblue; color: white;">Text-shadow effect!</h1>
	<h1 style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue; color: white;">Text-shadow effect!</h1>


<!-- Rotate an element -->
	<h1 class="rotate" style="text-align:center; text-shadow:1px 1px 2px black,0 0 0.5em blue; color: white;">Text-shadow and Rotation effect!</h1>

</body>
</html>