Last active
December 19, 2015 07:08
-
-
Save koyoyo/5916095 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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