Nowadays, tabs are widely used in web design, but they are generally divided into the following two types: The first type is switching by clicking the mouse. In this case the tab has no link (but adds a More or More link in the selected tab area). The second type is mouse hover switching. In this case, many tabs have links added, so a:hover should take effect, that is, there will be a slide down or color prompt when the mouse is docked. In fact, this is also the practice of providing appropriate feedback to users in Norman’s design philosophy. Case 1 : Yahoo US homepage belongs to the first tab design, but pay attention to the box in the lower right corner.
| |
![]() |
The first tab is designed to be switched by clicking a button, without any additional links. (top)
![]() |
The second tab design is a floating switch, but there is no a:hover to feedback the links on the tab. (flat)
![]() |
The third tab design is a floating switch, adding a:hover feedback link on the tab. (top)
Case three : QQ pop-up window.
![]() |
The most unpopular QQ pop-up window, there is no link feedback on the tab. I believe that a lot of qq.com traffic is innocently defrauded in this way. (flat)
Insert a paragraph: I have always had some complaints about the design of QQ pop-up windows. A space that can only hold 5 tabs actually indirectly holds 7, so a design for scrolling tabs left and right is necessitated. As for adding a seemingly insignificant but more conspicuous [You can drag the page card to sort], how much real value is there?
<<: How to use environment variables in nginx configuration file
>>: css3 animation ball rolling js control animation pause
A word in advance: Suddenly I received a task to ...
Table of contents Preface Hello World image Set b...
What is CN2 line? CN2 stands for China Telecom Ne...
1. Introduction to fastdfs 1. What is fastdfs Fas...
Table of contents Preface Demand Analysis Mysql u...
Usage of MySQL memory tables and temporary tables...
I'm building Nginx recently, but I can't ...
Table of contents 1. Preparation 2. Writing comma...
It is almost a standard feature for websites nowa...
This should be something that many people have do...
1. What is master-slave replication? The DDL and ...
Table of contents Build Vuex environment Summariz...
mysql between boundary range The range of between...
Achieve results html <div class="containe...
Detailed explanation of the solution to garbled c...