| <\/td> <\/tr> <\/table> First, let’s adjust the size of the navigation area and add The border and style code are as follows: <\/p> *{ \/*設(shè)置頁面基本屬性*\/ margin:0; padding:0; font-size:14px;}.container{ \/*調(diào)整外圍容器布局*\/ margin:200px auto; width:1024px;}.hot_navs{ \/*設(shè)置分類導(dǎo)航樣式*\/ border:1px solid #CCCCCC; padding:.5em; width:725px;}<\/pre> <\/p> The page effect at this time is as follows: <\/p> <\/p> The size of the area has been determined, now we need to Set styles for the navigation menu, hide the radio buttons, and set the dividing line between the menu and the chart: <\/p> \/*分割線*\/.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ \/*設(shè)置導(dǎo)航item的基本樣式*\/ text-decoration:none; display:inline-block; height:70px; line-height:70px; position:relative; background:#FFE500; -webkit-transition:all 0.6s; \/*當(dāng)item屬性發(fā)生變化時(shí)，執(zhí)行過度動(dòng)畫*\/ -moz-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s;}.hot_navs input{display:none;}.hot_navs .label-type-all,.hot_navs .label-type-1,.hot_navs .label-type-2,.hot_navs .label-type-3,.hot_navs .label-type-4,.hot_navs .label-type-5,.hot_navs .label-type-6,.hot_navs .label-type-7 { \/*設(shè)置區(qū)域頭部導(dǎo)航菜單的基本樣式*\/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer;}<\/pre> <\/p> The effect is as follows: <\/p> <\/p> Careful netizens will find that I added the transition attribute to the above CSS style. This attribute mainly means that when any attribute of the menu changes, a transition animation is executed. <\/p> Next, we add the selected style to the navigation button, and also set the icon opacity of this category to 1 when a menu is selected, and the opacity of other categories to 0.2. The style code is as follows: <\/p> .hot_navs input.selector-type-all:checked ~ .label-type-all,.hot_navs input.selector-type-1:checked ~ .label-type-1,.hot_navs input.selector-type-2:checked ~ .label-type-2,.hot_navs input.selector-type-3:checked ~ .label-type-3,.hot_navs input.selector-type-4:checked ~ .label-type-4,.hot_navs input.selector-type-5:checked ~ .label-type-5,.hot_navs input.selector-type-6:checked ~ .label-type-6,.hot_navs input.selector-type-7:checked ~ .label-type-7 { \/*設(shè)置選擇某一菜單時(shí)，當(dāng)前菜單的基本樣式*\/ font-weight:bold; border-bottom:2px solid #FF9900;}.hot_navs input.selector-type-all:checked ~ a,.hot_navs input.selector-type-1:checked ~ a.item-type-1,.hot_navs input.selector-type-2:checked ~ a.item-type-2,.hot_navs input.selector-type-3:checked ~ a.item-type-3,.hot_navs input.selector-type-4:checked ~ a.item-type-4,.hot_navs input.selector-type-5:checked ~ a.item-type-5,.hot_navs input.selector-type-6:checked ~ a.item-type-6,.hot_navs input.selector-type-7:checked ~ a.item-type-7 { opacity: 1;\/*當(dāng)選擇某一類別菜單時(shí)，設(shè)置當(dāng)前類別item的不透明度*\/}.hot_navs input.selector-type-1:checked ~ a:not(.item-type-1),.hot_navs input.selector-type-2:checked ~ a:not(.item-type-2),.hot_navs input.selector-type-3:checked ~ a:not(.item-type-3),.hot_navs input.selector-type-4:checked ~ a:not(.item-type-4),.hot_navs input.selector-type-5:checked ~ a:not(.item-type-5),.hot_navs input.selector-type-6:checked ~ a:not(.item-type-6),.hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) { opacity: 0.2;\/*當(dāng)選擇某一類別菜單時(shí)，設(shè)置其余類別item的不透明度*\/}<\/pre> <\/p> At this point, all the style codes for the special effects on this page have been written. I really hope everyone can be inspired, and I also hope you like my tutorial. <\/p> <\/p> Thank you everyone, see you in the next practical development case. <\/p> <\/p> "}
Home
Web Front-end
HTML Tutorial
CSS3 practical development: Pure CSS to implement image filtering, classification and display effects_html/css_WEB-ITnose
CSS3 practical development: Pure CSS to implement image filtering, classification and display effects_html/css_WEB-ITnose
Jun 24, 2016 am 11:58 AM
css3
Actual combat
develop
show
filter
Hello netizens, today I will lead you to develop a pure CSS image classification display URL navigation. You may be a little confused just by looking at the title. According to past practice, I will first demonstrate the actual operation effect for you: From the above operation effect, it is not difficult to find that when I click on a menu, the navigation area will highlight the icons of this category accordingly, while other icons will dim . Many people may say that this is so simple. You can quickly achieve the same effect by directly using front-end frameworks such as javascript or jQuery and some CSS. If you are one of these people, I also hope you will stop and read this tutorial. Because in today's tutorial, I will use another way of thinking to think about the problem. I will lead you to completely break away from js and how to achieve switching effects and image classification, aiming to teach you an idea. Okay, no more nonsense, let’s start today’s practical development tutorial. First, we define the html page. The code is as follows (for the convenience of demonstration, I directly imported the styles.css file. At this time, the file does not have any style content): <!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3實(shí)戰(zhàn)開發(fā):圖片過濾分類特效</title> </head> <body> <div class="container"> <div class="hot_navs"> <div class="hot_title"> <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" /> <label for="selector-type-all" class="label-type-all">全部類別</label> <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" /> <label for="selector-type-1" class="label-type-1">電子商務(wù)</label> <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" /> <label for="selector-type-2" class="label-type-2">旅游</label> <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" /> <label for="selector-type-3" class="label-type-3">社交</label> <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" /> <label for="selector-type-4" class="label-type-4">視頻</label> <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" /> <label for="selector-type-5" class="label-type-5">新聞</label> <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" /> <label for="selector-type-6" class="label-type-6">信息門戶</label> <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" /> <label for="selector-type-7" class="label-type-7">票務(wù)</label> <div class="splitline"></div> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/101.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/102.png" /> </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="imgs/103.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="imgs/104.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="imgs/105.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="imgs/106.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/107.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="imgs/108.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/109.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/110.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/111.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/112.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/113.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/114.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="imgs/115.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="imgs/116.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/117.png" /> </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="imgs/118.png" /> </a> </div> </div> </div> </body></html> You will find from the above html code that my navigation menu uses label or radio tags. Why should I define them? Because I want to know which menu I currently clicked, because with CSS alone, we It seems that there is no way to know who is currently clicked, so when I click on the Label, a certain radio will be automatically selected. At this point, let’s run the page to see how it works without adding any styles: First, let’s adjust the size of the navigation area and add The border and style code are as follows: *{ /*設(shè)置頁面基本屬性*/ margin:0; padding:0; font-size:14px;}.container{ /*調(diào)整外圍容器布局*/ margin:200px auto; width:1024px;}.hot_navs{ /*設(shè)置分類導(dǎo)航樣式*/ border:1px solid #CCCCCC; padding:.5em; width:725px;} The page effect at this time is as follows: The size of the area has been determined, now we need to Set styles for the navigation menu, hide the radio buttons, and set the dividing line between the menu and the chart: /*分割線*/.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*設(shè)置導(dǎo)航item的基本樣式*/ text-decoration:none; display:inline-block; height:70px; line-height:70px; position:relative; background:#FFE500; -webkit-transition:all 0.6s; /*當(dāng)item屬性發(fā)生變化時(shí)，執(zhí)行過度動(dòng)畫*/ -moz-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s;}.hot_navs input{display:none;}.hot_navs .label-type-all,.hot_navs .label-type-1,.hot_navs .label-type-2,.hot_navs .label-type-3,.hot_navs .label-type-4,.hot_navs .label-type-5,.hot_navs .label-type-6,.hot_navs .label-type-7 { /*設(shè)置區(qū)域頭部導(dǎo)航菜單的基本樣式*/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer;} The effect is as follows: Careful netizens will find that I added the transition attribute to the above CSS style. This attribute mainly means that when any attribute of the menu changes, a transition animation is executed. Next, we add the selected style to the navigation button, and also set the icon opacity of this category to 1 when a menu is selected, and the opacity of other categories to 0.2. The style code is as follows: .hot_navs input.selector-type-all:checked ~ .label-type-all,.hot_navs input.selector-type-1:checked ~ .label-type-1,.hot_navs input.selector-type-2:checked ~ .label-type-2,.hot_navs input.selector-type-3:checked ~ .label-type-3,.hot_navs input.selector-type-4:checked ~ .label-type-4,.hot_navs input.selector-type-5:checked ~ .label-type-5,.hot_navs input.selector-type-6:checked ~ .label-type-6,.hot_navs input.selector-type-7:checked ~ .label-type-7 { /*設(shè)置選擇某一菜單時(shí)，當(dāng)前菜單的基本樣式*/ font-weight:bold; border-bottom:2px solid #FF9900;}.hot_navs input.selector-type-all:checked ~ a,.hot_navs input.selector-type-1:checked ~ a.item-type-1,.hot_navs input.selector-type-2:checked ~ a.item-type-2,.hot_navs input.selector-type-3:checked ~ a.item-type-3,.hot_navs input.selector-type-4:checked ~ a.item-type-4,.hot_navs input.selector-type-5:checked ~ a.item-type-5,.hot_navs input.selector-type-6:checked ~ a.item-type-6,.hot_navs input.selector-type-7:checked ~ a.item-type-7 { opacity: 1;/*當(dāng)選擇某一類別菜單時(shí)，設(shè)置當(dāng)前類別item的不透明度*/}.hot_navs input.selector-type-1:checked ~ a:not(.item-type-1),.hot_navs input.selector-type-2:checked ~ a:not(.item-type-2),.hot_navs input.selector-type-3:checked ~ a:not(.item-type-3),.hot_navs input.selector-type-4:checked ~ a:not(.item-type-4),.hot_navs input.selector-type-5:checked ~ a:not(.item-type-5),.hot_navs input.selector-type-6:checked ~ a:not(.item-type-6),.hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) { opacity: 0.2;/*當(dāng)選擇某一類別菜單時(shí)，設(shè)置其余類別item的不透明度*/} At this point, all the style codes for the special effects on this page have been written. I really hope everyone can be inspired, and I also hope you like my tutorial. Thank you everyone, see you in the next practical development case.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Four recommended AI-assisted programming tools
Apr 22, 2024 pm 05:34 PM
This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git
Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent
Apr 07, 2024 am 09:10 AM
On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A
Learn how to develop mobile applications using Go language
Mar 28, 2024 pm 10:00 PM
Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
PHP Practical: Code Example to Quickly Implement Fibonacci Sequence
Mar 20, 2024 pm 02:24 PM
PHP Practice: Code Example to Quickly Implement the Fibonacci Sequence The Fibonacci Sequence is a very interesting and common sequence in mathematics. It is defined as follows: the first and second numbers are 0 and 1, and from the third Starting with numbers, each number is the sum of the previous two numbers. The first few numbers in the Fibonacci sequence are 0,1,1.2,3,5,8,13,21,...and so on. In PHP, we can generate the Fibonacci sequence through recursion and iteration. Below we will show these two
How to open filtered duplicate files in Quark
Mar 01, 2024 am 11:25 AM
When using Quark Browser, there is a function to filter duplicate files. Some friends are not very familiar with this. Here I will introduce how to turn on this function. If you are interested, come and take a look with me. 1. First, click "Quark Browser" on your mobile phone to enter the interface, then click and select "Quark Network Disk" in the options in the middle of the page to open and enter. 2. Find "Backup Settings" in the lower part of the Quark network disk interface, and click to open it, as shown in the figure below: 3. Next, on the page you enter, there is a "Filter Duplicate Files", which is displayed behind it There is a switch button. Click the circular slider on it and set it to color to turn on this function. When you continue to back up files, duplicate files will be skipped to save network disk capacity.
Which Linux distribution is best for Android development?
Mar 14, 2024 pm 12:30 PM
Android development is a busy and exciting job, and choosing a suitable Linux distribution for development is particularly important. Among the many Linux distributions, which one is most suitable for Android development? This article will explore this issue from several aspects and give specific code examples. First, let’s take a look at several currently popular Linux distributions: Ubuntu, Fedora, Debian, CentOS, etc. They all have their own advantages and characteristics.
Which framework is best suited for VSCode development?
Mar 25, 2024 pm 02:03 PM
VSCode is a powerful, flexible, and easy-to-extend open source code editor that is widely favored by developers. It supports many programming languages ??and frameworks to meet different project needs. However, the advantages of VSCode may be different for different frameworks. This article will discuss the applicability of VSCode in the development of different frameworks and provide specific code examples. 1.ReactReact is a popular JavaScript library used for building user interfaces. When developing projects using React,
See all articles
|