Practice - Tabs

Tabs đã trở thành khá phổ biến trong thiết kế web - bạn có thể tìm thấy chúng gần như bất cứ nơi nào bạn nhìn những ngày nay.

Trước đó thiết kế web dựa nhiều hơn rất nhiều vào bản đồ hình ảnh hoặc về hình ảnh đơn giản, liên kết và bàn để tạo ra các tab. chương này thảo luận về một số kỹ thuật có sử dụng CSS cho việc triển khai tab, mà tự nhiên dẫn đến nhiều ý nghĩa, đánh dấu truy cập được.

Trước khi trình bày dự án tab, xây dựng kế hoạch là điều bắt buộc. Bạn nên hỏi: "Mình mong chờ gì từ việc xây dựng Tab?" Danh sách sau đây phác thảo các mục tiêu thiết kế của các tab dự án:

+ Các tab cần phải đơn giản.
+ Các Text trong Tabs ko phải là hình ảnh.
+ Một hiệu ứng mouseover phải được cung cấp cho mỗi tab để các tab thay đổi màu sắc khi user rê chuột lên nó.
+ Các tab của trang đang được tải phải được đánh dấu.

Để tạo các tab bằng cách sử dụng CSS và XHTML, trước hết tạo 1 file tên index.html

Horrizental Menu style 2 - Pressed Button

I create a file called test.html with some code




its presence will be :



Now, putting some CSS codes in test.css file:

#menu a, #menu a:visited {
position:relative;
text-decoration:none;
background-color:#F39;
text-align:center;
}

and its presence:



Changing the text colour from blue to white:

color:#fff;

and the change is :



Making a block for meu:

display:block;

Editing the block size:

width:10em;

Making border to separate buttons

border:2px solid #fff;

Decorating each button

border-color: #F99;

It now has pink background but can not become buttons so I have some code:

border-color: #FCF #F6C #F6F #FCF;

Extending padding size in each buttons:

padding:0.25em;

Each button is bigger than before.
Removing Light Pink border among different buttons:

margin:0.5em;

Making a hover for each button:

#menu a:hover {
top:2px;
}

When I use a mouse hovering "About Us" button, it is shaked and move down a bit.

If I add a line of CSS code:

left:2px;

I will have the hoverd "About Us" button moving to right a bit.



Set the text colour always become White:

color:#fff;

At the end, I make border of each button become different:

border-color:#F6C #FCF #FCF #F69;

Horrizental Menu style 1

Step 1 => creating div tag in test.html file.



its presence will be :



Now in test.css file, I have some lines of code

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
and its presence after having the code:



Making a hover for each text in the menu:
#menu a:hover {
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}
and its presence now:

So full code of css is :

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
#menu a:hover {
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}

We can change a bit different look by chaning border in menu

#menu a, #menu a:visited {
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #abc;// a look is changed by this line

Vertical Menu

Having coding for vertical menu design:



and its look :



Creating a file called menu_category.css :
code menu background

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

its look is changed a bit different



Using these code t0 change the name : NAVIGATION

#vertmenu h1 {
display: block;
background-color:#F9C;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

Removing all bullets by :

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#vertmenu ul li {
margin: 0px;
padding: 0px;
}

Making buttons and changing text style for menu:

#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

Making a colour hover and colour texts for navigation buttons

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #ffffff;
background-color: #F9C;
}

Sinple menu by CSS

Firstly, I use ul and li tags to create a list of menu.



and its screenshot will be :


The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. I create a separate file called menu.css

I remove a dot in the list by format "ul" tag

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}

At the moment, the sreenshot will be changed :

Then, I aslo format "li" tag:

ul li {
display: block;
position: relative;
float: left;
}

The vertical menu now transforms to a horizontal menu:



submenu is also appeared in second line.

I will hide the second line with:

li ul { display: none; }

The picture now is:


I decorate the menu by:

ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}

I now cover the each button with hover, so there is a change on each button when any user mouse their mouse on the menu.

ul li a:hover { background: #617F8A; }

Displaying submenu in the second line

li:hover ul {
display: block;
position: absolute;
}

As the submenu's appearance, it is so ugly, I am going to format the submenu in order:

li:hover li {
float: none;
font-size: 11px;
}

Hovering the submenu with colour: #617F8A

li:hover a { background: #617F8A; }

Making an effect when users move their mouse on the submenu.

li:hover li a:hover { background: #95A9B1; }

a submenu called "Lạp Xưởng" is changed a bit with its colour.

THE FULL CODE IS:

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

Lesson 9 - Box Model

Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.

Mô hình hộp trên chỉ là một mô hình lý thuyết lý tưởng. Bên dưới đây chúng ta sẽ xét mô hình hộp của một đối tượng web cụ thể:



Ví dụ: Chúng ta có một đoạn HTML sau:


Phần CSS cho đoạn HTML trên:


Với ví dụ trên chúng ta sẽ khái quát được mô hình hộp như sau:



Thuộc tính margin:

Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Page Setup của Word cũng có một thiết lập margin để định lề cho trang in. Tương tự, thuộc tính margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.

Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.


Hoặc gọn hơn chúng ta sẽ viết như sau:



Cú pháp như sau: :
margin: margin-top - margin-right - margin-bottom - margin-left



Thuộc tính padding:

Padding có thể hiểu như là một thuộc tính đệm.

Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về boxmodel).

Cú pháp:

Padding: padding-top / padding-right / padding-bottom / padding-left

Lesson 8 - Span & Div

Nhóm phần tử với thẻ :

Thẻ trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn. Ví dụ: Chúng ta có đoạn HTML sau trích dẫn của tục ngữ dân gian:


Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm chữ "sắt" và "kim". Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ vào đoạn HTML như sau:



Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:



Output:


Nhóm khối phần tử với thẻ:

Cũng như SPAN, DIV cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó DIV có thể nhóm một hoặc nhiều khối phần tử.

Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài trước chúng ta sẽ giải quyết vấn đề bằng cách nhóm các phần tử với DIV như sau:

Và đoạn CSS cho mục đích này sẽ là: