ก่อนอื่น ฉันต้องการระบุว่า ฉันไม่ได้ต่อต้านการวางกริดในการออกแบบ แต่ฉันต่อต้านการวางกริดในการสร้างใหม่ สิ่งนี้ควรอ้างถึงเมธอด YUI ของกริดการผูกชื่อคลาสโดยเฉพาะ คุณสามารถดูโค้ดต่อไปนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u แรก"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
เห็นได้ชัดเจนว่าชื่อ yui-u หรือ yui-g ที่นี่ไม่มีความหมาย ยังมีสิ่งแรกที่เกี่ยวข้องกับประสิทธิภาพอีกด้วย ฉันไม่รู้ว่ามีประโยคหนึ่งใน PPT ที่มาพร้อมกับหนังสือ "การสร้างเว็บไซต์ใหม่" ที่ทุกคนอ่าน - "หลังจากลบแท็กลักษณะที่ปรากฏออกจากหน้าแล้ว การออกแบบไซต์และเนื้อหาที่มีอยู่ใหม่จะช่วยประหยัดแรงงานได้มาก ( ที่ ในเวลาเดียวกันจะมีราคาถูกกว่ามาก) หากคุณต้องการเปลี่ยนผลลัพธ์ของไซต์ คุณเพียงแค่ต้องเปลี่ยนสไตล์ชีตโดยไม่ต้องเปลี่ยนหน้าเอง "โค้ดแบบข้างต้นไม่สามารถแยกโครงสร้าง ประสิทธิภาพ และพฤติกรรมที่เปลี่ยนแปลงไปจะทำให้เกิดปัญหาดังต่อไปนี้
เมื่อเปลี่ยนประสิทธิภาพ จะต้องย้าย HTML การปรับเปลี่ยนที่สวยงามจำเป็นต้องย้ายสายงานสามสาย ซึ่งใช้ทรัพยากรมนุษย์จำนวนมาก
ช่องที่ห้าที่เรียกว่า "ช่องแรก" จะปรากฏขึ้น
กล่องชื่อ "กว้าง 180" ซึ่งจริงๆ แล้วกว้าง 240 จะปรากฏขึ้น
จะมีเค้าโครงที่เรียกว่า "สี่คอลัมน์" ซึ่งจริงๆ แล้วเป็นสามคอลัมน์
จะมีคำว่าสีน้ำเงินจริงๆเป็นสีแดง
สิ่งเหล่านี้เทียบเท่ากับ "left_box" และ "right_box" ที่กำลังได้รับความนิยมในหมู่คนจำนวนมากในขณะนี้ หลังจากแก้ไขอย่างรวดเร็ว พวกเขาก็กลายเป็น "right_box" ทางด้านซ้าย นี่ไม่เท่ากับเป็นการบิดเบือนความจริงใช่ไหม? แต่จริงๆ แล้วสิ่งที่สำคัญที่สุดคือจุดแรก วิธีการทำงานนี้แตกต่างจากวิธีการทำงานกับเค้าโครงตารางก่อนหน้านี้หรือไม่? หากคุณขอเปลี่ยนสไตล์ ทั้งบริษัท (การออกแบบ เพจ การพัฒนา การทดสอบการทำงาน การตรวจสอบข้อมูล CE) จะติดตามคุณไป นี่ถือว่าไม่ฉลาดเลย
หลังจากเขียนสิ่งนี้ ฉันมองย้อนกลับไปและเปลี่ยนชื่อเรื่องให้เป็นบทความที่สองเกี่ยวกับ CSS ในซีรีส์ "This Will Be a Revolution" หากสิ่งที่กล่าวมาข้างต้นไม่ถูกต้อง ให้ฉันแสดงตัวอย่างโค้ดจากเวอร์ชันใหม่ของโปรเจ็กต์ที่ฉันเพิ่งเข้าดำเนินการเมื่อเร็วๆ นี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <div id="index_news" class="mode">
<h3 class="title">ข่าวสวัสดิการสาธารณะ</h3>
<ระดับ div = "เนื้อหา">
<ul>
<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>
<li><a href="#">ชื่อข่าว ชื่อข่าว ชื่อข่าว ชื่อข่าว</a></li>
<li><a href="#">ชื่อข่าว ชื่อข่าว ชื่อข่าว ชื่อข่าว</a></li>
</ul>
</div>
<a class="more" href="#">เพิ่มเติม</a> </div>
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] .โหมด{
ตำแหน่ง:ญาติ;
ลอย:ซ้าย;
ขนาดตัวอักษร:12px;
-
.โหมด h3.title,
.โหมด h4.title{
สี:#234C00;
การขยาย:5px 10px;
ขนาดตัวอักษร:14px;
-
.โหมด .เพิ่มเติม{
ด้านบน:5px;
ขวา:10px;
ขนาดตัวอักษร:12px;
สี:#4282ab;
ตำแหน่ง:แน่นอน;
-
.โหมด .เนื้อหา{
ชัดเจน:ทั้งสอง;
-
.mode .content: หลังจาก {
เนื้อหา:"";
จอแสดงผล: บล็อก;
ความสูง:0;
ความสูงของเส้น:0;
ชัดเจน:ทั้งสอง;
การมองเห็น: ซ่อน;
-
#index_news.mode,
#index_bbs.โหมด,
#index_area.mode{
พื้นหลัง: url (small_gray_grid.png) ซ้ำ-y -400px ด้านล่าง;
ความกว้าง:200px;
ระยะขอบ:5px 0 5px 5px;
-
#index_news.mode h3.title,
#index_bbs.mode h3.title{
พื้นหลัง: url (small_gray_grid.png) ไม่ซ้ำ -200px ด้านบน;
-
#index_news.mode .เนื้อหา
#index_bbs.mode .เนื้อหา
#index_area.mode .เนื้อหา{
พื้นหลัง: url (small_gray_grid.png) ไม่ทำซ้ำ -600px ด้านล่าง;
จอแสดงผล:ตาราง;
-
คุณสามารถเห็นข้อดีของการคิดแบบโมดูลาร์:
โมดูลที่มีอยู่สามารถนำมาใช้แบบกึ่งอัตโนมัติเพื่อประหยัดเวลาและความพยายามในการพัฒนาโค้ด
สามารถปรับให้เข้ากับความต้องการที่ผิดปกติที่แตกต่างกันของผู้จัดการผลิตภัณฑ์และเจ้านายได้อย่างอิสระ
การเปลี่ยนแปลงประสิทธิภาพข้างต้นไม่จำเป็นต้องให้นักพัฒนามีส่วนร่วม และไม่จำเป็นต้องมีการทดสอบการทำงาน
การตรวจสอบข้อมูล CE เชื่อมโยงกับ ID และไม่จำเป็นต้องปรับอินเทอร์เฟซใหม่
แต่ละคนมีหน้าที่รับผิดชอบในการพัฒนาโมดูลเดียวซ้ำอย่างรวดเร็ว
เช่นเดียวกับรหัสที่เกี่ยวข้อง ชื่อเรื่องก็คือชื่อเรื่องและเนื้อหาก็คือเนื้อหา คุณจะไม่บิดเบือนข้อเท็จจริงและตบปากตัวเอง
ฉันมีนิสัยแปลกๆ ฉันชอบที่ระหว่างการสัมภาษณ์ ฉันจะทดสอบ XHTML ของผู้สัมภาษณ์ก่อนเสมอ เช่นเดียวกับเมื่อปรมาจารย์คัดเลือกผู้ฝึกหัดในอดีต ความสามารถและสติปัญญาเป็นเรื่องรอง และลักษณะนิสัยเป็นสิ่งสำคัญอันดับแรก
ฉันเชื่อว่า XHTML เปรียบเสมือนแก่นแท้ของบุคคล CSS เปรียบเสมือนวิธีการและทัศนคติในการทำสิ่งต่าง ๆ ของบุคคล และ JS เปรียบเสมือนพฤติกรรมและสไตล์ของบุคคลในการทำสิ่งต่าง ๆ การแยกทั้งสามอย่างออกจากกันบวกกับปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์โดยรอบคือสิ่งที่เราเรียกว่าการสร้างเว็บไซต์ใหม่ ซึ่งเป็นคนที่ดีมาก ในอดีต บางคนคิดเสมอว่า CSS เป็นองค์ประกอบที่สำคัญที่สุดของเว็บไซต์ ที่จริงแล้ว CSS แสดงถึงทัศนคติต่อชีวิต แท้จริงแล้วการมีชีวิตอยู่ในสังคมปัจจุบันนั้นเป็นเรื่องยากสำหรับคนๆ หนึ่ง หากปราศจากแนวทางและทัศนคติที่ดีในการทำสิ่งต่างๆ มากเกินไป เขาก็จะกลายเป็นคนเก่งในการหลอกลวงและทำสิ่งที่ไร้ศีลธรรม .
นี่คือสิ่งที่ฉันอยากพูดมาโดยตลอด ด้วย CSS คุณสามารถเปลี่ยนลำดับซ้าย-ขวาเป็นลำดับขวา-ซ้ายได้ คุณไม่สามารถใช้เขาในทางที่ผิดเพื่อให้กลายเป็นคนที่เก่งในการหลอกลวงและทำสิ่งที่ไร้ยางอาย
