แบบงี้ไม่ทราบทำยังไงครับ พี่กูรูช่วยหน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แบบงี้ไม่ทราบทำยังไงครับ พี่กูรูช่วยหน่อยครับ

แบบงี้ไม่ทราบทำยังไงครับ พี่กูรูช่วยหน่อยครับ

รูปข้อความ กรอบล้อมรอบ สองคอลัม สวยดีครับ สอนหน่อยครับ
http://uppic.net/full/ae2e6ff6027c6b83f76bed61d1778563

สวยและดูง่ายดีครับอยาก นำไปทำหน้าเว็บอ่ะครับ ขอผุ้รู้ช่วยแนะนำด้วยน่ะครับ



Boy415 15-07-2010 16:34:26

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

แนะนำให้ศึกษา หรือหาความรู้เพิ่มเติมเกี่ยวกับ การใช้งาน css
http://htmldog.com/guides/cssbeginner/
http://www.w3schools.com/css/default.asp
https://www.ninenik.com/css-manual/cover.html#minitoc

หรือ สามารถ คลิกขวา วิวซอร์ส เพื่อดูรูปแบบโค้ดในหน้าเว็บดังกล่าว
http://www.classroom-design.com/news/

ตัวอย่าง

ความสัมพันธ์แห่งชีวิต
ผลงานภาพพิมพ์ โลหะร่องลึก โดย พัดชา แก้วทองตาล นำเสนอแง่คิดในเชิงบวก เกี่ยวกับความสัมพันธ์ระหว่างมนุษย์กับสรรพชีวิตแวดล้อมใน ธรรมชาติ ซึ่งมีความเกี่ยวโยงและเอื้ออิงกันอยู่อย่างลึกซึ้งดุจดั่งห่วง โซ่แห่งชีวิต ในนิทรรศการ "ความสัมพันธ์แห่งชีวิต"


CSS โค้ดตัวอย่าง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
.new-rows {
    border-bottom:#999 1px dotted;
    text-align:justify;
    border-left:#999 1px dotted;
    width:288px;
    font-family:Arial, Helvetica, sans-serif;
    float:left;
    height:150px;
    border-top:#999 1px dotted;
    border-right:#999 1px dotted;
    margin:5px;
    padding:10px;
}
 
.news-pic {
    border-bottom:#999 1px solid;
    border-left:#999 1px solid;
    background-color:#fff;
    width:110px;
    float:left;
    height:110px;
    border-top:#999 1px solid;
    margin-right:5px;
    border-right:#999 1px solid;
}
 
.news-pic img {
    width:100px;
    height:100px;
    margin:5px;
}
 
.news-detail {
    width:500px;
    float:left;
}
 
.news-head {
    text-align:left;
    font-family:CordiaNew;
    color:#f60;
    font-weight:700;
}
</style>

HTML โค้ดตัวอย่าง

1
2
3
4
5
6
7
8
9
10
11
<div class="new-rows">
  <div class="news-pic">
  <a title="ความสัมพันธ์แห่งชีวิต" href="http://www.classroom-design.com/news/news_detail.php?id=58">
  <img src="http://www.classroom-design.com/news/images_news/graphic-news_58.jpg"></a></div>
  <span class="news-head">
  <a title="ความสัมพันธ์แห่งชีวิต" href="http://www.classroom-design.com/news/news_detail.php?id=58">
  ความสัมพันธ์แห่งชีวิต
  </a></span><br>
  ผลงานภาพพิมพ์ โลหะร่องลึก โดย พัดชา แก้วทองตาล นำเสนอแง่คิดในเชิงบวก เกี่ยวกับความสัมพันธ์ระหว่างมนุษย์กับสรรพชีวิตแวดล้อมใน
  ธรรมชาติ ซึ่งมีความเกี่ยวโยงและเอื้ออิงกันอยู่อย่างลึกซึ้งดุจดั่งห่วง โซ่แห่งชีวิต ในนิทรรศการ "ความสัมพันธ์แห่งชีวิต"
  </div>



ninenik 15-07-2010







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ