การวิเคราะห์เชิงลึกของการเขียนช่องค้นหา

มีหลายวิธีในการเขียนช่องค้นหา ช่องค้นหาเป็นงานที่ค่อนข้างละเอียดและคุณต้องคำนวณความสูงและความกว้างก่อน

ให้ฉันใช้ช่องค้นหา JD เป็นตัวอย่างเพื่อให้คุณวิเคราะห์สั้น ๆ

ข้างต้นคือการแสดงผลกล่องค้นหาขั้นสุดท้าย

ส่งรหัสก่อน >>>>>>>

 <span style = "สี: RGB (255, 0, 255); FONT-SIZE: 18PT;"> <strong> HTML TAG: </strong> </span> </van> <div> <form> <อินพุต type = "text" name = "search" place = "การค้นหา" </form> </div> สไตล์ CSS: .center_child1 {ความกว้าง: 538px; ความสูง: 36px; Overflow: Hidden; Border: 2px Solid #bd1d17;}. center_child1 อินพุต {width: 456px; ความสูง: 24px; ลอย: ซ้าย; Padding: 6px 2px; ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------ ปล่อยให้สีพื้นหลังของฉลากอินพุตมีความโปร่งใส ชายแดน: ไม่มี; ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ปุ่ม {width: 76px; ความสูง: 36px; Float: ขวา; พื้นหลัง:#bd1d17; Border: None; Color: #FFF; FONT-SIZE: 15PX;}

สรุป: กล่องค้นหามีสามส่วนหลักส่วนหนึ่งคือชิ้นส่วนกล่องอินพุต (ด้านซ้าย) ส่วนอีกส่วนหนึ่งคือส่วนปุ่มค้นหา (ด้านขวา) และอีกส่วนหนึ่งคือ Divs ขนาดใหญ่สองตัวที่บรรจุอยู่

1. แรกตั้งค่าความกว้างความสูงและสีขอบของ div ขนาดใหญ่ สิ่งนี้จะต้องคำนวณล่วงหน้าตามความต้องการส่วนบุคคล

2. ลอยด้านซ้ายของอินพุต (ส่วนกล่องอินพุต) ตามลำดับ; ลอยทางด้านขวาของปุ่ม (ส่วนปุ่ม) อย่าลืมใช้ Overflow: ซ่อน; คุณลักษณะสำหรับ divs ขนาดใหญ่;

3. ปรับความสูงและความกว้างของอินพุต อย่าลืมใช้ช่องว่างภายในเพื่อรองรับค่าความสูงของมันเพื่อที่จะไม่ยึดติดกับชายแดนเมื่อเข้าสู่ตัวอักษรเพิ่มความงาม หากค่าความกว้างถูกเพิ่มไปทางซ้ายเล็กน้อยเพื่อความงาม

ด้านบนเป็นวิธีการเขียนช่องค้นหาการค้นหาที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!