ความรู้เบื้องต้นเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับโครงสร้างและประสิทธิภาพ
รูปแบบหน้าเว็บลักษณะการทำงานของ JavaScript ของโครงสร้าง HTML ควรคำนึงถึงหลักการของการแยกโครงสร้าง ประสิทธิภาพ และพฤติกรรม ขั้นแรกให้เน้นที่โครงสร้างและความหมาย จากนั้นจึงพิจารณา CSS, JS ฯลฯ เพื่ออำนวยความสะดวกในการบำรุงรักษาและการวิเคราะห์ในภายหลัง...
แนวคิดในการแยกโครงสร้างและการแสดงออก
แนวคิดและวิธีการผลิตของนักพัฒนารุ่นเยาว์: div จะถูกซ้อนกันทีละชั้น แนวคิดของนักพัฒนาระดับกลางและวิธีการผลิต: ลบ div ที่ซ้ำซ้อนและทำให้ง่ายขึ้น แนวคิดของนักพัฒนาขั้นสูงและวิธีการผลิต: ลดความซับซ้อนของโครงสร้างของ html ในระดับสูงสุด ใช้ css เพื่อตั้งค่าเพื่อลดความพอดีระหว่าง html และ css ล้น:
ค่าเริ่มต้นที่มองเห็นได้ เนื้อหาจะไม่ถูกตัดออกและจะแสดงผลนอกกล่ององค์ประกอบ
เนื้อหาที่ซ่อนอยู่จะถูกตัดออกและเนื้อหาที่เหลือจะมองไม่เห็น
scroll เนื้อหาจะถูกตัดออก แต่เบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
อัตโนมัติ หากเนื้อหาถูกตัดแต่ง เบราเซอร์จะแสดงแถบเลื่อนเพื่อดูเนื้อหาที่เหลือ
inherit ระบุว่าค่าของแอตทริบิวต์ overflow ควรสืบทอดมาจากองค์ประกอบหลัก
text-indentข้อความถูกเยื้องไปยังตำแหน่งเป้าหมาย และไม่จำเป็นต้องเพิ่มป้ายกำกับเพิ่มเติมให้กับข้อความ ลดรหัสซ้ำซ้อน
เมื่อคุณได้รับแบบร่างการออกแบบเว็บ ก่อนอื่นให้ใส่ใจกับเนื้อหาข้อความของหน้าเว็บและความสัมพันธ์ระหว่างโมดูลเนื้อหา
มุ่งเน้นไปที่การเขียนโค้ด HTML เชิงความหมาย แทนที่จะคิดมากเกินไปเกี่ยวกับสไตล์ของแบบร่างการออกแบบ
รอจนกระทั่งเขียน html ตามเนื้อหา จากนั้นจึงพิจารณาการนำสไตล์ไปใช้
กรอกเอฟเฟ็กต์ภาพตามแบบการออกแบบโดยไม่ต้องเปลี่ยนโครงสร้างที่มีอยู่
มาร์จิ้นอาจเป็นค่าลบ และด้วยค่าลบ เนื้อหาจึงสามารถย้ายได้! บรรลุการเคลื่อนไหวในสี่ทิศทาง
ในโครงสร้าง (HTML) และสไตล์ (css) คุณสามารถเขียนเนื้อหาใน HTML ก่อน จากนั้นใช้ระยะขอบเพื่อย้ายตำแหน่งเพื่อให้ได้งานเรียงพิมพ์ ลดการประกบกันระหว่างสไตล์และโครงสร้าง และลดโค้ด
การสร้างสกินเพจและสรุปหน้าเว็บ
ลดการพึ่งพา CSS ของ html
การสร้างสกินเพจ: โครงสร้าง html เดียวกัน, สไตล์ CSS ต่างกัน
ด้านล่างนี้คือการแบ่งปันบางส่วนจากนักเรียน Grey Niu WEB
เมื่อเราเริ่มติดต่อกับการผลิตหน้าเว็บ เราได้เรียนรู้ว่า html แสดงถึงโครงสร้าง css แสดงถึงสไตล์ และ javascript แสดงถึงพฤติกรรม ในการผลิตหน้าเว็บ เรามักจะเน้นถึงหลักการของการแยกโครงสร้างและประสิทธิภาพโดยทั่วไป นอกจากนี้ การแยกคือ คุณกำลังพูดถึงการเขียนลงในไฟล์ต่าง ๆ และอ้างอิงถึงพวกเขาหรือไม่? ไม่แน่นอน จากการศึกษาที่นี่ ฉันได้เรียนรู้ว่าการแยกไม่ได้เป็นเพียงวิธีการเท่านั้น แต่ยังเป็นแนวคิดด้วย กล่าวโดยสรุป มันคือพิกัดสองมิติ โดยที่แกน x แสดงถึงการพัฒนาทางเทคโนโลยี และแกน y แสดงถึงหน้าเว็บ ความต้องการในการผลิต การแยกจะเสร็จสมบูรณ์ตามการพัฒนาทางเทคโนโลยีและความต้องการในการผลิตหน้าเว็บของเรา!
ตัวอย่างเช่น ถ้าเราสร้างบ้าน HTML จะเทียบเท่ากับโครงสร้างของบ้าน และ CSS จะเท่ากับการตกแต่งในภายหลัง เมื่อเราเรียกดูหน้าเว็บ รูปแบบต่างๆ จะแตกต่างกันไปขึ้นอยู่กับการเรนเดอร์ ดังนั้น เรามีหน้าทุกประเภทให้เรียกดู แล้วเราจะจัดวางหน้าเว็บอย่างไร? ก่อนอื่น อย่าคิดมากเกี่ยวกับสไตล์ CSS พยายามทำให้โครงสร้าง HTML ของเราสมเหตุสมผล กระชับ และมีความหมาย จากนั้นจึงเพิ่มและปรับปรุงสไตล์ CSS!
เมื่อเราได้รับหน้านี้ ผู้ผลิตแต่ละรายมีความเชื่อมโยงที่แตกต่างกันไปยังรูปแบบโครงสร้าง ขึ้นอยู่กับความเข้าใจเชิงลึกที่แตกต่างกันของรูปแบบโครงสร้าง มันถูกแบ่งออกเป็นสามระดับเบื้องต้น: ระดับหลัก ระดับกลาง และขั้นสูง;
ตัวอย่างเช่น กล่องโต้ตอบทั่วไปมีสามหน่วย อันดับแรก เราต้องดำเนินการหน่วยหนึ่งให้เสร็จสิ้นและดำเนินการ CTRL+V ในอีกหน่วยหนึ่ง หากผู้ผลิตรุ่นเยาว์ได้รับหน้านั้น เขามักจะแบ่งหน้าตามกล่องด้านบน div ประกอบด้วย div ขนาดเล็ก 2 รายการ ลอยไปทางซ้ายและขวา img ทางด้านซ้าย p, h และแท็กอื่นๆ ทางด้านขวา สำหรับปัจจัยด้านเวลานั้น จะถูกนำไปใช้ผ่านการวางตำแหน่งแอตทริบิวต์ของตำแหน่ง เรามาอธิบายด้วยโค้ดด้านล่างนี้
<ระดับ div="demo1">
<div class="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>10 นาทีที่แล้ว</span>
<h6>เดินออกห่างจากหนังสือมากขึ้นเรื่อยๆ</h6>
<p>
คุณมีความคิดที่ค้างคาอยู่ในใจทุกวันและรู้สึกว่าคุณยุ่งมากหรือไม่ หากคุณคิดให้รอบคอบ คุณจะไม่รู้ว่าจริงๆ แล้วคุณยุ่งอยู่กับอะไร เพียงแต่พัฒนานิสัยที่ดี ดูแลตัวเองให้ดี และทำตามความฝันคุณสามารถเพิ่มผลผลิตได้ ซึ่งยังหมายถึงการปรับปรุงความสัมพันธ์ของคุณกับครอบครัวและเพื่อนฝูงด้วย เพราะเมื่อคุณเปลี่ยนแปลง ทุกสิ่งรอบตัวคุณก็จะเปลี่ยนไป
</p>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>10 นาทีที่แล้ว</span>
<h6>เดินออกห่างจากหนังสือมากขึ้นเรื่อยๆ</h6>
<p>
คุณมีความคิดที่ค้างคาอยู่ในใจทุกวันและรู้สึกว่าคุณยุ่งมากหรือไม่ หากคุณคิดให้รอบคอบ คุณจะไม่รู้ว่าจริงๆ แล้วคุณยุ่งอยู่กับอะไร เพียงแต่พัฒนานิสัยที่ดี ดูแลตัวเองให้ดี และทำตามความฝันคุณสามารถเพิ่มผลผลิตได้ ซึ่งยังหมายถึงการปรับปรุงความสัมพันธ์ของคุณกับครอบครัวและเพื่อนฝูงด้วย เพราะเมื่อคุณเปลี่ยนแปลง ทุกสิ่งรอบตัวคุณก็จะเปลี่ยนไป
</p>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">10 นาทีที่แล้ว</span>
<h6>เดินออกห่างจากหนังสือมากขึ้นเรื่อยๆ</h6>
<p>
คุณมีความคิดที่ค้างคาอยู่ในใจทุกวันและรู้สึกว่าคุณยุ่งมากหรือไม่ หากคุณคิดให้รอบคอบ คุณจะไม่รู้ว่าจริงๆ แล้วคุณยุ่งอยู่กับอะไร เพียงแต่พัฒนานิสัยที่ดี ดูแลตัวเองให้ดี และทำตามความฝันคุณสามารถเพิ่มผลผลิตได้ ซึ่งยังหมายถึงการปรับปรุงความสัมพันธ์ของคุณกับครอบครัวและเพื่อนฝูงด้วย เพราะเมื่อคุณเปลี่ยนแปลง ทุกสิ่งรอบตัวคุณก็จะเปลี่ยนไป
</p>
</div>
</div>=>3 การสาธิตที่แตกต่างกันแสดงถึงโครงสร้างเพจที่แตกต่างกัน 3 แบบ ||.
/*รีเซ็ต*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0; ช่องว่างภายใน: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "Microsoft Yahei", "宋体", "ทาโฮมา"}
/*รูปแบบสาธารณะ*/
.demo1,.demo2{
ความกว้าง: 600px;
ขอบบน: 20px;
ล้น: ซ่อนเร้น;
ขอบล่าง: 20px;
-
พี{
การจัดแนวข้อความ: จัดชิดขอบ;
เยื้องข้อความ: 2em;
ความสูงของบรรทัด: 24px;
-=>โปรดิวเซอร์รุ่นเยาว์ css
/*หลัก*/
.เดโม1{
ความกว้าง: 600px;
ขอบบน: 20px;
ล้น: ซ่อนเร้น;
-
.demo1 .fl{
ความกว้าง: 100px;
ลอย: ซ้าย;
-
.demo1 .fl img{
ขอบซ้าย: 20px;
ช่องว่างภายใน: 10px;
เส้นขอบ: 1px ทึบ #ccc;
-
.demo1 .fr{
ความกว้าง:488px;
ลอย: ขวา;
เส้นขอบ: 1px ทึบ #ccc;
ตำแหน่ง: ญาติ;
ช่องว่างภายใน: 5px;
-
.demo1 .fr ช่วง{
ตำแหน่ง: แน่นอน;
ขวา:18px;
ด้านบน: 5px;
-=>CSS ของผู้ผลิตระดับกลาง โครงสร้างจะง่ายขึ้นเมื่อเทียบกับระดับพื้นฐาน div ทางด้านซ้ายจะถูกลบออก และส่วนทางด้านขวาจะยังคงอยู่
/*ระดับกลาง*/
.demo2 .fr{
ความกว้าง:488px;
ลอย: ขวา;
เส้นขอบ: 1px ทึบ #ccc;
ตำแหน่ง: ญาติ;
ช่องว่างภายใน: 5px;
-
.demo2 .fr ช่วง{
ตำแหน่ง: แน่นอน;
ขวา:18px;
ด้านบน: 5px;
-
.demo2 img{
ขอบซ้าย: 20px;
ช่องว่างภายใน: 10px;
เส้นขอบ: 1px ทึบ #ccc;
-=>CSS ผู้ผลิตขั้นสูง: ขั้นแรกให้เขียนโค้ดตามโครงสร้างและซีแมนทิกส์ จากนั้นตั้งค่าสไตล์ CSS ซึ่งจะลดความพอดีระหว่าง CSS และ html (การเคลื่อนไหวของเอกสาร การย้ายรูปภาพออก คุณลักษณะการวางตำแหน่ง)
/*ขั้นสูง*/
.เดโม3{
เส้นขอบ: 1px ทึบ #ccc;
ความกว้าง: 488px;
ขอบซ้าย: 100px;
ช่องว่างภายใน: 5px;
ตำแหน่ง: ญาติ;
-
.demo3 img{
ลอย: ซ้าย;
ระยะขอบ:-6px 0 0 -86px;
ช่องว่างภายใน: 10px;
เส้นขอบ: 1px ทึบ #CCCCCC;
-
.demo3 ช่วง{
ตำแหน่ง: แน่นอน;
ด้านบน: 10px;
ขวา: 20px;
-สรุป: เมื่อคุณได้รับแบบการออกแบบเว็บ คุณต้องสังเกตความสัมพันธ์ระหว่างโมดูลข้อความและเนื้อหา เน้นการเขียนโค้ด HTML เชิงความหมาย และอย่าคิดมากเกินไปเกี่ยวกับรูปแบบเค้าโครงของห้องออกแบบ รอจนกว่าโค้ด HTML จะเสร็จสมบูรณ์ แก้ไขแล้ว หลังจากเสร็จสิ้น ให้พิจารณาวิธีการนำไปใช้ และพยายามสร้างเอฟเฟ็กต์ภาพที่จำเป็นสำหรับงานศิลปะการออกแบบโดยไม่ต้องเปลี่ยนโครงสร้างหน้าที่มีอยู่ (คลิกเพื่อดาวน์โหลดโครงสร้างที่สมบูรณ์และโค้ดหลักประสิทธิภาพของเค้าโครงหน้าเว็บแบบง่าย)
ข้างต้นเป็นเนื้อหาโดยละเอียดที่แบ่งปันเกี่ยวกับโครงสร้างและหลักการทำงานของรูปแบบหน้าเว็บแบบง่าย สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างและหลักการทำงานของรูปแบบหน้าเว็บแบบง่าย โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องใน downcodes.com!