ให้ฉันแสดงการเรนเดอร์ก่อน หากคุณรู้สึกว่ามันค่อนข้างดีโปรดอ้างถึงแนวคิดการใช้งานต่อไปสำหรับคำอธิบายโดยละเอียด
เค้าโครง
1. ครึ่งหนึ่งของแต่ละด้านซ้ายและขวา (COL-MD-6)
2. กล่องเข้าสู่ระบบด้านซ้ายบัญชีครึ่งหนึ่งของด้านซ้าย
3. ทางด้านขวาเป็นข้อควรระวังในการเข้าสู่ระบบ
องค์ประกอบ HTML ที่ใช้
ดี
กลุ่มอินพุต
ปุ่ม (BTN-Success)
รหัส HTML
<div style = "margin-top: 30px;"> <div style = "border-right: 1px solid #ddd;"> <div> <h3> ผู้ใช้เข้าสู่ระบบ </h3> <div> <span id = "sizing-addon1"> <i aria-hidder = "true"> </i> aria-describedby = "Sizing-Addon1"> </div> <div> <span id = "Sizing-Addon1"> <i> </i> </pan> <อินพุตประเภท = "รหัสผ่าน" portholder = "รหัสผ่าน" ครู <อินพุต type = "วิทยุ" name = "kind" value = "stu"> นักเรียน </div> <button type = "ส่ง"> เข้าสู่ระบบ </duct> </div> <div> <h3> ยินดีต้อนรับที่จะใช้ระบบการจัดการการบ้านของนักเรียน </h3> <ul> <li> นักเรียนใช้หมายเลขนักเรียน </em> เพื่อเข้าสู่ระบบ โปรดแก้ไขรหัสผ่านในเวลาหลังจากเข้าสู่ระบบครูโปรดใช้หมายเลขงาน </em> เพื่อเข้าสู่ระบบรหัสผ่านเริ่มต้นคือ <em> 6 1 </em> โปรดแก้ไขรหัสผ่านในเวลาหลังจากลงชื่อเข้าใช้ </li></ul> </div> </div>
รหัส CSS
.input-Group {margin: 10px 0px; // ระยะขอบบนและล่างของกล่องอินพุตคือ 10px และซ้ายและขวาคือ 0px} h3 {padding: 5px; ขอบล่าง: 1px ของแข็ง #ddd; // h3 และระยะขอบล่างคือ 10px} em {// สีสไตล์ที่เน้น: #C7254E; รูปแบบตัวอักษร: สืบทอด; พื้นหลังสี: #F9F2F4;}ข้างต้นคือสิ่งที่ตัวแก้ไขแนะนำให้คุณใช้ Bootstrap เพื่อใช้ UI อินเตอร์เฟสการเข้าสู่ระบบของผู้ใช้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!