Hướng dẫn Css + html để hoàn thành 1 trang web đơn giản

Xem: 1325    Tải: 113   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

3 điểm   ( 4 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-css-html-de-hoan-thanh.rar (104.62 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-css-html-de-hoan-thanh.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Trong phần bài tập HTML/XHTML chúng ta đã xây dựng gần như hoàn chỉnh phần cấu trúc HTML, giờ đây chúng ta sẽ sử dụng những gì đã học về CSS để tiếp tục hoàn thành trang web mẫu này. Từ kết quả của bài tập HTML/XHTML, chúng ta sẽ thêm thư mục css, bên trong có chứa file style.css, và tạo một liên kết từ file html ban đầu tới file style.css vừa tạo, lúc này ta có cấu trúc thư mục như sau:

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Bài tập

  • Trong phần bài tập HTML/XHTML chúng ta đã xây dựng gần như hoàn chỉnh phần cấu trúc HTML, giờ đây chúng ta sẽ sử dụng những gì đã học về CSS để tiếp tục hoàn thành trang web mẫu này.
  • Từ kết quả của bài tập HTML/XHTML, chúng ta sẽ thêm thư mục css, bên trong có chứa file style.css, và tạo một liên kết từ file html ban đầu tới file style.css vừa tạo, lúc này ta có cấu trúc thư mục như sau:

Cấu trúc thư mục

  • Html

Click vào dấu [+] để xem cấu trúc.

Từ kết quả của bài tập HTML/XHTML, ta thêm vào một số class cho các thẻ để tiện điều khiển nội dung, khi này ta có file index.html như sau:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="layout">
<div id="header">
<div class="hLeft">
<h1><img src="images/img_logo.gif" alt="" /></h1>
<p>www.hocwebchuan.com</p>
<!-- / class hLeft --></div>

<div class="hRight">
<ul class="hButton">
<li><a href="#"><img src="images/btn_name01.gif" alt="" /></a></li>
<li class="last"><a href="#"><img src="images/btn_name02.gif" alt="" /></a></li>
</ul>
<ul class="hNav">
<li><a href="#">link 01</a></li>
<li><a href="#">link 02</a></li>
<li><a href="#">link 03</a></li>
<li class="last"><a href="#">link 04</a></li>
</ul>
<!-- / class hRight --></div>
<!-- / id header --></div>

<div id="gNav">
<ul>
<li><a href="#">TRANG CHỦ</a></li>
<li><a href="#">GIỚI THIỆU</a></li>
<li><a href="#">SẢN PHẨM</a></li>
<li><a href="#">DỊCH VỤ</a></li>
<li class="last"><a href="#">LIÊN HỆ</a></li>
</ul>
<!-- / id gNav --></div>

<div id="pageBody">
<div id="content">
<h2>Sản phẩm mới</h2>
<div class="newProduct">
<p><img src="images/img_products_new01.jpg" alt="" /></p>
<div>
<h3>Tên sản phẩm</h3>
<p>Text giới thiệu sản phẩm text giới thiệu sản phẩm text giới thiệu sản phẩm text giới thiệu sản phẩm text giới thiệu sản phẩm text giới thiệu sản phẩm.</p>
</div>
<!-- / class newProduct --></div>

<ul class="thumbList">
<li><a href="#"><img src="images/img_products01.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_products02.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_products03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_products04.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_products05.jpg" alt="" /></a></li>
<li class="last"><a href="#"><img src="images/img_products06.jpg" alt="" /></a></li>
</ul>

<h2>Tin tức</h2>
<dl class="news">
<dt>07/05/2012</dt>
<dd><a href="#">Tin mới tin mới tin mới tin mới tin mới tin mới tin mới.</a></dd>

<dt>07/05/2012</dt>
<dd><a href="#">Tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới.</a></dd>

<dt>07/05/2012</dt>
<dd class="last"><a href="#">Tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới tin mới.</a></dd>
</dl>

<p class="banner"><a href="#"><img src="images/bnr_name01.gif" alt="" /></a></p>
<!-- / id content --></div>

<div id="sidebar">
<h2>Link liên quan</h2>
<ul class="linkList">
<li><a href="#">Link liên quan 01</a></li>
<li><a href="#">Link liên quan 02</a></li>
<li><a href="#">Link liên quan 03</a></li>
<li><a href="#">Link liên quan 04</a></li>
<li><a href="#">Link liên quan 05</a></li>
<li class="last"><a href="#">Link liên quan 06</a></li>
</ul>

<h2>Link liên quan</h2>
<ul class="bannerList">
<li><a href="#"><img src="images/bnr_name02.gif" alt="" /></a></li>
<li><a href="#"><img src="images/bnr_name03.gif" alt="" /></a></li>
<li class="last"><a href="#"><img src="images/bnr_name04.gif" alt="" /></a></li>
</ul> <!-- / id sidebar --></div>
<!-- / id pageBody --></div>

<div id="footer">
<div class="fLeft">
<p>TÊN CÔNG TY</p>
<p>Địa chỉ: 139 tam trinh, hoàng mai, hà nội<br />
Điện thoại: 012.3456789</p>
<p>Email: <a href="mailto:support@megacode.com.vn">support@megacode.com.vn</a></p>
<!-- / class fLeft --></div>

<div class="fRight">
<ul>
<li><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li class="last"><a href="#">Link 04</a></li>
</ul>
<p>Copyright (c) 2012 Tên công ty</p>
<!-- / class fRight --></div>
<!-- / id footer --></div>
<!-- / id layout --></div>
</body>
</html>

Do các thẻ HTML có một số hiển thị mặc định không cần thiết hoặc hiển thị không giống nhau giữa các trình duyệt (padding và margin), chúng ta sẽ sử dụng CSS để điều chỉnh sao cho các trình duyệt chạy như nhau và bỏ đi một số hiển thị không cần thiết (bỏ list-style cho <ol> và <ul>, bỏ border cho <img />).

File style.css viết

* {
    margin: 0;
    padding: 0;
}

ol, ul { list-style: none; }

img { border: none; vertical-align: top; }

Giả sử giao diện có chiều rộng 900px và canh giữa, ta viết thêm css như sau:

* {
    margin: 0;
    padding: 0;
}

ol, ul { list-style: none; }

img { border: none; vertical-align: top; }

div#layout {
    border: 1px solid #a3a2a3;
    margin: 20px auto;
    width: 900px;
}

Thuộc tính margin: 20 auto; có ý nghĩa là margin-top và margin-bottom đều có giá trị 20px, margin-left và margin-right có giá trị auto, do mang giá trị auto nên trình duyệt sẽ tự động sắp xếp margin canh đều cho cả 2 bên trái và phải, vì vậy thành phần sẽ nằm giữa.

Quá trình chuẩn bị đã xong, bây giờ ta sẽ điều khiển file style.css để có được giao diện giống như bên dưới.

Hướng dẫn Css + html để hoàn thành 1 trang web đơn giản

Hướng dẫn Css + html để hoàn thành 1 trang web đơn giản Đăng ngày 07-09-2014  Trong phần bài tập HTML/XHTML chúng ta đã xây dựng gần như hoàn chỉnh phần cấu trúc HTML, giờ đây chúng ta sẽ sử dụng những gì đã học về CSS để tiếp tục hoàn thành trang web mẫu này. Từ kết quả của bài tập HTML/XHTML, chúng ta sẽ thêm thư mục css, bên trong có chứa file style.css, và tạo một liên kết từ file html ban đầu tới file style.css vừa tạo, lúc này ta có cấu trúc thư mục như sau: 0.75/10 1325

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn