NTM Solutions

Thứ Ba, 29 tháng 5, 2018

Thông tin cuộc thi Everywhere's Initiative


Cuộc thi bắt đầu nhận đề án dự thi từ ngày 24 tháng 5 cho đến hết ngày 10 tháng 7. Để tìm hiểu thêm thông tin cũng như gửi sáng kiến về chương trình, có thể truy cập trang web www.visa.com.vn để tìm hiểu.
Cuộc thi do "đại gia" thẻ thanh toán VISA tổ chức lần đầu tiên tại Việt Nam.
Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Ba, 24 tháng 4, 2018

Tự học CSS - Bài 29 - Thư viện ảnh


Quay về MỤC LỤC TỰ HỌC CSS 

1.    Thư viện ảnh

Ví dụ:
<html>
<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: 300px; /*Nếu chiều cao hình bằng nhau thì để auto*/
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="hinh\hinh01.jpg">
    <img src="hinh\hinh01.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="hinh\hinh02.jpg">
    <img src=" hinh\hinh02.jpg " alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="hinh\hinh03.jpg">
    <img src="hinh\hinh03.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="hinh\hinh04.jpg">
    <img src="hinh\hinh04.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

2.    Thư viện ảnh responsive

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Hai, 23 tháng 4, 2018

Tự học CSS - Bài 28 - Hiệu ứng dropdown


Quay về MỤC LỤC TỰ HỌC CSS


Trong thiết kế web có 01 hiệu ứng rất hay được sử dụng:
Rê chuột ngang qua đối tượng-> sổ xuống 01 cái gì đó: gọi là hiệu ứng dropdown.

1.    Dropdown cơ bản

Ví dụ: rê chuột ngang qua đối tượng-> xổ xuống 01 nội dung
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none; /*ẩn đối tượng khi chưa rê chuột qua*/
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

2.    Dropdown menu

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Chủ Nhật, 22 tháng 4, 2018

Tự học CSS - Bài 27 - Menu điều hướng

Quay về MỤC LỤC TỰ HỌC CSS

1.    Menu điều hướng là 01 danh sách các liên kết

Ví dụ:
Ban đầu, ta tạo danh sách các liên kết:
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
Sau đó bỏ dấu bullet và định dạng:
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
Nếu muốn hiển thị menu nằm ngang ta có 02 cách thiết lập với li:
li {    float: left;   }
Cách này các bạn nhớ khống chế thẻ div tiếp theo bằng thuộc tính clear ( xem lại bài Tự học CSS - Bài 20 - Thuộc tính float và clear).
Hoặc cũng có thể thiết lập như sau với thẻ li:
li {    display: inline;   }
Mấy phần “râu ria” như tô màu nền, bỏ gạch dưới trong liên kết, hiệu ứng hover,… các bạn tự mày mò xem sao.

2.    Thanh menu nằm dọc

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Bảy, 21 tháng 4, 2018

Tự học CSS - Bài 26 - Thuộc tính trong suốt opacity và transparency


Quay về MỤC LỤC TỰ HỌC CSS


·         Opacity là độ trong suốt của phần tử HTML
·         Thuộc tính này nhận giá trị từ: 0.0-1.0
Ví dụ:
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

1.    Chuyển độ trong suốt kết hợp hiệu ứng :hover


Ví dụ 1:
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
Ví dụ 2: tạo chiếc hộp trong suốt
div {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

2.    Hiệu ứng trong suốt dùng màu nền rgba

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Sáu, 20 tháng 4, 2018

Tự học CSS - Bài 25 - Phần tử giả lập Pseudo-elements


Quay về MỤC LỤC TỰ HỌC CSS

1.    Cú pháp và công dụng của phần tử giả lập

·         Cú pháp:
Tên thẻ chọn::tên phần tử giả lập{thuộc tính: giá trị}
Ví dụ:
h1::after {
    content: url(linh.jpg);
}
·         Công dụng:
o   Định dạng dòng đầu tiên, chữ đầu tiên của đối tượng đã chọn.
o   Chèn nội dung dung vào trước (before) hoặc sau(after) nội dung phần tử đã chọn.

2.    Phần tử giả lập ::first-line

Ví dụ:
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

3.    Phần tử giả lập ::first-letter

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Năm, 19 tháng 4, 2018

Tự học CSS - Bài 24 - Lớp giả lập Pseudo-class


Quay về MỤC LỤC TỰ HỌC CSS 

1.    Cú pháp:

Tên phần tử:lớp giả lập{thuộc tính: giá trị}
Ví dụ:
a:hover{background-color:blue;}
è Gọi lớp giả lập hover của siêu liên kết

2.    Lớp giả lập của siêu liên kết:


/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
Chú ý: các lớp giả lập của siêu liên kết phải khai báo đúng theo thứ tự trên hiệu ứng mới xảy ra.

3.    Lớp giả lập vs lớp CSS

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:

Thứ Tư, 18 tháng 4, 2018

Tự học CSS - Bài 23 - Cách chọn đối tượng trong CSS


Quay về MỤC LỤC TỰ HỌC CSS


Mối quan hệ giữa các phần tử HTML trong CSS được thể hiện qua 04 ký hiệu sau:
·         Chọn phần tử con: dấu khoảng trắng (space)
·         Chọn phần tử con trực tiếp: dấu >
·         Chọn phần tử liền kề: dấu +
·         Chọn tất cả phần tử liền kề: dấu ~

1.    Chọn phần tử con - Descendant Selector

Ví dụ sau chọn tất cả thẻ p nằm tong thẻ div:
div p {
    background-color: yellow;
}
và các giá trị HTML trong phần body:
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

2.    Chọn phần tử con trực tiếp – Child Selector

Xem tiếp »
vào lúc Các liên kết với bài này
Nhãn:
Đăng ký: Bài đăng (Atom)