Rounded Tab Menu Using jQuery and CSS

Introduction

This article will show you how to create a rotating tab menu using jQuery and CSS step by step. We will create a menu with small icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box. jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool.

Những lệnh thường gặp trong CSS

Việc đầu tiên các bạn cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Trên thế giới hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ được tin dùng nhất chính là Mozila Firefox và Internet Explorer (trình duyệt của window). Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó như các bạn tưởng tượng.

Làm trang Web thêm sinh động với thuộc tính Filter

Ngày nay, Web đã trở nên quen thuộc và việc tự tạo trang Web riêng cũng không còn là chuyện quá khó khăn. Có rất nhiều công cụ có thể tạo nên những hiệu ứng sinh động làm cho trang web trở nên hấp dẫn hơn như Photoshop, CorelDraw, Flash, hay các chương trình viết bằng Java, JavaScript v.v...

CSS kết hợp với Ajax TabContainer Control trong asp.net

Tên bài viết: CSS kết hợp với Ajax TabContainer Control trong asp.net
Tác giả: Quang.It
Phiên bản: ASP.NET 2.0
Cấp độ bài viết: Dễ hiểu, nắm bắt nhanh, đơn giản.
Tóm tắt: Điều này giải thích cho chúng ta làm thế nào để tạo ra phong cách riêng của css cho Ajax TabContainer Control.
1> Đầu tiên tạo 1 ASP.NET AjaxEnabled Website.
2> Kéo và thả TabContainer Control từ Toolkit đến web form.
3> Nhấn đúp TabContainer Control để chuyển sang trang xử lý .CS
Chép code này vào:

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" >
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Quang.IT">
<ContentTemplate>
<asp:TextBox ID="TextBox1" Text="Test by Quang" runat="server"></asp:TextBox>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Storm">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Admin 4rum DNGAZ"></asp:Label>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Diễn đàn Đà Nẵng">
<ContentTemplate>
<asp:Button ID="Button1" PostBackUrl="http://dngaz.com" runat="server" Text="Nhấn vào liên kết" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

Lưu ý: Phải có ScriptManager thì mới hoạt động được Ajax nhé.
4> Bây giờ cùng tạo file CSS. Đặt tên là: Tab.css

/*Header*/
.Tab .ajax__tab_header
{
color: #4682b4;
font-family:Calibri;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #ffffff;
background:url("tab_active.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
color: #ffffff;
background:url("tab_left_active.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
color: #ffffff;
background:url("tab_right_active.gif") no-repeat right;
padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
color: #000000;
background:url("tab_hover.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
color: #000000;
background:url("tab_left_hover.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
color: #000000;
background:url("tab_right_hover.gif") no-repeat right;
padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("tab_Inactive.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("tab_left_inactive.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("tab_right_inactive.gif") no-repeat right;
padding-right:6px;
margin-right: 2px;
}

5> Bây giờ thêm CssClass="Tab" đến TabContainer:

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="Tab" >