<!DOCTYPE html> <html> <head> <title>Example Responsive</title> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css" type="text/css"/> <meta name="viewport" content="width=device-width, inital-scale=1.0"/> <!-- การทำ responsive ค้องใส่ meta ส่วนนี้ --> </head> <body class="body"> <header class="mainheader"> <img src="img/logo.gif"> <nav><ul> <li class="active"><a href="#">Home</a></li> <!-- <li>คือ tag link --> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul></nav> </header> <div class="mainContent"> <div class="Content"> <article class="topcontent"> <header> <h2><a href="#" title="First post">First post</a></h2> </header> <footer> <p class="post-info">This post is written by Adisorn</p> </footer> <content> <p>A role-playing game (RPG and sometimes roleplaying game) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting or through a process of structured decision-making or character development. Actions taken within many games succeed or fail according to a formal system of rules and guidelines.</p> </content> <!-- base font size is 14px --> </article> <!-- เพราะว่าใช้ tag article ตัว text เลยเป็น responsive --> <article class="bottomcontent"> <header> <h2><a href="#" title="Secondpost post">Secondpost post</a></h2> </header> <footer> <p class="post-info">This post is written by Adisorn</p> </footer> <content> <p>A role-playing game (RPG and sometimes roleplaying game) is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting or through a process of structured decision-making or character development. Actions taken within many games succeed or fail according to a formal system of rules and guidelines.</p> </content> <!-- base font size is 14px --> </article> <!-- เพราะว่าใช้ tag article ตัว text เลยเป็น responsive --> </div> </div> <aside class="top-sidebar"> <article> <h2>Top sidebar</h2> <p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p> </article> </aside> <aside class="middle-sidebar"> <article> <h2>Middle sidebar</h2> <p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p> </article> </aside> <aside class="bottom-sidebar"> <article> <h2>Bottom sidebar</h2> <p>Fuckyyou Fuckyyou Fuckyyou Fuckyyou Fuckyyou</p> </article> </aside> <footer class="mainFooter"> <p>Copyright © AD Enterprise</p> </footer> </body> </html>
body { background-image: url('img/bg.png'); color: #000305); font-size: 87.5%; font-family: Arial, 'Lucida Sans Unicode'; line-height: 1.5; text-align: left; } a{ text-decoration: none; } a:link, a:visted{ } a:hover, a:active{ } .body{ margin: 0 auto; width: 70%; clear: both; } .maineader img{ width: 30%; height: auto; margin: 2% 0; } .mainheader nav{ background-color: #666; height: 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainheader nav ul{ list-style: none; margin: 0 auto; } .mainheader nav ul li { float: left; display: inline; } .mainheader nav a:link, .mainheader nav a:visited{ color: #FFF; display: inline-block; padding: 10px 25px; height: 20px; } .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited{ background-color: #CF5C3F; text-shadow: none; } .mainheader nav ul li a{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .maincontent{ line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .content{ width: 70%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-top: 2%; } .bottomcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-top: 2%; } .top-sidebar{ width: 21%; float: left; background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-left: 3%; margin-bottom: 2%; margin-top: 2%; padding: 2% 3%; } .middle-sidebar{ width: 21%; float: left; background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-left: 3%; margin-bottom: 2%; margin-top: 2%; padding: 2% 3%; } .bottom-sidebar{ width: 21%; float: left; background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-left: 3%; margin-bottom: 2%; margin-top: 2%; padding: 2% 3%; }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 03
Load balance : Server 03
