"ส่วนหัว" หรือด้านบนของหน้าเว็บ ทำให้ไซต์ของคุณไม่ซ้ำกัน ทำให้ไซต์แตกต่างจากไซต์อื่นๆ และสะท้อนถึงความเฉพาะเจาะจงของโครงการอินเทอร์เน็ตของคุณ ด้วยความช่วยเหลือของส่วนหัวที่เป็นต้นฉบับและสร้างขึ้นมาอย่างดี คุณสามารถตกแต่งและปรับแต่งหน้าเว็บใดก็ได้ และเพื่อที่จะสร้างส่วนหัวด้วยตัวเอง คุณจะต้องเรียนรู้วิธีจัดวางองค์ประกอบของเว็บนี้
คำแนะนำ
ขั้นตอนที่ 1
หากคุณต้องการให้ไซต์ของคุณมีขนาดคงที่และคงที่ คุณต้องสร้างส่วนหัวแบบคงที่ที่ไม่เปลี่ยนแปลงขึ้นอยู่กับการเปลี่ยนแปลงในความกว้างของหน้าจอ กำหนดความกว้างและความสูงของส่วนหัว (เช่น 996x230) และแทรกรูปภาพพื้นหลังลงในบล็อกด้านบนโดยใช้โค้ด CSS ต่อไปนี้ โดยที่ header-1.jpg
พื้นหลัง: # a6b7d3 url (img / header-1.jpg) ไม่ซ้ำ;
ความกว้าง: 996px;
ความสูง: 230px;
} โค้ด HTML สำหรับส่วนหัวประเภทนี้จะมีลักษณะดังนี้:
ขั้นตอนที่ 2
หากไซต์ถูกสร้างขึ้นในลักษณะที่ปรับขนาดตามความกว้างของหน้าจอ ส่วนหัวควรจัดเรียงตามความละเอียดของจอภาพหลักทั้งหมด ความกว้างสูงสุดของส่วนหัวดังกล่าวควรเป็น 1920 พิกเซล หากต้องการแทรกส่วนหัวดังกล่าว ให้ใช้โค้ด CSS: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; height: 250px;} โค้ด HTML ในกรณีนี้คล้ายกับโค้ดก่อนหน้า โค้ด CSS มีการเปลี่ยนแปลงในพารามิเตอร์บางตัว - ขณะนี้มีแอตทริบิวต์สำหรับการจัดกึ่งกลางรูปภาพส่วนหัว ซึ่งช่วยให้ปรับพื้นหลังให้พอดีกับความกว้างของหน้าจอได้
ขั้นตอนที่ 3
คุณยังสามารถสร้างส่วนหัวที่ซับซ้อนมากขึ้น โดยตัดเป็นบล็อกพื้นหลังหลายๆ ส่วน ซึ่งจะเปลี่ยนตำแหน่งตามขนาดของวิวพอร์ต CSS สำหรับส่วนหัวนั้นซับซ้อนและกว้างขวางกว่า และเกี่ยวข้องกับองค์ประกอบพื้นหลังซ้ำหลายรายการตามขนาดลอยของหน้าต่างเบราว์เซอร์ที่เว็บไซต์ของคุณสามารถดูได้