เส้นแนวนอนและแนวตั้งโดยใช้ html และ css วิธีสร้างเส้นโดยใช้ HTML และ CSS สามเส้นแนวตั้ง

ทักทายผู้อ่านทุกท่าน ในบางครั้งช่างฝีมือต้องเผชิญกับปัญหาในการสร้างเส้นแนวนอนหรือแนวตั้งโดยใช้ HTML หรือ CSS นี่คือสิ่งที่ฉันจะบอกคุณในวันนี้

เส้นใน CSS

มีหลายวิธีในการสร้างเส้น วิธีหนึ่งคือการใช้ CSS หรือค่อนข้างใช้ Border ลองดูตัวอย่าง

และนี่คือสิ่งที่จะเกิดขึ้นตามมา

เส้นแนวนอนและแนวตั้งโดยใช้ CSS

สามารถวาดเส้นใน CSS ได้โดยใช้ตัวดำเนินการ Border หากคุณต้องการสี่เหลี่ยมผืนผ้าที่มีความกว้างของเฟรมคงที่ คุณสามารถใช้โอเปอเรเตอร์นี้และกำหนดค่าให้กับมันได้ ตัวอย่างเช่น เส้นขอบ:5px solid #000000; จะหมายความว่าเส้นขอบของบล็อกมีความกว้างเท่ากับ 5 พิกเซลเป็นสีดำ

อย่างไรก็ตาม หากคุณจำเป็นต้องกำหนดขอบเขตไม่ทั้งหมด แต่เพียงบางส่วนเท่านั้น คุณจะต้องระบุว่าขอบเขตใดที่จำเป็นและแต่ละขอบเขตจะมีค่าเท่าใด เหล่านี้คือตัวดำเนินการ:

border-top – ตั้งค่าของเส้นขอบด้านบน
border-bottom – ตั้งค่าของเส้นขอบด้านล่าง
border-left – ตั้งค่าของเส้นขอบด้านซ้าย
border-right - ตั้งค่าของเส้นขอบด้านขวา

เส้นแนวตั้งและแนวนอนในรูปแบบ HTML

คุณสามารถสร้างบรรทัดใน HTML ได้ เมื่อต้องการทำเช่นนี้ คุณสามารถใช้แท็ก hr

ในกรณีนี้ เส้นแนวนอนจะถูกวาดขึ้น โดยสูง 1 พิกเซลและเต็มความกว้าง

แต่แท็กนี้สามารถกำหนดค่าบางอย่างได้เช่นกัน

ความกว้าง– ตั้งค่าความกว้างของเส้น
สี– กำหนดสีของเส้น
จัดตำแหน่ง– กำหนดการจัดตำแหน่งไปทางซ้าย, กลาง, ขวา
ขนาด– ตั้งค่าความหนาของเส้นเป็นพิกเซล

การใช้แท็ก hr ช่วยให้คุณสามารถกำหนดเส้นแนวตั้งได้ แต่ในกรณีนี้คุณจะต้องหันไปใช้สไตล์อีกครั้ง

ในกรณีนี้ เส้นแนวตั้งจะถูกวาดให้สูง 100 พิกเซล หนา 1 พิกเซล และเยื้อง 5 พิกเซล

บทสรุป.

ตอนนี้คุณรู้แล้วว่าคุณสามารถตั้งค่าเส้นแนวตั้งและแนวนอนได้อย่างไร เส้นสามารถตั้งค่าได้ทั้งบนไซต์ปกติโดยใช้ HTML และสามารถตั้งค่าบนไซต์ที่ใช้ CMS เช่น WordPress แต่ในกรณีนี้ คุณจะต้องสลับไปที่โหมด HTML

หากคุณมีคำถามเพิ่มเติม ถามพวกเขาในความคิดเห็น

สวัสดีสมาชิกผู้ภักดีของเว็บไซต์การฝึกอบรมของฉันตลอดจนแขกของบล็อก คุณเคยสังเกตเห็นบนหน้าทรัพยากรบนเว็บที่มีเส้นแนวตั้งใน html แยกข้อมูลบางอย่างหรือไม่? นี่เป็นวิธีง่ายๆ แต่มีประสิทธิภาพในการดึงดูดความสนใจของผู้อ่านไปยังส่วนที่ต้องการของเนื้อหา

ดังนั้น ฉันจึงอยากจะอุทิศเอกสารนี้เพื่อศึกษาเครื่องมือและแท็กสำหรับการกำหนดเส้นแนวตั้ง และยังบอกว่าเทคนิคนี้สามารถนำมาใช้ได้อีกที่ใดบ้าง มาเริ่มกันเลย!

การแยกข้อความแนวตั้งมีไว้เพื่ออะไร?

นักพัฒนาและนักออกแบบเว็บไซต์กำลังพยายามสร้างเว็บไซต์ที่ไม่ซ้ำใครซึ่งจะมีส่วนติดต่อผู้ใช้ที่สะดวกและใช้งานง่าย ทั้งหมดนี้ทำได้โดยใช้เครื่องมือและวิธีการต่างๆ และสไตล์ชีต CSS

ส่วนใหญ่แล้วจะมีการเน้นเสียงในเนื้อหาข้อความของหน้าต่างๆ สำหรับสิ่งนี้เราใช้:

แท็กพิเศษ เช่น < แข็งแกร่ง>, < ฉัน>, < ใหญ่>และอื่น ๆ ;
การแบ่งข้อความออกเป็นย่อหน้าและการป้อนหัวเรื่องในระดับต่างๆ
การเลือกวัตถุโดยใช้สิ่งต่าง ๆ ;
การเปลี่ยนรูปแบบตัวอักษร
การแนะนำเฟรมเฟรมเข้าไปในเนื้อหา ฯลฯ

ลองพิจารณาประเด็นสุดท้าย

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

องค์ประกอบภาษา CSS นี้มีความยืดหยุ่นสูงและสามารถกำหนดเฟรมได้ทุกด้านหรือเพียงด้านเดียวของออบเจ็กต์ที่เลือก ฉันได้ระบุคุณสมบัติที่สำคัญไว้ในตารางแล้ว

คุณสมบัติทั้งหมดที่กล่าวมาข้างต้นสามารถควบคุมความหนาของเส้น สี และสไตล์การนำเสนอได้

ฉันอยากจะทราบว่าขอบเขตสามารถดูได้มากกว่าแค่เส้นตรง นอกจากนี้ยังอาจปรากฏ:

จุด(ประ)
จุด(ประ)
เชิงเส้น(แข็ง)
สองเท่า(สองเท่า)
ปริมาตร(ร่อง แทรก สัน และนอก) เฟรม
หรือทำซ้ำการตั้งค่าสไตล์ของบรรพบุรุษโดยใช้คีย์เวิร์ดสืบทอด

บางครั้งฉันเจอคำถามเช่น: “เส้นขอบสามารถแสดงเป็นรูปภาพได้หรือไม่ และต้องทำอย่างไร” คำตอบคือใช่ และนี่ก็ทำได้ง่ายมาก

ด้วยเหตุนี้ผู้สร้าง CSS จึงได้จัดเตรียมองค์ประกอบนี้ไว้ เส้นขอบภาพซึ่งคุณต้องระบุเส้นทางไปยังรูปภาพและอธิบายความหนาของเส้นขอบแต่ละด้าน

ส่วนการปฏิบัติ

ฉันคิดว่าถึงเวลาที่จะทดสอบทฤษฎีแล้ว งานของคุณคือเขียนเนื้อหาและแยกประเด็นสำคัญหรือเครื่องหมายคำพูดด้วยเส้นแนวตั้ง รหัสตัวอย่างแสดงไว้ด้านล่าง:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

เส้นแนวตั้ง

ข้อความชิ้นนี้มีความสำคัญมาก

เส้นแนวตั้ง

ย่อหน้าแรก. ใช้เส้นขอบซ้าย

ในย่อหน้าแรก ให้เน้นจุดสำคัญของข้อความด้วยเส้นสีม่วงคู่ซ้าย

ข้อความชิ้นนี้มีความสำคัญมาก

ย่อหน้าที่สอง การใช้ภาพเส้นขอบ

ในย่อหน้าที่สอง เราเน้นจุดสำคัญของข้อความด้วยเส้นแนวตั้งทางด้านซ้ายในรูปแบบของรูปภาพ

ข้อความชิ้นนี้มีความสำคัญมาก

ดังที่คุณอาจสังเกตเห็นแล้วว่าวัสดุนี้มีน้ำหนักเบามาก แต่อาจมีประโยชน์ในการแก้ปัญหาต่างๆ มากมาย ด้วยเหตุนี้ฉันจึงบอกลาคุณ อย่าลืมสมัครสมาชิกและเชิญเพื่อนของคุณเข้าร่วมทีมที่เป็นมิตรของเรา ลาก่อน!

ขอแสดงความนับถือ Roman Chueshov

รูปภาพมีคุณสมบัติที่น่าสนใจหลายประการที่สามารถอนุมานได้โดยใช้การแปลงโดยตรง (18) ในสถานการณ์ทางกายภาพอย่างง่าย เพื่อจุดประสงค์ของเราในปัจจุบัน เราไม่ต้องการสูตรทั่วไปที่สมบูรณ์ (18) เอฟเฟ็กต์ที่เราต้องการแสดงสามารถแสดงให้เห็นได้ แม้ว่าพารามิเตอร์ทั้งหมดที่แสดงลักษณะของตำแหน่งกล้องจะเท่ากับศูนย์ ยกเว้นมุมเอียงหนึ่งมุม ดังนั้นเราจึงนำและแปลงนิพจน์ (18) ให้เป็นรูปแบบที่ง่ายกว่า:

เรามาสำรวจคุณสมบัติของภาพของเส้นแนวตั้งกันดีกว่า เส้นแนวตั้งของวัตถุถูกวาดโดยจุดวัตถุ

โดยที่พิกัดของจุดที่เส้นตัดกับระนาบพื้น และ z คือพารามิเตอร์อิสระ ค่าที่ได้จะนำมาจากจำนวนจริงทั้งหมด หากเราแทน v ลงในสูตร (27) และกำจัดพารามิเตอร์อิสระ z ออกจากสมการทั้งสอง เราจะได้สมการของเส้นตรงบนระนาบภาพ

การวิเคราะห์สมการง่ายๆ นี้ให้ผลข้อสังเกตที่น่าสนใจหลายประการ สิ่งที่สำคัญที่สุดคือจุดตัดแกน Z ไม่ขึ้นอยู่กับตำแหน่งของเส้นแนวตั้ง ขึ้นอยู่กับว่าเส้นนั้นเป็นแนวตั้งจริงหรือไม่ ดังนั้น สำหรับเรขาคณิตของกล้องที่กำหนด ภาพของเส้นแนวตั้งทั้งหมดจะผ่านจุดหนึ่งของจุด Schof แนวตั้ง ซึ่งพิกัดในภาพจะเท่ากับ

ข้าว. 10.4. จุดที่หายไป

ข้าว. รูปที่ 10.4 แสดงให้เห็นผลกระทบนี้ในภาพลูกบาศก์เดี่ยวที่ถ่ายด้วยกล้องที่เอียงลงอย่างมาก เครื่องอ่านสามารถตรวจสอบคุณสมบัติอื่นๆ ของสมการ (28) ที่สอดคล้องกับสัญชาตญาณ ตัวอย่างเช่น หากคุณเพิ่มจากศูนย์เป็น 90° จุดที่หายไปในแนวตั้งจะเคลื่อนไปทางศูนย์กลางของระนาบภาพ และความชันของเส้นจะตื้นขึ้น ในทำนองเดียวกัน สำหรับมุมกล้องใดๆ ก็ตาม เอฟเฟ็กต์นี้จะสังเกตเห็นได้ชัดเจนมากขึ้นเมื่อเส้นแนวตั้งของวัตถุเคลื่อนไปทางขอบของขอบเขตการมองเห็น (เช่น เมื่อ

มีขนาดใหญ่เมื่อเทียบกับ ) ดังนั้น จุดหายไปในแนวตั้งสามารถกำหนดได้จากพารามิเตอร์ของกล้องเท่านั้น และจะกำหนดเงื่อนไขที่จำเป็นง่ายๆ บนภาพของเส้นแนวตั้ง

10.5.4. เส้นแนวนอนและจุดแนวนอน

เป็นตัวอย่างสุดท้ายของการใช้การแปลงเปอร์สเปคทีฟ เรามาตรวจสอบคุณสมบัติบางอย่างของภาพของเส้นแนวนอนกัน เพื่อความง่าย เราจะพิจารณาภาพของเส้นวัตถุที่วางอยู่บนระนาบพื้นของระบบพิกัดโลก จุดใดๆ ของวัตถุที่วางอยู่บนเส้นดังกล่าวจะมีที่ และ b ตามลำดับ คือความชันของเส้นและความยาวของส่วนที่ตัดออกโดยเส้นนี้บนแกนพิกัด Y เนื่องจากเราต้องการถ่ายภาพวัตถุ หากวางบนพื้น ควรยกกล้องขึ้นเหนือพื้นและอาจหันลงด้านล่างจะดีกว่า ด้วยเหตุนี้ เราจึงนำพารามิเตอร์ทางเรขาคณิตของกล้องมาในรูปแบบและปล่อยให้ค่าเป็นบวกและลบ สำหรับพารามิเตอร์เหล่านี้ การแปลงโดยตรง (18) จะถูกทำให้ง่ายขึ้นดังนี้:

หลังจากแทนที่เป็นสูตร (29) และกำจัดพารามิเตอร์อิสระ x ออกจากสมการทั้งสอง เราจะได้สมการของเส้นตรงบนระนาบรูปภาพ

ไม่มีคุณสมบัติที่เรียบง่ายโดยเฉพาะของความชันของเส้นรูปภาพนี้หรือจุดตัดกับแกนพิกัด อย่างไรก็ตาม ลองพิจารณาจุดตัดของเส้นภาพนี้กับเส้นขอบฟ้าของภาพนี้ เส้นขอบฟ้าของภาพใดๆ ถูกกำหนดให้เป็นจุดตัดของระนาบภาพโดยมีระนาบที่ผ่านศูนย์กลางของเลนส์ขนานกับพื้น ดังแสดงในมุมมองด้านข้างของรูป 10.5 สมการของเส้นขอบฟ้า (ในพิกัดภาพ) มีรูปแบบ เห็นได้ชัดว่าพิกัด X ของจุดตัดกันของเส้นภาพ (30) กับเส้นขอบฟ้าถูกกำหนดโดยการทำให้นิพจน์ (30) เท่ากันกับค่า - ต้องแก้สมการผลลัพธ์แล้ว

สัมพันธ์กับพิกัดของจุดตัดกับขอบฟ้า เราพบว่า

ผลลัพธ์นี้สามารถหาได้โดยการแทนที่นิพจน์ (29) ลงในสมการแรกและส่งผ่านไปยังขีดจำกัดเมื่อ x มีแนวโน้มจะไม่มีที่สิ้นสุด ด้วยเหตุนี้ จุดตัดกับขอบฟ้าจึงสมควรเรียกว่าจุดหายในแนวนอน หรือจุดหายกับขอบฟ้าของภาพเส้นที่กำหนด นี่คือขีดจำกัดที่จุดภาพมีแนวโน้มในขณะที่จุดวัตถุเคลื่อนที่ไปยังระยะอนันต์ตามแนวเส้นตรง

ข้าว. 10.5. ไปสู่การคำนวณเส้นขอบฟ้า

เราสามารถให้ข้อสังเกตที่น่าสนใจเกี่ยวกับนิพจน์ได้หลายประการ (31) ขั้นแรก โปรดทราบว่าจุดที่หายไปนั้นไม่ขึ้นอยู่กับความสูงของกล้องเหนือระนาบที่มีเส้นวัตถุ ประการที่สอง จุดที่หายไปไม่ได้ขึ้นอยู่กับพารามิเตอร์การแปล b ในสมการเส้นวัตถุ ดังนั้น เราสามารถสรุปที่สำคัญได้ว่า เส้นตรงสองเส้นใดๆ ที่ขนานกับระนาบพื้นมีจุดหายไปที่เหมือนกัน ถ้าหากเส้นทั้งสองขนานกัน สุดท้าย สมมติว่าเรามีเส้นตั้งฉากสองเส้นของวัตถุที่วางอยู่บนระนาบขนานกับพื้น ปล่อยให้ความลาดชันของมันอยู่ และจุดที่หายไปกับเส้นขอบฟ้านั้นมีพิกัด และเนื่องจากเส้นเหล่านี้ตั้งฉาก . ดังนั้นเราจึงได้โดยตรงจากสูตร (31)

จุดที่หายไปทั้งสองนั้นบางครั้งเรียกว่าจุดที่หายไปแบบคอนจูเกต เนื่องจากผลคูณของพวกมันมีค่าเป็นลบ พวกมันจึงมักจะอยู่ด้านตรงข้ามของเส้นกึ่งกลางของรูปภาพ ดังแสดงในรูปที่ 1 10.4. จุดหายไปของคอนจูเกตเป็นตัวอย่างของวิธีการแปลงข้อจำกัดที่กำหนดบนวัตถุ (กล่าวคือ ความตั้งฉาก) ให้เป็นข้อจำกัดง่ายๆ บนรูปภาพ

เส้นแนวนอนสร้างขึ้นโดยแท็กที่ไม่มีการจับคู่ (ไม่จำเป็นต้องมีแท็กปิด)

และอาจเป็นองค์ประกอบการออกแบบที่ค่อนข้างมีเอกลักษณ์ การจัดรูปแบบข้อความโดยเพิ่มเส้น HTML แนวนอนจะทำให้หน้ามีตรรกะในการนำเสนอข้อความ และยังช่วยให้ผู้อ่านเน้นกลุ่มข้อมูลที่ต้องศึกษาตามลำดับได้ง่ายขึ้นอีกด้วย แท็ก

สามารถสร้างเส้นแนวนอนที่มีสี ความหนา และความยาวต่างกันได้ และนี่ค่อนข้างง่ายที่จะทำ ดังที่แสดงในตัวอย่างด้านล่าง

อย่างไรก็ตาม คุณยังสามารถใช้คุณสมบัติสไตล์บล็อกได้

และ

สำหรับการขึ้นรูปเส้น
ณ สถานที่แห่งหนึ่ง จริงอยู่ที่ตัวเลือกนี้อาจไม่สะดวกเสมอไปเช่นบางครั้งการทาสีก็ไม่ได้ให้ผลดีเสมอไป แต่ในหลายกรณีก็เป็นไปได้ที่จะแก้ไขปัญหาด้วยวิธีนี้ เช่น ภายในมีเส้นเกิดขึ้น แท็ก
คุณไม่สามารถแทรกข้อความได้ แต่ภายในบล็อก สิ่งนี้เป็นไปได้และมีการฝึกฝนอย่างต่อเนื่อง ดังนั้นคุณต้องเลือกตัวเลือกของคุณขึ้นอยู่กับข้อกำหนดการออกแบบ

เส้นแนวตั้งใน HTML

ก เส้นแนวตั้งที่จริงแล้วถูกสร้างขึ้นในบล็อกเดียวกัน

และ

.
ความไม่สะดวกเพียงอย่างเดียวคือแท็กไม่พร้อมใช้งานในทุกเบราว์เซอร์
ทำงานเหมือนกัน แต่คุณต้องลองที่นี่
และปรับหน้าหรือใช้เบราว์เซอร์ที่อัปเดต

การก่อตัวของเส้นแนวนอน:

แท็ก
แทรกเส้นแนวนอนลงบนหน้าและมีคุณลักษณะดังต่อไปนี้:

ไวยากรณ์แท็ก
:

ตัวอย่างของเส้นแนวนอนใน HTML:

ตัวอย่างของเส้นแนวตั้งใน HTML:

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านซ้าย

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านขวา

นี่คือตัวอย่างของเส้นสีแดงแนวนอนที่ด้านบน

นี่คือตัวอย่างของเส้นแนวนอนที่เป็นสีแดงด้านล่าง

นี่คือตัวอย่างของเส้นแนวนอนและแนวตั้ง

ไวยากรณ์สำหรับตัวอย่างของเส้นแนวตั้งและแนวนอนใน HTML:

ใส่ใจกับแอตทริบิวต์สไตล์
ชายแดน- ซ้าย(-ขวา): 4px ทึบ #FF0000;:

วงกลมเกิดขึ้นโดยใช้แท็ก

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านซ้าย

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านขวา

นี่คือตัวอย่างของเส้นแนวนอนที่เป็นสีแดงด้านล่าง

นี่คือตัวอย่างของเส้นแนวนอนและแนวตั้ง

และถ้าเราวิเคราะห์ตัวอย่างเหล่านี้ เราก็สามารถสรุปได้ค่อนข้างง่ายว่าเส้นแนวตั้งนั้นถูกสร้างขึ้นได้ดีที่สุดโดยใช้ และตัวเลือกเส้นกลางก็สามารถทำได้ด้วย แท็ก

แต่ทุกอย่างขึ้นอยู่กับจินตนาการและการร้องขอ ดังนั้นเลือกและจัดรูปร่าง

สวัสดีทุกคน! วันนี้ผมจะมาบอกวิธีสร้างเส้นแนวนอนโดยใช้ html

ในความเป็นจริง ความจำเป็นในการสร้างเส้นแนวนอนเกิดขึ้นค่อนข้างบ่อย เช่น เมื่อคุณต้องการแยกส่วนหนึ่งของข้อความออกจากอีกส่วนหนึ่ง

เส้นแนวนอนและแนวตั้งโดยใช้ CSS

ซึ่งสามารถทำได้โดยใช้ css ในการทำเช่นนี้ ฉันใส่ส่วนที่ต้องการของข้อความลงในบล็อกโดยใช้แท็ก div จากนั้นในไฟล์ style.css หรือในโค้ด html โดยตรงที่เราเขียนคุณสมบัติของบล็อกนี้สำหรับเส้นขอบด้านบนหรือด้านล่างโดยใช้ border-top และ ขอบล่าง นี่คือตัวอย่าง:

เส้น HTML แนวตั้ง

เส้นแนวนอนโดยใช้ CSS

ในกรณีนี้ ฉันตั้งค่าสไตล์โดยใช้ CSS โดยตรงจากโค้ด html และทำให้เส้นขอบด้านบนทึบและเส้นขอบด้านล่างเป็นจุด

นี่คือลักษณะที่ปรากฏบนหน้า:

เส้นแนวนอนโดยใช้ CSS

วิธีนี้มีข้อดี:

การตั้งค่าที่หลากหลายที่ให้คุณตั้งค่าเส้นได้เกือบทุกประเภท
คุณสามารถสร้างเส้นทั้งแนวนอนและแนวตั้งได้ หากต้องการสร้างเส้นแนวตั้ง คุณต้องเปลี่ยนขอบบนเป็นขอบซ้าย และเปลี่ยนขอบล่างเป็นขอบขวา

ข้อเสียรวมถึงความยุ่งยากของโค้ด

อย่างไรก็ตาม เมื่อปรากฏออกมา คุณสามารถแทรกเส้นแนวนอนลงในข้อความโดยใช้ html ได้ คุณไม่จำเป็นต้องเข้า css ด้วยซ้ำ แท็กนี้ใช้สำหรับสิ่งนี้

เส้นแนวนอนโดยใช้แท็ก html

คุณลักษณะแรกของแท็กนี้คือไม่มีแท็กปิดที่จับคู่กัน สามารถใช้ได้ทุกที่ในโค้ด html ระหว่างแท็ก และ

.

แท็กนี้มีคุณลักษณะดังต่อไปนี้:

ความกว้าง– กำหนดความยาวของเส้นแนวนอนของเราเป็นพิกเซลหรือเปอร์เซ็นต์
สี– กำหนดสีของเส้น;
จัดตำแหน่ง– กำหนดการจัดตำแหน่งของเส้นไปที่ขอบขวา – ขวา, ขอบซ้าย – ซ้าย, ตรงกลาง – กึ่งกลาง;
ขนาด– ความหนาของเส้นเป็นพิกเซล

นี่คือตัวอย่างโค้ด html:

และนี่คือสิ่งที่จะมีลักษณะดังนี้:

อย่างที่คุณเห็น วิธีนี้มีข้อเสีย: