Bài Học Về Tạo Column Trong Lập Trình Web

Thảo luận trong 'Học tập' bởi nuongitq, 17/1/2016.

  1. nuongitq

    nuongitq Thành viên đạt chuẩn

    Tham gia:
    5/8/2014
    Bài viết:
    72
    Đã được thích:
    8
    Điểm thành tích:
    8
    Xác định vị trí các tập tin gọi là one_col_style.css. Sao chép nó vào thư mục CSS của riêng bạn. Sau đó, trong phần HEAD của HTML của bạn, chèn dòng sau:

    Code:
    
    
    Đây là, tất nhiên, một liên kết đến các stylesheet chúng ta sẽ được sử dụng.

    Khi bạn đã đưa link, lưu công việc của bạn và xem kết quả trong trình duyệt của bạn. Các trang HTML đơn giản nên biến thành thế này: (các màu sắc chúng ta đã lựa chọn là đơn giản để bạn có thể xem các phần khác nhau - họ là một chút sặc sỡ!)

    [​IMG]


    Nếu nó vẫn là một trang HTML đơn giản, chắc chắn tham khảo HREF của bạn là chính xác trong mã LINK ở trên. Bạn đã sao chép tập tin của chúng tôi vào đúng vị trí?

    Bây giờ chúng ta sẽ đi qua các CSS và xem làm thế nào nó hoạt động. Vì vậy, mở ra các mã CSS và có một cái nhìn vào nó.

    Điều đầu tiên để kiểm tra là:
    Code:
    header, footer, section, nav, article {
    display: block;
    }

    Chúng tôi đang thiết lập một nguyên tắc sẽ áp dụng cho tất cả năm mục trong ra mã HTML. Chú ý tất cả năm mục được phân cách bằng dấu phẩy. Bạn có thể làm điều này loại cho các bộ chọn CSS khác. Ví dụ, nếu bạn muốn thiết lập lại CSS mặc định của trình duyệt, bạn có thể làm điều này:
    Code:
    body, h1, h2, h3, p, ul, li, {
    border:0;
    margin:0;
    padding:0;
    }
    Lý do bạn muốn thiết lập lại như thế này là vì trình duyệt khác nhau có giá trị mặc định khác nhau. Sau đó bạn muốn thiết lập các giá trị của riêng bạn mà ghi đè lên giá trị mặc định. Để biết thêm thông tin về cài đặt lại, xem các trang này:
    Code:
    http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
    http://meyerweb.com/eric/tools/css/reset/
    http://html5doctor.com/html-5-reset-stylesheet/  
    >>Khóa học lập trình android nâng cao tại hà nội !

    Nhưng trong mã của chúng tôi, chúng tôi chỉ đảm bảo rằng trình duyệt cũ đối phó với các phần tử HTML5 mới hơn của chúng tôi một cách chính xác.

    Tiếp theo trong mã CSS của chúng tôi, chúng tôi thiết lập một số quy tắc chung cho tất cả mọi thứ giữa hai thẻ BODY:

    Code:
    BODY {
    margin: 0 auto; 
    width: 940px; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    >>Khóa học lập trình android cơ bản nâng cao tại hà nội !

    Dòng đầu tiên giao dịch với biên độ, thiết lập chúng để không, Thông báo tự động một phần, mặc dù. Điều này không là tập trung tất cả mọi thứ trên trang.


    Bài tập
    Xóa tự động từ mã CSS của bạn trong selector BODY. Lưu và làm mới trang trong trình duyệt của bạn. Đặt tự động trở lại trong khi bạn hoàn thành.


    Chúng tôi đang làm ba điều khác cho thẻ BODY: thiết lập chiều rộng 940 pixel, thiết lập font chữ, và thiết lập kích thước font. Chơi xung quanh với những giá trị này và xem những gì sẽ xảy ra.


    Cố định Sizing so lỏng Sizing


    Chúng tôi đã chỉ định một kích thước cố định 940 pixels trong mã của chúng tôi. Có một vấn đề với điều này, tuy nhiên. Giả sử bạn muốn trang web của bạn được xem không chỉ trên một màn hình gắn vào một máy tính mà còn trên điện thoại di động. Kích thước cố định có nghĩa là nó sẽ là quá rộng trên điện thoại. Cách khác là kích thước chất lỏng.


    Với kích thước chất lỏng, các giá trị không bằng pixel nhưng tỷ lệ phần trăm. Ví dụ, thay vì chỉ định một giá trị của 940 pixels, chúng ta có thể viết một cái gì đó giống như 80%. Nếu bạn đang nhắm mục tiêu nhiều hơn một nền tảng sau đó đi cho tỷ lệ phần trăm cho các giá trị của bạn, đặc biệt là đối với chiều rộng (chiều cao có thể ở lại trên các pixel, mặc dù).


    >>Khóa học photoshop cơ bản tại hà nội !
     

    Xem thêm các chủ đề tạo bởi nuongitq
    Đang tải...


Chia sẻ trang này