<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/freecity/favicon.ico">
<title>/kian 建網</title>
<script>
(async function loadCSS() {
try {
// same-origin, so no CORS issues
const res = await fetch('/a.css', { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const css = await res.text();
const style = document.createElement('style');
style.setAttribute('data-source', 'mystyle.css');
style.append(css);
document.head.append(style);
} catch (err) {
console.error('Failed to load CSS:', err);
}
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<img border="0" src="/okchai/timahpulai.jpg" width="100%">
<!--
<font size="1"><a target="_tab" href="/index/showpost.html?msg=2ijD3az6rrWxH5imZ7q6YUioR7pJkCMLTaXGRjgRgonrZtuv2jqYEqhypb7wKyZztnStHnMH1QLz3D658HKu8qhc"> [ SPONSORED 廣告 ]</a></font>
-->
</div>
<div class="navbar">
<a href="/kian" class="active">/kian <b>建</b>主頁</a>
<a href="/kian/1">/kian/1 <b>建</b>第一系列</a>
<a href="/kian/2">/kian/2 <b>建</b>第二部分</a>
<a href="/kian/3" class="right">/kian/3 <b>建</b>最新文章</a>
</div>
<div class="row">
<div class="side">
<iframe width="100%" height="300" frameborder="0" src="/kian/leftside" name="side" border="0"></iframe>
</div>
<div class="main">
<h2>TEST</h2>
<h5> 7月16日, 2022</h5>
<p>
test
</p>
</div>
</div>
<div class="footer">
<iframe width="100%" height="300" frameborder="0" src="/footer" name="foot" border="0"></iframe>
</div>
</body>
</html>
/* test */
body{
background-color: lightblue;
}
h1{
color: navy; margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/freecity/favicon.ico">
<title>/kian/leftside 建網</title>
<script>
(async function loadCSS() {
try {
// same-origin, so no CORS issues
const res = await fetch('/a.css', { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const css = await res.text();
const style = document.createElement('style');
style.setAttribute('data-source', 'mystyle.css');
style.append(css);
document.head.append(style);
} catch (err) {
console.error('Failed to load CSS:', err);
}
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="side">
<a target="_top" href="/freecity">/freecity</a> 自由天地<br>
FreeCity : web freedom dweb by okchai <br><br>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
(async function loadCSS() {
try {
// same-origin, so no CORS issues
const res = await fetch('mystyle.css', { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const css = await res.text();
const style = document.createElement('style');
style.setAttribute('data-source', 'mystyle.css');
style.append(css);
document.head.append(style);
} catch (err) {
console.error('Failed to load CSS:', err);
}
})();
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
* { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; margin: 0; } .header { padding: 1px; text-align: center; background: #CE5C22; color: white; } .header h1 { font-size: 40px; } .header a { text-decoration: none; color: #CCCCCC; } .header a:hover { color: white; } .navbar { overflow: hidden; background-color: #333; position: sticky; position: -webkit-sticky; top: 0; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar a.right { float: right; } .navbar a:hover { background-color: #ddd; color: black; } .navbar a.active { background-color: #666; color: white; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .side { -ms-flex: 30%; flex: 30%; background-color: #f1f1f1; padding: 20px; } .side a { text-decoration: none; color: #AA6666; } .side a:hover { color: black; } .main { -ms-flex: 70%; flex: 70%; background-color: white; padding: 20px; } .main a { text-decoration: none; color: #AA6666; } .main a:hover { color: black; } .footer { padding: 10px; text-align: center; background: #ddd; } .footer a { text-decoration: none; color: #AA6666; } .footer a:hover { color: black; } @media screen and (max-width: 700px) { .row { flex-direction: column; } } @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } }