<!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%; } }