Web Front-end
CSS Tutorial
CSS web page layout introductory tutorial 10: Tabbed horizontal navigation with current logo_Basic tutorial
CSS web page layout introductory tutorial 10: Tabbed horizontal navigation with current logo_Basic tutorial
the current logo means that the user clicks on the channel or column. the label of the column displays a different color from other labels to remind the user of the location.
this design is a very simple and classic way to improve the usability of the website in website design. when a website is used by users, it should take into account the user's thinking process when browsing. a bad web design only takes into account the page itself without considering the user's experience. an excellent design should be user-centered. such a simple current channel identification is often something that many designers ignore. users need to know where they are and where else they can go. by identifying the current location, it helps users understand their position in the website and guides them. visit other channels.
continue writing from the code in the previous article. in order for a certain channel to become a current channel, this channel must have a background color or text that is different from other channels, but currently we are targeting all a the background of the unified setting of tags, so the first task is to design an exception, that is, the current channel. for such a special channel, we make some modifications to the tags in html:
<ul id="nav"> <li id="current"><a href="/index.asp">主页</a></li> <li><a href="/sort/list_4.html">div+css教程</a></li> <li><a href="/sort/list_5.html">常用代码</a></li> <li><a href="/sort/list_6.html">水晶图标</a></li> <li><a href="/sort/list_7.html">幻灯图片</a></li> <li><a href="/sort/list_10.html">软件下载</a></li> <li><a href="/css2/">css2.0实用手册</a></li> </ul>
we add the following to the first a tag: a new id has been added, named current. continue to write the css part. first, make a color design for the id current:
#nav li a#current { background-color:#2788da; color:#fff;}preview the effect. the background color of the homepage has turned blue.
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>div+css教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>css2.0实用手册</li>
</ul>continue to improve our navigation and add a horizontal line under the page menu
#nav { height:26px; border-bottom:2px solid #2788da;}we set the height of the ul tag and added a 2px solid to the bottom of it. line, preview the effect again, it is almost the same as the tabbed navigation we originally imagined. returning to the definition of the nav element, border-bottom is a newly added attribute we added, which refers to the setting of the lower border of the element. its parameters it refers to the width of 2px, the single solid line style, and the color value of #2788da. with this setting, our ul tag will have a 2px colored lower border.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>simple tabbed navigation is completed through a set of css design. whenever you change a channel page, you only need to change the id="current "move to the a element where the current channel is located to complete the color switching. there is no need to write color attributes, and if you need to modify them, you can easily modify them in css.
about the problem of using css property inheritance between elements in xhtml in this example.
what is inheritance? inheritance means that each element can have multiple styles. under normal circumstances, it abides by the outermost style design. if it encounters its own style design, it will inherit the outer style and give priority to itself. style.
if the inner layer's style conflicts with the outer layer's style, the inner layer's style effect will be displayed.
this example also comes into contact with a new attribute: list-style:none; in the style code for preview.
by default, the li list form in ul has a dot in front of it, as you can see from the previous chapter. this sentence means to remove the default dot in front.
the above is the content of css web page layout introductory tutorial 10: labeled horizontal navigation with current logo_basic tutorial. for more related content, please pay attention to the php chinese website (www.php.cn)!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement a tight transition animation in React using react-transition-group?
Apr 04, 2025 pm 11:27 PM
Using react-transition-group in React to achieve confusion about closely following transition animations. In React projects, many developers will choose to use react-transition-group library to...
The width of emsp spaces in HTML is inconsistent. How to reliably implement text indentation?
Apr 04, 2025 pm 11:57 PM
Regarding the problem of inconsistent width of emsp spaces in HTML and Chinese characters in many web tutorials, it is mentioned that occupying the width of a Chinese character, but the actual situation is not...
How to achieve the effect of high input elements but high text at the bottom?
Apr 04, 2025 pm 10:27 PM
How to achieve the height of the input element is very high but the text is located at the bottom. In front-end development, you often encounter some style adjustment requirements, such as setting a height...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
How to select and style elements of the first specific class using CSS and JavaScript?
Apr 04, 2025 pm 11:33 PM
How to select and style elements of the first specific class using CSS and JavaScript? In web development, you often encounter the need to select and modify specific classes...
How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter?
Apr 04, 2025 pm 11:45 PM
How to achieve the 45-degree curve effect of segmenter? In the process of implementing the segmenter, how to make the right border turn into a 45-degree curve when clicking the left button, and the point...
Why are the inline-block elements misaligned? How to solve this problem?
Apr 04, 2025 pm 10:39 PM
Regarding the reasons and solutions for misaligned display of inline-block elements. When writing web page layout, we often encounter some seemingly strange display problems. Compare...
How to achieve the gradient effect of CSS fonts?
Apr 04, 2025 pm 10:12 PM
Implementing the CSS font gradient effect Many developers hope to achieve cool font gradient effect on web pages. This article will explain in detail how to use CSS3 to implement the graph...
