Truyện Hoang Dung

mình đã hướng dẫn các bạn viết CSS để trang trí cho trang chủ, hôm nay mình sẽ hướng dẫn các bạn viết các trang con còn lại gồm: Trang danh mục, trang bài viết và page.
Kế thừa lại phần thành phần của trang chủ gồm Header, Sidebar và Footer chúng ta chỉ thay đổi phần Content thôi.

Viết giao diện trang danh mục

Bước 1: Copy code

Đầu viết chúng ta copy tất cả code trong file index.html vừa viết xong dán vào file archive.html để bắt đầu chỉnh sửa thành trang danh mục.

Bước 2:Xóa code dư thừa

Xóa hết nội dung trong div “content” đi chừa lại header, sidebar và footer, các bạn nhớ giữ lại thẻ <div class=”content col-md-9 col-sm-9 col-xs-12″> để viết phần hiển thị danh mục bài viết.

Bước 3: Viết HTML cho phần content

Code HTML của phần content như sau:

<div class="content col-md-9 col-sm-9 col-xs-12">

  <h1 class="archive-title">Thiết kế web</h1>

  <div class="item-archive">

    <div class="row">

      <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></div>

      <div class="detail col-md-9 col-sm-8 col-xs-12">

        <h2><a href="#">Thiết kế web giá rẻ</a></h2>

        <p>Thiết kế website bằng WordPress chuẩn SEO với chi phí hợp lý nhất, hỗ trợ Domain và Hosting chất lượng cao, liên hệ ngay để có giá tốt nhất</p>

        <p class="text-right"><a href="#" class="readmore">Xem thêm...</a></p>

      </div>

    </div>

  </div><!-- end .item -->

  <div class="item-archive">

    <div class="row">

      <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></div>

      <div class="detail col-md-9 col-sm-8 col-xs-12">

        <h2><a href="#">SEO TOP 10 Google</a></h2>

        <p>Thiết kế website bằng WordPress chuẩn SEO với chi phí hợp lý nhất, hỗ trợ Domain và Hosting chất lượng cao, liên hệ ngay để có giá tốt nhất</p>

        <p class="text-right"><a href="#" class="readmore">Xem thêm...</a></p>

      </div>

    </div>

  </div><!-- end .item -->

  <div class="item-archive">

    <div class="row">

      <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></div>

      <div class="detail col-md-9 col-sm-8 col-xs-12">

        <h2><a href="#">Thiết kế web giá rẻ</a></h2>

        <p>Thiết kế website bằng WordPress chuẩn SEO với chi phí hợp lý nhất, hỗ trợ Domain và Hosting chất lượng cao, liên hệ ngay để có giá tốt nhất</p>

        <p class="text-right"><a href="#" class="readmore">Xem thêm...</a></p>

      </div>

    </div>

  </div><!-- end .item -->

  <div class="item-archive">

    <div class="row">

      <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></div>

      <div class="detail col-md-9 col-sm-8 col-xs-12">

        <h2><a href="#">SEO TOP 10 Google</a></h2>

        <p>Thiết kế website bằng WordPress chuẩn SEO với chi phí hợp lý nhất, hỗ trợ Domain và Hosting chất lượng cao, liên hệ ngay để có giá tốt nhất</p>

        <p class="text-right"><a href="#" class="readmore">Xem thêm...</a></p>

      </div>

    </div>

  </div><!-- end .item -->

  <div class="item-archive">

    <div class="row">

      <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></div>

      <div class="detail col-md-9 col-sm-8 col-xs-12">

        <h2><a href="#">Thiết kế web giá rẻ</a></h2>

        <p>Thiết kế website bằng WordPress chuẩn SEO với chi phí hợp lý nhất, hỗ trợ Domain và Hosting chất lượng cao, liên hệ ngay để có giá tốt nhất</p>

        <p class="text-right"><a href="#" class="readmore">Xem thêm...</a></p>

      </div>

    </div>

  </div><!-- end .item -->

</div>

Giải thích: Mình xin giải thích các thành phần trong trang danh mục như sau:

Thẻ h1 là thẻ tiêu đề chính của từng trang web ở đây mình sẽ dùng nó vào việc hiển thị tiêu đề của chuyên mục.
Ở bài này mình có sử dụng thẻ img lấy ảnh từ thư mục images trong project các bạn có thể dùng những hình ảnh của mình share ở phần trước ra sử dụng hoặc tạo thư mục cho riêng bạn tùy ý.
Thẻ h2 cũng là thẻ tiêu đề ở trang này mình dùng nó vào việc hiển thị tiêu đề từng bài viết trong một danh mục, điều này theo kinh nghiệm của mình thì rất tốt cho SEO, ngoài ra còn các thẻ h3, h4, … các bạn có thể bố trí ở cấp độ ưu tiên nhỏ hơn.
text-right đây là class có sẳn của Bootstrap mà mình đã nói ở các phần trước đó là canh phải cho các thành phần bên trong nó.

Như vậy là ta đã viết xong HTML cho trang danh mục, nhìn nó hơi xấu một tí nên chúng ta bước sang phần viết CSS cho nó đẹp hơn.

Bước 4: Viết css cho phần content

Như thường lệ thì muốn viết CSS trên ngôn ngữ LESS thì ta cần phải mở phần mềm Prepros lên và chắc chắn rằng đã add project của ta vào phần mềm rồi.
Do chúng ta kế thừa phần Wrapper từ trang chủ nên ta có thể viết lồng CSS của phần này vào #wrapper luôn nhưng có thể viết tách rời ra, ờ đây mình viết rời ra để các bạn dễ theo dõi.

h1.archive-title{

  text-transform: uppercase;

  font-size: 25px;

}

.item-archive{

  border: 1px solid #dcdcdc;

  box-shadow: 2px 2px 2px #dcdcdc;

  padding: 5px;

  margin-bottom: 15px;

  .thumb{

    img{

      width: 100%;

      height: auto;

    }

  }

  .detail{

    a.readmore{

      color: #fff;

      padding: 5px;

      border-radius: 5px;

      background: #09D5F3;

    }

  }

}

Giải thích: Có 2 phần chính mà ta cần viết CSS đó là thẻ tiêu đều h1 và phần item-archive.

h1.archive-title {} Cách viết này là cách viết css cho thẻ h1 với class của nó là “archive-title”.
border: 1px solid #dcdcdc; đoạn này dùng để kẻ viền cho thành phần với kích cỡ đường viền là 1 pixel và solid là đường nét liền với màu là màu xám nhạc “#dcdcdc”.
box-shadow: 2px 2px 2px #dcdcdc; đoạn này dùng để đổ bóng cho thành phần, thẻ này có trong CSS3.
border-radius: 5px; code này dùng để bo cong đường viên cho thành phần, mà ở đây là nút xem thêm.

Và đây là thành quả đạt được cho trang chuyên mục:

Viết giao diện trang bài viết và page

Phần bài viết và page tương tự như nhau chỉ khác mỗi chổ là trang bài viết có thêm phần bài viết liên quan. Nên mình chỉ hướng dẫn các bạn tạo phần bài viết còn page thì các bạn tự bỏ bớt phần trên hoặc xem trong file mình gửi ở cuối bài.

Bước 1: Copy code

Đầu viết chúng ta copy tất cả code trong file index.html vừa viết xong dán vào file single.html để bắt đầu chỉnh sửa thành trang danh mục.

Bước 2:Xóa code dư thừa

Xóa hết nội dung trong div “content” đi chừa lại header, sidebar và footer, các bạn nhớ giữ lại thẻ <div class=”content col-md-9 col-sm-9 col-xs-12″> để viết phần hiển thị nội dung bài viết.

Bước 3: Viết HTML cho trang bài viết

Code HTML của phần content như sau:

<div class="content col-md-9 col-sm-9 col-xs-12">

  <h1 class="single-title">Lịch sử phát triển của WordPress</h1>

  <div class="single-content">

    <p>WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất thế giới với gần 80 triệu trang web được viết từ WordPress trên toàn thế giới.</p>

    <p>Điểm ưu thế của WordPress ở đây là nó hoàn toàn miễn phí và bạn có thể dùng nó để tạo website đơn giản hoặc là website doanh nghiệp.</p>

    <p>Chỉ cần lên trang chủ của WordPress down bản mới nhất về và cài đặt là bạn đã sở hữu 1 website có thể tùy biến rất dễ dàng, và yêu cầu của nó là phải có một máy chủ, 1 tên miền. Tuy vậy WordPress vẫn có một dịch vụ hoàn toàn miễn phí mà không cần những thứ đó, wordpress.com giải quyết vấn đề đó cho bạn với một số hạn chế đó là ít tùy biến, và phải lệ thuộc vào máy chủ của WordPress (đăng bài spam sẽ bị khóa tài khoản ngay và luôn).</p>

    <p align="center"><img src="images/item1.jpg"></p>

    <p>WordPress bắt đầu chỉ là một Blog nhưng đã phát triển rất mạnh đến ngày nay với đầy đủ các tính năng chuyên nghiệp nhất nhờ vào hệ thống hàng ngàn plugin, widget và theme do chính wordpress phát triển hoặc cộng đồng đóng góp cũng như các công ty thương mại.</p>

    <p>WordPress được viết bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay MySQL, và được cấp phép theo GPLv2.</p>

    <p>Kết lại một câu là WordPress là mã nguồn mà mình thích nhất bởi ở tính năng, tính dễ sử dụng và đặc biệt là nó nhẹ.</p>

    <p>Bài tiếp theo mình sẽ giới thiệu các công cụ cần thiết để thiết kế website với wordpress.</p>

  </div>

  <div class="box-index">

    <h2>Bài viết liên quan</h2>

    <div class="row">

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item1.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

      <div class="item col-md-3 col-sm-3 col-xs-6">

        <span><a href="#" class="thumbnail"><img src="images/item2.jpg"></a></span>

        <h3><a href="#">Tiêu đề bài viết</a></h3>

      </div>

    </div>

  </div>

</div>

Giải thích: Thẻ div “single-content” là nơi để chứa nội dung bài viết, các đoạn văn bản được cho vào các thẻ <p> thẻ mà sau này WordPress cũng sẽ dùng nó và Google hay các công cụ tìm kiếm khác rất thích đọc.
Phần bài viết liên quan thì mình kế thừa lại html và css của box-index ở trang chủ nên các bạn có thể xem lại.

Bước 4: Viết CSS cho trang bài viết

Code CSS phần bài viết như sau:

h1.single-title{

  text-transform: uppercase;

  font-size: 25px;

}

.single-content{

  text-align: justify;

  border: 1px solid #dcdcdc;

  box-shadow: 2px 2px 2px #dcdcdc;

  padding: 10px;

}

Giải thích: Thẻ tiêu đề h1 thì tương tự như phần trang danh mục, đoạn text-align: justify; giúp cho văn bản chứa nó được canh đều về 2 phía.
Và đây là kết quả của trang bài viết: