ใครว่างมาสอนเขียน CSS3 ให้มือใหม่หน่อยๆๆ +1

narupot · 16 พฤษภาคม 2014, 17:44:48

narupot · 16 พฤษภาคม 2014, 17:45:23

เหมือนรูปแบบด้านล่างเลย...

อ้างถึงจาก: narupot ใน 16 พฤษภาคม 2014, 17:44:48

Synchronize · 16 พฤษภาคม 2014, 17:54:40

คำถามคืออะไรครับเนี่ย

allmarket · 16 พฤษภาคม 2014, 17:59:54

อ่อคุณจะให้เพื่อนๆในบอร์ดนี้สอนประฒาณนี้ไหมครับ

ThugzAffiliate · 16 พฤษภาคม 2014, 18:11:50

ทำไมไม่แกะเอาตามเว็บนั้นเลยละครับ

dekbannok14 · 16 พฤษภาคม 2014, 18:19:00

hทีทีp://mennstudio.com/2014/basic-css-1-normalize/

ช่วยได้เยอะคับ

narupot · 16 พฤษภาคม 2014, 18:26:44

อ้างถึงจาก: allmarket ใน 16 พฤษภาคม 2014, 17:59:54
อ่อคุณจะให้เพื่อนๆในบอร์ดนี้สอนประฒาณนี้ไหมครับ

ใช่ครับ

rukrean · 16 พฤษภาคม 2014, 19:06:40

narupot · 16 พฤษภาคม 2014, 19:10:51

อ้างถึงจาก: rukrean ใน 16 พฤษภาคม 2014, 19:06:40
<style>

ul {list-style: none}
li {list-style: disc}
.clear {clear:both}
.col {}
.col_header {font-size: 20px; margin: 0 0 10px; border-bottom: 2px solid #ddd; padding: 0 0 10px}
.col_inner {}
.col_left {float: left; width: 450px}
.col_right {float: right: width: 450px}
.col_1, .col_2, .col_3 {float: left; margin: 0 20px 0 0; width: 300px}
.col_3 {margin: 0}
.col_left_pic img {width: 450px; height: 200px}
.col_left_title {font-size: 17px; font-weight: bold}
.col_pic img {width: 300px; height; 150px}
.col_title {font-size: 17px}

</style>

<body>

<div class="col">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_inner">
<div class="col_left">
<h3 class="col_left_title"><a href="#">Title</a></h3>
<div class="col_left_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
</div>
<div class="col_right">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>

<div class="col">
<div class="col_1">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a>Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="col_2">
<div class="col_1">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="col_3">
<div class="col_1">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="clear"></div>
</div>

</body>

เขียนให้คราวๆ แค่นี้แหละครับ เขียนมากกว่า ถ้าจะเอาละเอียดกว่านี้ คงต้องเสียเงินแล้วละครับ

ขอบคุณมากพี่ +1 ครับ แชร์ความรู้ให้รุ่่นน้องอ่ะพี่...เดียวจะลองเกะดู

rukrean · 16 พฤษภาคม 2014, 19:18:50

แก้ไข ครับ และเพิ่มให้อีกหน่อย

<html>
<head>

<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
#wrapper {margin: 0 auto; width: 940px;}
.col {}
ul {list-style: none; padding: 0 0 0 20px;}
li {list-style: disc}
.clear {clear:both}
.col {}
.col_header {font-size: 20px; margin: 0 0 10px; border-bottom: 2px solid #ddd; padding: 0 0 10px}
.col_inner {}
.col_left {float: left; width: 450px}
.col_right {float: right; width: 450px}
.col_1, .col_2, .col_3 {float: left; margin: 0 20px 0 0; width: 300px}
.col_3 {margin: 0}
.col_left_pic img {width: 450px; height: 200px}
.col_left_title {font-size: 17px; font-weight: bold}
.col_pic img {width: 300px; height: 150px}
.col_title {font-size: 17px}

</style>
</head>
<body>
<div id="wrapper">
<div class="col">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_inner">
<div class="col_left">
<h3 class="col_left_title"><a href="#">Title</a></h3>
<div class="col_left_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
</div>
<div class="col_right">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>

<div class="col">
<div class="col_1">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a>Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="col_2">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="col_3">
<h2 class="col_header">หัวข้อ section</h2>
<div class="col_pic">
<a href="#"><img src="#" alt="image name"/></a>
</div>
<h3 class="col_title"><a href="#">Title</a></h3>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>

rukrean · 16 พฤษภาคม 2014, 19:20:40

MD.18 · 16 พฤษภาคม 2014, 21:33:25

อันดับแรกต้องมองภาพให้เป็นกล่องก่อนครับ แล้วค่อยไล่ไปทีละกล่อง

narupot · 17 พฤษภาคม 2014, 21:43:34

+1 ให้พี่ๆทั้ง 2 คนแล้วนะครับ...

Permlogin · 17 พฤษภาคม 2014, 22:00:34

ถ้าจะหัดทำ ลองศึกษาจาก bootstrap ดูครับ

เข้า google เเล้วพิมพ์ bootstrap โหลดของเขามาลองเเกะ เกาดูครับ เด๋วก็เป็น

cloudsphere · 17 พฤษภาคม 2014, 22:43:49

กระทู้นี้ความรู้เพียบ เยี่ยมๆ เข้ามาเก็บข้อมูลด้วยครับ

atcomink · 17 พฤษภาคม 2014, 22:53:40

เรียนด้วยคนครับ

thai2ads · 17 พฤษภาคม 2014, 23:06:41

hปปp://www.w3schools.com/css/css3_intro.asp
ผมก็อ่านจากที่นี้ครับ ไม่อยากๆคับค่อยๆทำไปทีละตัวอย่าง

AFRO · 18 พฤษภาคม 2014, 00:48:48

w3school เลยครับฝึกภาษาอังกฤษไปในตัว
แต่ถ้ารีบมากก็ bootstrap ช่วยท่านได้

narupot · 18 พฤษภาคม 2014, 00:53:27

ขอบคุณมากๆสำหรับคำแนะนำ และก็พี่ที่เขียนโค๊ดให้ ทำให้ผมรู้ส่วนแต่ละส่วนได้อย่างเด่นชัด
เพราะผมก็หวังว่ากระทุ้นี้คนที่ไม่รู้ เขาอาจจะอยากรู้กับผมด้วยก็ได้....

WrR · 18 พฤษภาคม 2014, 02:41:35

ขอบคุณมากค่ะ