ตอนนี้กำลังแย่ละครับเขียนไปเขียนมาทำเหมือนจะต้องเขียน css จัดตำแหน่งทุกๆ สินค้าเลย ทั้งตำแหน่งทั้งขนาด มีร้อย ชิ้น ก็ css สินค้า ร้อยตัว ตายๆ ผมไม่ได้จัดใน ul อะ ถ้าจัดใน ul จะดีกว่ามั้ยอะครับ ที่จัดแบบนี้เพราะจะต้องมาปรับบนมือถืออีกที ตอนแรกคิดว่าจะใช้ class ร่วมกันได้ ไปๆมาๆต้องมาจัดขนาดรูปอีกรูปไม่เท่ากัน กกลายเป็นโค้ดเยอะเลย
html
<div class="main_content"><!--content-->
<article class="text1">
<h1 class="name_head" >
<article class="t_color">Coloring</article></h1>
<ul id="menu">
<li class='active'><a href='index.html'><span>Crayons</span></a></li>
<li><a href="about us.html"><span>Oil Pastels</span></a></li>
<li><a href="news.html"><span>Colorred Pencils</span></a></li>
<li><a href="contact_us.html"><span>Colorred Markers</span></a></li>
<li class='last'><a href="career.html"><span>Fancy</span></a></li>
</ul>
<h6 class="head_size"><font color="#FF0000">Jumbo size :</font> Bigger in diameter make the jumbo size crayon practical and last longer.</h6>
<section class="Item_10"><!--Product10-->
<img src="pic/mainproduct/1coloring/Crayons/J008(p).jpg">
<article class="Item_id">J008
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089
</article>
</section><!--Product10-->
<section class="Item_11"><!--Product11-->
<img src="pic/mainproduct/1coloring/Crayons/R012(p).jpg">
<article class="Item_id">J012
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089
</article>
</section><!--Product11-->
<section class="Item_12"><!--Product12-->
<img src="pic/mainproduct/1coloring/Crayons/XJ012.jpg">
<article class="Item_id">XJ012
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089
</article>
</section><!--Product12-->
<h6 class="head_size_2"><font color="#FF0000">Supur jumbo size : </font>These crayons are easier for young children less than 5 yaers old to hold.</h6>
<section class="Item_13"><!--Product13-->
<img src="pic/mainproduct/1coloring/Crayons/SJ008(P).jpg">
<article class="Item_id">SJ008
</article>
<article class="Item_content">
8 Ct. Super Jumbo Crayons<br>
Packing : 12/72<br>
Barcode : 8851934760087
</article>
</section><!--Product13-->
<section class="Item_14"><!--Product14-->
<img src="pic/mainproduct/1coloring/Crayons/SJO12(p).jpg">
<article class="Item_id">SJ012
</article>
<article class="Item_content">
12 Ct. Super Jumbo Crayons
Packing : 0/48
Barcode : 8851934715001
</article>
</section><!--Product14-->
<h6 class="head_size_3" >
<font color="#FF0000">Crayons Classpack Assortment : </font>This bulk packaging not only provide a clear and vivid display, but also is convenient for a group of students to use and to keep. Ideal for group activities.
</h6>
<section class="Item_15"><!--Product15-->
<img src="pic/mainproduct/1coloring/Crayons/J400_8(p).jpg">
<article class="Item_id">J400/8
</article>
<article class="Item_content">
400 Jumbo size crayons with 8 different colors 50 of each color
Packing : 0/6
Barcode :8851934500027
</article>
</section><!--Product15-->
<section class="Item_16"><!--Product16-->
<img src="pic/mainproduct/1coloring/Crayons/R800_8(p).jpg">
<article class="Item_id">R800/8
</article>
<article class="Item_content">
800 Regular size crayons with 8 different color 100 of each color
Packing :0/6
Barcode : 8851934500010
</article>
</section><!--Product16-->
<section class="Item_17"><!--Product17-->
<img src="pic/mainproduct/1coloring/Crayons/SJ200_8(p).jpg">
<article class="Item_id">SJ200/8
</article>
<article class="Item_content">
200 Super Jumbo size crayons with 8 different colors 25 of each color
Packing : 0/6
Barcode : 8851934500034
</article>
</section><!--Product17-->
<h1 class="name_head" ></h1>
<article class="page">หน้า :</article>
<ul class="list_number">
<li><a href="coloring.php">1</a></li>
<li><strong><a href="coloring2.php">[2]</a></strong></li>
</ul>
</article>
</div><!--content-->
</section><!--เนื้อหาหลัก-->
css
.Item_10 img{ padding-left:7%; border:3px #FF99FF double; padding-right:7%; margin-left:6%; margin-top:3%; width:70%; height:150px; background-color:#FFF;}
.Item_10{ margin-top:-1%; border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%;opacity:1;
filter:alpha(opacity=40); -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; margin-left:8%;}
.Item_10:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_11 img{ padding-left:0%; border:3px #FF99FF double; padding-right:0%; margin-left:6%; margin-top:3%; width:85%; height:150px; background-color:#FFF;}
.Item_11 { border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:40%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_11:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_12 img{ padding-left:0%; padding-right:0%; border:3px #FF99FF double; margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_12{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:70%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_12:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_13 img{ padding-left:0%; padding-right:0%; border:3px #FF99FF double; margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_13{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:8%; margin-top:-1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_13:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_14 img{ padding-left:0%; border:3px #FF99FF double; padding-right:0%; margin-left:6%; margin-top:3%; width:85%; height:150px; background-color:#FFF;}
.Item_14 { border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:40%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_14:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_15 img{ padding-left:0%; padding-right:0%; border:3px #FF99FF double; margin-left:6%; margin-top:3%; width:120px; height:150px }
.Item_15{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:8%; margin-top:-1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_15:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_16 img{ padding-left:0%; padding-right:0%; border:3px #FF99FF double; margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_16{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:40%; margin-top:-33%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_16:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
.Item_17 img{ padding-left:0%; padding-right:0%; border:3px #FF99FF double; margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_17{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:70%; margin-top:-33%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.Item_17:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}
พัฒนาเว็บไซต์
