Điều này hướng dẫn, giải thích làm thế nào để thiết kế một mẫu bằng cách sử dụng một trong sạch CSS thiết kế chỉ với nhãn và dữ liệu vào các thẻ HTML để mô phỏng một bảng cấu trúc. Bạn có thể sử dụng tất cả các trang css / HTML để thiết kế các thành phần tuỳ chỉnh của bạn dưới hình thức cho các dự án web của bạn:

Bước 1: Tạo cấu trúc cơ bản HTML

 > <h1> Contact Form : </h1> <label> <span> Full name </span> <input type = "text" class = "input_text" name = "name" id = "name" / > </label> <label> <span> Email </span> <input type = "text" class = "input_text" name = "email" id = "email" / > </label> <label> <span> Subject </span> <input type = "text" class = "input_text" name = "subject" id = "subject" / > </label> <label> <span> Message </span> <textarea class = "message" name = "feedback" id = "feedback" > </textarea> <input type = "button" class = "button" value = "Submit Form" / > </label> </div> </form> <form> <div lớp "box" => <h1> Mẫu Liên hệ: </ h1> <label> <span> Họ và tên </ span> <input type = "text" class = "input_text" name = "Tên" id = "Tên" /> </ nhãn> <label> <span> Thư điện tử </ span> <input loại = "text" lớp = "input_text" tên = "email" id = "email" /> </ nhãn> <label> <span> Tiêu đề </ span> <input loại = "text" lớp = "input_text" tên = "subject" id = "subject" /> </ nhãn> <label> <span> Thông báo </ span> <textarea lớp = "message" tên = "feedback" id = "feedback"> </ textarea> <input loại = "button" lớp = "button" giá trị = "Submit Form" /> </ label> </ div> </ form> 

Bước: 2 Mã số Tạo CSS

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; background : # 161712 ; } form,input,select,textarea { margin : 0 ; padding : 0 ; color : #ffffff ; } div .box { margin : 0 auto ; width : 500px ; background : # 222222 ; position :relative ; top : 50px ; border : 1px solid # 262626 ; } div .box h1 { color : #ffffff ; font-size : 18px ; text-transform :uppercase ; padding : 5px 0 5px 5px ; border-bottom : 1px solid # 161712 ; border-top : 1px solid # 161712 ; } div .box label { width : 100 %; display : block ; background : #1C1C1C ; border-top : 1px solid # 262626 ; border-bottom : 1px solid # 161712 ; padding : 10px 0 10px 0 ; } div .box label span { display : block ; color : #bbbbbb ; font-size : 12px ; float :left ; width : 100px ; text-align :right ; padding : 5px 20px 0 0 ; } div .box .input_text { padding : 10px 10px ; width : 200px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; } div .box .message { padding : 7px 7px ; width : 350px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; overflow :hidden ; height : 150px ; } div .box .button { margin : 0 0 10px 0 ; padding : 4px 7px ; background : #CC0000 ; border : 0px ; position : relative ; top : 10px ; left : 382px ; width : 100px ; border-bottom : 1px double # 660000 ; border-top : 1px double # 660000 ; border-left : 1px double #FF0033 ; border-right : 1px double #FF0033 ; } * (Margin: 0; padding: 0;) body (font: 100% bình thường Arial, Helvetica, sans-serif; nền: # 161712;) hình thức, đầu vào, chọn, textarea (margin: 0; padding: 0; màu sắc: # ffffff;) div. hộp (margin: 0 auto; width: 500px; nền: # 222222; vị trí: thân nhân; đầu trang: 50px; border: 1px solid # 262626;) div. hộp h1 (color: # ffffff; font - kích thước: 18px; text-transform: chữ; padding: 5px 0 5px 5px; border-bottom: 1px solid # 161712; biên giới-top: 1px solid # 161712;) div. hộp nhãn (width: 100%; hiển thị: chặn; background: # 1C1C1C; biên giới-top: 1px solid # 262626; border-bottom: 1px solid # 161712; padding: 10px 0 10px 0;) div. hộp nhãn span (display: block; color: # bbbbbb; font-size: 12px; float: left; width: 100px; text-align: right; padding: 5px 20px 0 0;) div. hộp. input_text (padding: 10px 10px; width: 200px; nền: # 262626; border-bottom: 1px đôi # 171717; biên giới-top: 1px double # 171717; border-left: 1px double # 333333; border-right: 1px double # 333333;) div. hộp. bài viết (padding: 7px 7px; width: 350px; nền: # 262626 ; border-bottom: 1px double # 171717; biên giới-top: 1px double # 171717; border-left: 1px double # 333333; border-right: 1px double # 333333; overflow: hidden; height: 150px;) div. hộp. nút (margin: 0 0 10px 0; padding: 4px 7px; nền: # CC0000; border: 0px; vị trí: thân nhân; đầu trang: 10px; còn lại: 382px; width: 100px; border-bottom: 1px double # 660000; biên giới - đầu trang: 1px double # 660000; border-left: 1px double # FF0033; border-right: 1px double # FF0033;) 

cuối cùng, chúng tôi đã làm xong. Chúng tôi đã tạo ra một hình thức tìm kiếm tốt mà không có bảng. Xem Ví dụ

Filed under: Css, Hướng dẫn bởi admin