NTM Solutions

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:

Thứ Ba, 17 tháng 4, 2018

Tự học CSS - Bài 22 - Canh lề Dọc và Ngang


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

1.    Canh giữa đối tượng

Ta dùng thuộc tính margin:auto và định giá trị cho bề rộng (width).
Ví dụ:
.center {
    margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
}
Và thẻ HTML trong phần body
<div class="center">Lớp học vi tính .COM</div>

2.    Canh giữa chữ

Ta dùng thuộc tính text-align:center
Ví dụ:
.center {
    margin: auto;
    width: 50%;
    text-align: center;
    border: 3px solid #73AD21;
}

3.    Canh giữa hình ảnh

Thiết lập cho thẻ img các thuộc tính sau:
·         display:block
·         margin-left:auto
·         margin-right:auto
Ví dụ:
img {
    margin-left: auto;
    margin-left: auto;
    display: block;
}
<img src="hinh\linh.jpg">
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)