Phần 11 - Tạo file 'giao_dien.css' | Hướng dẫn làm web bán hàng

- Bây giờ sẽ định dạng lại giao diện css phần xuất liên kết.Tại file 'index.php' bạn thêm đoạn code sau vào cuối thẻ 'style' (trước </style> , ở giữa thẻ 'head'):

div.phan_trang a
{
   font-size:36px;
   margin-left:5px;
   margin-right:5px;
   text-decoration: none;
   color:blue;
}
div.phan_trang a:hover
{
   color:red
}

+ div.phan_trang a là tham chiếu đến thẻ 'a' nằm trong thẻ 'div' có tên class là 'phan_trang' (cái này bạn đã tạo khi xuất liên kết phân trang ra)

+ div.phan_trang a:hover là tham chiếu đến thẻ 'a' nằm trong thẻ 'div' có tên class là 'phan_trang' khi bạn rê chuột vào liên kết

+ Bạn xem lại các thuộc tính css trong phần 2 khi định dạng giao diện css menu ngang

- Sau đó bạn vào lại trang xuất sản phẩm , rồi kéo xuống phần xuất liên kết phân trang thì nhận được kết quả sau :

- Ở đây do phần định dạng giao diện css tại file 'index.php' có thể kéo dài ra nên cần phải viết phần css này ở 1 file khác để xem và chỉnh sửa tiện hơn.Bạn tạo thư mục 'giao_dien' tại thư mục 'ban_hang' , rồi tạo file 'giao_dien.css' trong thư mục 'giao_dien'.Bạn sao chép nội dung trong thẻ 'style' tại file 'index.php' thành nội dung của file 'giao_dien.css' (không sao chép dòng chữ '<style type="text/css" >' và chữ '</style>' ).Nội dung file 'giao_dien.css' như sau :

div.menu_ngang a
{
   color:blue;
   margin-left: 10px;
   margin-right: 10px;
   text-decoration: none;
   font-size:20px;
}
div.menu_ngang a:hover
{
   color:red
}
div.menu_doc a
{
   color:blue;
   text-decoration: none;
   display:block;
}
div.menu_doc a:hover
{
   color:red
}
div.phan_trang a
{
   font-size:36px;
   margin-left:5px;
   margin-right:5px;
   text-decoration: none;
   color:blue;
}
div.phan_trang a:hover
{
   color:red
}

- Bạn xóa nội dung thẻ 'style' trong file 'index.php' đi (bao gồm dòng chữ '<style type="text/css" >' và chữ '</style>' ).Sau đó tại chỗ mới xóa , bạn thêm dòng code sau :

- Dòng code này sẽ có tác dụng gọi file 'giao_dien.css' vào file 'index.php' , đường dẫn file nằm trong thuộc tính 'href'.Lưu ý là dòng code này phải ở trong thẻ 'head'.Sau đó bạn tải lại trang thì sẽ thấy trang như cũ (trang chủ và trang xuất sản phẩm).Như vậy là bạn đã làm xong việc gọi file 'giao_dien.css' vào trang chủ (nhắc lại là sở dĩ bạn làm việc này là do phần định dạng giao diện css có thể sẽ kéo dài ra nên cần viết vào 1 file khác để tránh làm dài dòng file 'index.php' )

- Nội dung file 'index.php' sau khi sửa như sau :

<?php
    include("ket_noi.php");
?>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Web bán hàng</title>
       <link rel="stylesheet" type="text/css" href="giao_dien/giao_dien.css">
   </head>
   <body>
       <center>
           <table width="990px">
               <tr>
                   <td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
               </tr>
               <tr>
                   <td colspan="3" height="50px" >
                       <?php
                           include("chuc_nang/menu_ngang/menu_ngang.php");
                       ?>
                   </td>
               </tr>
               <tr>
                   <td width="170px" valign="top" >
                   <?php
                       include("chuc_nang/menu_doc/menu_doc.php");
                   ?>
                   </td>
                   <td width="650px" valign="top" >
                       <?php
                           include("chuc_nang/dieu_huong.php");
                       ?>
                   </td>
                   <td width="170px" valign="top" >Cột phải</td>
               </tr>
               <tr>
                   <td colspan="3">Footer</td>
               </tr>
           </table>
       </center>
   </body>
</html>

Hướng dẫn làm web bán hàng

Thứ Năm, 23 tháng 6, 2016

Phần 11 - Tạo file 'giao_dien.css'

Đóng góp