Skip to content

Instantly share code, notes, and snippets.

@koyoyo
Last active December 19, 2015 07:08
Show Gist options
  • Save koyoyo/5916095 to your computer and use it in GitHub Desktop.
Save koyoyo/5916095 to your computer and use it in GitHub Desktop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>NBTC</title>
<meta charset="utf-8">
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<div class="secondary-menu">
<ul class="nav sub-menu">
<li><a href="#">หน้าแรก</a></li>
<li><a href="#">เกี่ยวกับเรา</a></li>
<li><a href="#">ข้อมูลกฎหมาย</a></li>
<li><a href="#">เครือข่าย</a></li>
<li><a href="#">รวมลิงค์</a></li>
<li><a href="#">ข้อมูลเว็บไซต์</a></li>
</ul>
<ul class="nav pull-right wai">
<li class="active"><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li><a href="#">A</a></li>
<li class="active"><a href="#">สี</a></li>
<li><a href="#">ขาวดำ</a></li>
</ul>
<ul class="nav pull-right">
<li><input type="text"></li>
<li><a href="#">เข้าสู่ระบบ</a></li>
<li><a href="#">สมัครสมาชิก</a></li>
</ul>
</div>
<div class="title-block">
<h1>กสทช. เพื่อผู้บริโภค</h1>
<h2>ในกิจการกระจายเสียงและกิจการโทรทัศน์ สำนักงาน กสทช</h2>
<div class="complain-block">
<p>ช่องทาง<br/>การร้องเรียน</p>
</div>
</div>
<div class="main-menu">
<ul class="nav sub-menu">
<li class="active"><a href="#">ถาม-ตอบ</a></li>
<li><a href="#">คลังความรู้</a></li>
<li><a href="#">เรื่องน่ารู้เพื่อผู้บริโภค</a></li>
<li><a href="#">ข่าวสาร/กิจกรรม</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="main-banner">
<img src="1.jpg" />
</div>
<div class="content">
<div class="span9">
<div class="qanda-banner">
<div class="left">&nbsp;</div>
<div class="right">
<h4>เร่เข้ามา!ราชันรอขายทิ้ง"คุณชาย"</h4>
<p>"ราชันชุดขาว"เรอัล มาดริดกำลังเตรียมดำเนินการขายทิ้งชาบี อลอนโซ่มิดฟิลด์ตัวเก๋าเลือดสแปนิชออกจากสโมสรในช่วงซัมเมอร์นี้ </p>
<button class="btn-add-qanda">ตั้งคำถามใหม่</button>
</div>
</div>
<div class="qanda-list">
<div class="qanda">
<div class="left">
<p class="total-vote">38</p>
<p class="total-comment">คำตอบ: 8</p>
</div>
<div class="right">
<div class="qanda-title">
<h4>แทยอนอา แทยอนอา แทยอนอา แทยอนอา แทยอนอา</h4>
</div>
<div class="qanda-tags">
<ul>
<li>แทง</li>
<li>แทง</li>
<li>แทง</li>
</ul>
</div>
</div>
</div>
<div class="qanda">
<div class="left">
<p class="total-vote">38</p>
<p class="total-comment">คำตอบ: 8</p>
</div>
<div class="right">
<div class="qanda-title">
<h4>แทยอนอา แทยอนอา แทยอนอา แทยอนอา แทยอนอา</h4>
</div>
<div class="qanda-tags">
<ul>
<li>แทง</li>
<li>แทง</li>
<li>แทง</li>
</ul>
</div>
</div>
</div>
<div class="qanda">
<div class="left">
<p class="total-vote">38</p>
<p class="total-comment">คำตอบ: 8</p>
</div>
<div class="right">
<div class="qanda-title">
<h4>แทยอนอา แทยอนอา แทยอนอา แทยอนอา แทยอนอา</h4>
</div>
<div class="qanda-tags">
<ul>
<li>แทง</li>
<li>แทง</li>
<li>แทง</li>
</ul>
</div>
</div>
</div>
</div>
<div class="qanda-view-more">
<p>ดูคำถามทั้งหมด</p>
</div>
</div>
<div class="span3">
<div class="good-to-know">
<div class="good-to-know-header">
<h3>เรื่องน่ารู้เพื่อผู้บริโภค</h3>
</div>
<div class="good-to-know-detail">
<p>สปอร์ต สื่อชื่อดังแดนกระทิงดุรายงานข่าวว่าบอร์ดบริหารของเรอัล มาดริดกำลังหารือถึงโอกาสในการ</p>
</div>
</div>
<div class="knowledge">
<div class="knowledge-header">
<h3>คลังความรู้</h3>
</div>
<div class="knowledge-list">
<div class="knowledge">
<div class="left">
<img src="1.jpg" width="60" height="50" />
</div>
<div class="right">
<h4>สวัสดีโลกแห่งความเป็นจริง</h4>
<p>โพสต์เมื่อ 5 มิ.ย. 2556</p>
</div>
</div>
<div class="knowledge">
<div class="left">
<img src="1.jpg" width="60" height="50" />
</div>
<div class="right">
<h4>สวัสดีโลกแห่งความเป็นจริง</h4>
<p>โพสต์เมื่อ 5 มิ.ย. 2556</p>
</div>
</div>
</div>
</div>
<div class="news">
<div class="news-header">
<h3>ข่าวสารและกิจกรรม</h3>
</div>
<div class="news-list">
<ul>
<li><a href="#">ถ้าเป็นเต้าฮวยจะน้ำดำวุ้นขาว อันนี้สูตรใหม่น้ำขาววุ้นดำ</a></li>
<li><a href="#">ถ้าเป็นเต้าฮวยจะน้ำดำวุ้นขาว อันนี้สูตรใหม่น้ำขาววุ้นดำ</a></li>
<li><a href="#">ถ้าเป็นเต้าฮวยจะน้ำดำวุ้นขาว อันนี้สูตรใหม่น้ำขาววุ้นดำ</a></li>
<li><a href="#">ถ้าเป็นเต้าฮวยจะน้ำดำวุ้นขาว อันนี้สูตรใหม่น้ำขาววุ้นดำ</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="left">
<p>สำนักงานคณะกรรมการกิจการกระจายเสียง กิจการโทรทัศน์ และกิจการโทรคมนาคมแห่งชาติ</p>
<p>สำนักงานคณะกรรมการกิจการกระจายเสียง กิจการโทรทัศน์ และกิจการโทรคมนาคมแห่งชาติ</p>
</div>
<div class="right">
<a href=""><img src="1.jpg" width="40" height="40" /></a>
<a href=""><img src="1.jpg" width="40" height="40" /></a>
<a href=""><img src="1.jpg" width="40" height="40" /></a>
<a href=""><img src="1.jpg" width="40" height="40" /></a>
</div>
</div>
</body>
</html>
body, p {
margin: 0;
}
.header .secondary-menu {
clear: both;
background-color: #EFEFEF;
font-size: 12px;
}
.header .secondary-menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 5px 0;
}
.header .secondary-menu ul.sub-menu {
margin-left: 40px;
}
.header .secondary-menu ul.pull-right {
float: right;
}
.header .secondary-menu ul.pull-right li input[type="text"] {
height: 10px;
}
.header .secondary-menu ul.wai.pull-right {
background-color: #DFDFDF;
margin-right: 40px;
}
.header .secondary-menu ul.wai.pull-right li {
margin: 0 5px;
}
.header .secondary-menu ul.wai.pull-right li.active {
text-decoration: underline;
}
.header .secondary-menu ul li {
display: inline-block;
margin-right: 20px;
}
.header .secondary-menu ul li a {
text-decoration: none;
}
.header .title-block {
background-color: #3283C2;
padding: 10px 40px;
color: #FFF;
position: relative;
}
.header .title-block h1 {
margin: 0;
line-height: 50px;
}
.header .title-block h2 {
margin: 0;
font-size: 12px;
}
.header .title-block .complain-block {
position: absolute;
right: 40px;
bottom: 0;
background-color: #FE9900;
padding: 5px 0;
}
.header .title-block .complain-block p {
font-size: 20px;
padding-right: 20px;
padding-left: 80px;
color: #000;
}
.header .main-menu ul {
list-style: none;
width: 100%;
padding: 0 5%;
box-sizing: border-box;
margin: 20px 0;
}
.header .main-menu ul li {
display: block;
float: left;
background-color: #EFEFEF;
width: 25%;
margin: 0;
text-align: center;
padding: 20px 0;
}
.header .main-menu ul li.active {
background-color: #3EA3EE;
}
.header .main-menu ul li.active a {
color: #FFF;
}
.header .main-menu ul li a {
text-decoration: none;
}
.main .main-banner {
height: 400px;
overflow: hidden;
}
.main {
width: 100%;
}
.main .main-banner {
margin-bottom: 20px;
}
.main .main-banner img {
width: 100%;
overflow: hidden;
}
.main .content {
padding: 0 5%;
clear: both;
margin-bottom: 60px;
display: inline-block;
}
.main .content .span9 {
width: 73%;
margin-right: 2%;
float: left;
}
.main .content .span3 {
width: 25%;
float: left;
}
.main .content .span9 .qanda-banner {
background-color: #3283C2;
padding: 20px;
width: 100%;
box-sizing: border-box;
clear: both;
display: inline-block;
}
.main .content .span9 .qanda-banner .left {
width: 50%;
float: left;
}
.main .content .span9 .qanda-banner .right {
width: 50%;
float: left;
}
.main .content .span9 .qanda-banner .right .btn-add-qanda {
background-color: #FE9900;
padding: 10px 20px;
font-size: 16px;
border-radius: 10px;
border: none;
}
.qanda {
clear: both;
background-color: #83CCF9;
height: 140px;
border-bottom: 1px solid #AAA;
}
.qanda .left {
width: 25%;
float: left;
}
.qanda .left .total-vote {
color: #FFF;
font-size: 70px;
text-align: center;
margin-top: 10px;
}
.qanda .left .total-comment {
color: #FFF;
text-align: center;
}
.qanda .right {
width: 75%;
float: left;
}
.qanda .right .qanda-tags ul {
margin: 0;
list-style: none;
padding: 0;
}
.qanda .right .qanda-tags ul li {
display: inline-block;
padding: 2px 10px;
background-color: #A7DDFF;
border-radius: 5px;
font-size: 12px;
}
.span9 .qanda-view-more {
background-color: #EFEFEF;
padding: 10px;
}
.span9 .qanda-view-more p {
text-align: center;
}
.good-to-know .good-to-know-header {
background-color: #3283C2;
padding: 10px;
}
.good-to-know .good-to-know-header h3 {
margin: 0;
text-align: center;
color: #FFF;
}
.good-to-know .good-to-know-detail {
height: 150px;
background-color: #3EA3EE;
padding: 10px;
}
.knowledge {
background-color: #83CCF9;
}
.knowledge .knowledge-header {
padding: 10px;
}
.knowledge .knowledge-header h3 {
margin: 0;
}
.knowledge .knowledge-list .knowledge{
clear: both;
padding: 10px;
display: inline-block;
}
.knowledge .knowledge-list .knowledge .left{
width: 35%;
float: left;
padding: 5px 0;
}
.knowledge .knowledge-list .knowledge .right{
width: 65%;
float: left;
}
.knowledge .knowledge-list .knowledge .right h4{
margin: 0;
font-size: 14px;
}
.knowledge .knowledge-list .knowledge .right p {
font-size: 12px;
}
.news {
background-color: #EFEFEF;
padding: 10px;
}
.news .news-header h3 {
margin: 0;
margin-bottom: 10px;
}
.news .news-list ul {
margin: 0;
padding-left: 15px;
}
.news .news-list ul li {
margin-bottom: 5px;
}
.news .news-list ul li a {
text-decoration: none;
font-size: 14px;
color: #3EA3EE;
}
.footer {
background-color: #EFEFEF;
clear: both;
display: inline-block;
width: 100%;
padding: 20px 5%;
}
.footer .left {
width: 70%;
float: left;
color: #888;
}
.footer .right {
width: 30%;
float: left;
}
.footer .right a {
margin-right: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment