114 lines
3.2 KiB
HTML
114 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Test html</title>
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<style>
|
|
body { font-family: sun; font-size: 12px;
|
|
background-image: "bluecat.jpg" }
|
|
h1 { font-family: sans; font-size: 32px; text-align: right; margin-bottom: 12px; color:#000; }
|
|
b { font-weight:700 }
|
|
.mydiv { position: absolute;
|
|
width: 200px; top:360px; left: 16px; border-radius: 8px;
|
|
background-color: #ff0;
|
|
padding-top:4px; padding-bottom:4px;
|
|
margin-top:8px; margin-bottom:8px;
|
|
color: #000; text-align: center;
|
|
font-family: sans; font-size: 10px }
|
|
.rundiv { position: relative; border-radius: 8px;
|
|
background-color: #0000ffff;
|
|
padding-top:4px; padding-bottom:4px;
|
|
padding-left:8px; padding-right:8px;
|
|
margin-top:9px; margin-bottom:9px;
|
|
margin-left:18px; margin-right:18px;
|
|
color: #fff; text-align: left;
|
|
font-family: sans; font-size: 16px;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
border-bottom-left-radius: 16px;
|
|
border-bottom-right-radius: 16px;
|
|
}
|
|
.cdiv { display: inline; width: 33.3%; color: #ff0;
|
|
padding-top:4px; padding-bottom:4px;
|
|
margin-top:8px; margin-bottom:8px;
|
|
margin-left: auto; margin-right:auto;
|
|
background-color: #cc0000a0;
|
|
text-align: center;
|
|
font-family: sans; font-size: 14px }
|
|
|
|
.circ {
|
|
position: absolute; top: 60px; left: 500px;
|
|
background-color: #404000;
|
|
width: 48px; height: 48px;
|
|
padding-top:0px; padding-bottom:0px;
|
|
padding-right:0px; padding-left:0px;
|
|
|
|
margin-top:0px; margin-bottom:0px;
|
|
margin-left:0px; margin-right:0px;
|
|
|
|
border-top-left-radius: 24px;
|
|
border-top-right-radius: 24px;
|
|
border-bottom-left-radius: 24px;
|
|
border-bottom-right-radius: 24px;
|
|
}
|
|
|
|
.cov {
|
|
top: 130px;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 12px;
|
|
border-bottom-left-radius: 24px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.icon { position: absolute; top:340px; left: 500px; }
|
|
.icon2 { position: absolute; top:250px; left: 500px; }
|
|
|
|
.contain { margin-left: 12px }
|
|
|
|
.x { display: block; padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 6px; color: #000}
|
|
.a { background-color: #ff0000; }
|
|
.b { background-color: #ffa500; }
|
|
.c { background-color: #ffff00; }
|
|
.d { background-color: #008000; }
|
|
.e { background-color: #0000ff; }
|
|
.f { background-color: #00ff00; }
|
|
.g { background-color: #ff00ff; }
|
|
.row { }
|
|
.m { width=33% }
|
|
</style>
|
|
<body>
|
|
<h1>libwebsockets.org</h1>
|
|
<div class="rundiv">This is some text flowing in an auto width div on body.<br>
|
|
Mixed CSS types in a line: <b>bold</b>, normal</div>
|
|
<div class="rundiv">Another div like the one before.</div>
|
|
<div><div class="cdiv">First</div><div class="cdiv">Second</div></div>
|
|
<div class="icon"><img src="exclaim.png"></div>
|
|
<div class="icon2"><img src="no-right.png"></div>
|
|
|
|
<div class="mydiv">Well, some text in an abs div that is <b>too long</b> to comfortably fit on one line, even with the smallest font.</div>
|
|
<div class="circ"></div>
|
|
<div class="circ cov"></div>
|
|
Something after the div<br>
|
|
<div class="contain">
|
|
<div class="x a">
|
|
<div class="x b">
|
|
<div class="x c">
|
|
<div class="x d">
|
|
<div class="x e">
|
|
<div class="x f">
|
|
<div class="x g">
|
|
hello
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cdiv">cdiv 33% width<br>blah blah</div>
|
|
<!--<div class="mydiv">a<b>b</b></div> -->
|
|
</body>
|
|
</html>
|